本文是利用几个简单的小例子，来实现html+css的简单应用。

菱形链接菜单

本例是采用html5+css3.0设置的菜单链接。其中主要用到了以下几个方面：

  1. CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。
  2. 用到了margin:25px;/*margin表示元素与其他元素之间的空白*/。
  3. 超链接标签a中垂直居中的设置：设置height 和line-height属性
  4. 鼠标放上去的样式

具体代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>CSS 3.0设置菱形div</title>

     <style type="text/css">

         .menu

         {

              border-bottom:1px solid black;

             }

     .menu div

     {

         width:100px;

         height:100px;

         text-align:center;

         margin:25px;/*margin表示元素与其他元素之间的空白*/

         float:left;

         border:1px solid black;

         transform:rotate(45deg);/*rotate表示旋转45°*/

      }

      .m1

      {

          background-color:Red;

       }

      .m2

      {

          background-color:Blue;

       }

       .m3

      {

          background-color:Green;

       }

       .m4

      {

          background-color:Yellow;

       }

       .m5

      {

          background-color:Gray;

       }

       .m6

      {

          background-color:Olive;

       }

       .m7

      {

          background-color:Orange;

       }

      .menu a

      {

          text-decoration:none;/*不显示下划线*/

          width:70px;

          height:70px;

          margin:15px;

          display:block;

          color:Black;

          text-align:center;

          line-height:70px;

          transform:rotate(-45deg);/*因为外层Div进行旋转，所以a标签也会旋转，所以需要逆向旋转回来*/

       }

       .menu a:hover

       {

           transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/

       }

     </style>

 </head>

 <body>

 <header>

     <h1>这是一个CSS3.0的示例</h1>

     <div class="menu">

         <div class="m1"><a href="#">基础语言</a></div>

         <div class="m2"><a href="#">前端开发</a></div>

         <div class="m3"><a href="#">移动开发</a></div>

         <div class="m4"><a href="#">数据处理</a></div>

         <div class="m5"><a href="#">互联网</a></div>

         <div class="m6"><a href="#">IT硬件</a></div>

         <div class="m7"><span><a href="#">其他</a></span></div>

     </div>

 </header>

 <div style="clear:left;border-top:1px solid black;"></div>

 <div style=" margin-top:2px; border-top:1px solid black;">ada </div>

 </body>

 </html>

三维正方体

本例是采用div+css实现三维正方体，主要涉及到以下几个知识点：

  1. transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
  2. transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
  3. position: relative; 元素的定位。

如下图所示：

具体代码如下：

 .wrap {

     width: 200px;

     height: 200px;

     margin: 200px auto;

     position: relative;

     transform-style: preserve-3d;

     transform: rotateX(30deg) rotateY(30deg);

 }

 .wrap div {

     width: 200px;

     height: 200px;

     position: absolute;

     border: 1px solid blue;

     text-align: center;

     line-height: 200px;

     font-size: 15px;

 }

 #top {

     transform: rotateX(90deg) translateZ(100px);

 }

 #bottom {

     transform: rotateX(90deg) translateZ(-100px);

     border-left: dashed;

 }

 #before {

     transform: translateZ(100px);

     border-bottom: dashed;

     border-left: dashed;

 }

 #after {

     transform: translateZ(-100px);

 }

 #left {

     transform: rotateY(-90deg) translateZ(100px);

 }

 #right {

     transform: rotateY(90deg) translateZ(100px);

 }

一扇打开的门

本例是实现一扇打开的门，涉及的知识点如下：

  1. transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
  2. transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
  3. position: relative; 元素的定位。
  4. border-radius: 20px;定义元素的角的弧度半径。

效果图如下：

具体代码如下：

 #door{

     width:200px;

     height: 200px;

     margin: 200px auto;

     /*border: 1px solid black;*/

     position: relative;

     transform-style: preserve-3d;

 }

 #door div{

     width:200px;

     height: 200px;

     border: 1px solid black;

     position: absolute;

     text-align: center;

 }

 #left{

     transform:rotateX(45deg) rotateY(-45deg) translateX(-200px) translateY(-70px) scaleY(1.4);

 }

 #middle{

     transform:rotateY(45deg) ;

     background-color: greenyellow;

 }

 #right{

     transform:rotateX(45deg) rotateY(45deg) translateX(200px) translateY(-70px)  scaleY(1.4);

 }

 #door #left1{

     width:101px;

     height: 200px;

     border:0px;

     position:absolute;

     margin-left: 0px;

     padding: 0px;

     background-color: darkred;

 }

 #door #left2{

     width:100px;

     height: 200px;

     border:0px;

     position:absolute;

     margin-left: 100px;

     padding: 0px;

     background-color: darkred;

 }

 #door .ball{

     width:20px;

     height: 20px;

     border-radius: 20px;

     background-color: gold;

     margin-top: 10px;

     margin-left: 50px;

     position:relative;

 }

明星照片墙

本例是实现一款自由的明星照片墙，涉及到的知识点如下：

  1. position:absolute; 绝对定位。
  2. transform: scale(1.2); 缩放，大于0：放大，小于0：缩小。
  3. transform: rotate(-30deg); 旋转，二维空间旋转。

效果图如下：

具体代码如下：

 #star{

     width:800px;

     height: 800px;

     background-image: url(../img/bg.jpg);

     background-repeat: repeat;

 }

 #star div{

     width:180px;

     height: 180px;

     border: 1px solid lightblue;

     position:absolute;

 }

 #star div:hover{

     transform: scale(1.2);

 }

 #star p{

     margin-top: 2px;

     padding: 0px;

     text-align: center;

     color: blue;

 }

 #star img{

     width: 180px;

     height: 150px;

 }

 #s1{

     transform: rotate(-30deg);

     top:40px;

     left: 20px;

 }

 #s2{

     transform: rotate(30deg);

     top:350px;

     left: 400px;

 }

 #s3{

     transform: rotate(45deg);

     top:200px;

     left: 200px;

 }

 #s4{

     transform: rotate(60deg);

     top:50px;

     left: 450px;

 }

 #s5{

     transform: rotate(-45deg);

     top:600px;

     left: 500px;

 }

 #s6{

     transform: rotate(-60deg);

     top:400px;

     left: 50px;

 }

 #s7{

     transform: rotate(-45deg);

     top:600px;

     left: 200px;

 }

备注：

关于CSS的定位【position】，详细说明如下：

  1. static:默认定位方式，文档流方式，单独占满一行。left,top,bottom,right不起作用。
  2. absolute:绝对定位，脱离了文档流，不会单独占满一行。方位只会受left,top,bottom,right的影响。默认距离浏览器左上角的距离。如果父元素做了定位，就相对于的是最近的父元素。如果父元素没有定位，则相对于body进行定位。
  3. relative:相对定位，没有脱离文档流，会单独占满一行，方位会受到left,top,bottom,right的影响。相对于离它最近的父元素。
  4. fixed：固定定位，脱离了文档流，不会单独占满一行。lef,top,bottom,right始终相对于body。

关于CSS的块级元素并排，说明如下：

  1. float:块级元素实现漂浮。left,right.
  2. clear:清除浮动，可以清除左浮动和右浮动。

-----------------------------------------------------------------------------------------------------------------

Html5 和 CSS的简单应用的更多相关文章

  1. html css的简单学习（二）

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  2. HTML5 div+css导航菜单

    HTML5 div+css导航菜单 视频 音乐 小说   故事 作品 阅读 联系

  3. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  4. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  5. html css的简单学习（三）

    html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...

  6. html css的简单学习

    html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...

  7. css实现简单的告警提示动画效果

    需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...

  8. css实现简单音乐符效果

    css实现简单音乐符效果 利用css3中的transform.animation.keyframes实现 <!DOCTYPE html> <html lang="en&qu ...

  9. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

随机推荐

  1. [部署]CentOS安装PHP环境

    环境 虚拟机:VMWare10.0.1 build-1379776 操作系统:CentOS7 64位 HTTP Server:Apache(httpd) 步骤 PHP环境需要HTTP服务器支持,本文使 ...

  2. Python代码规范之---代码不规范，亲人两行泪

    任何语言的程序员,编写出符合规范的代码,是开始程序生涯的第一步! 关于代码规范 Python 官方提供有一系列 PEP(Python Enhancement Proposals) 文档 其中第 8 篇 ...

  3. java中的http请求的封装（GET、POST、form表单形式）

    目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...

  4. Percona Server 升级 5.7 到 8.0 版本

    今天发现 Percona Server 已经发布了 8.0 的版本,于是把服务端的 MYSQL 的版本升级了下:备份好数据,升级按照官方的文档来 $ percona-release enable re ...

  5. 高性能Mysql笔记 — 优化

    性能优化 了解查询的整个生命周期,清楚每个阶段的时间消耗情况 性能分析 慢查询日志--服务器性能分析 参考 慢查询日志是优化很重要的手段,但是开启慢查询日志对性能的影响并不大,所以可以考虑在线上打开慢 ...

  6. Nacos系列：基于Nacos的配置中心

    前言 在看正文之前,我想请你回顾一下自己待过的公司都是怎么管理配置的,我想应该会有以下几种方式: 1.硬编码 没有什么配置不配置的,直接写在代码里面,比如使用常量类 优势:对开发友好,开发清楚地知道代 ...

  7. 在AspNetCore中扩展Log系列 - 介绍开源类库的使用（一）

    转发时请注明原创作者及地址,否则追究责任. 原创:alunchen 当创建AspNetCore项目时 当我们创建一个AspNetCore项目时,需要我们手动添加Log: services.AddLog ...

  8. 【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate

    JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...

  9. 向treeview中加载数据

    1.获取树节点的值,用事件AfterSelect加载(id值的获取,用name来获取) 2.双击treeview控件得到 private void treeView1_AfterSelect(obje ...

  10. 通过DFS求解有向图（邻接表存储）中所有简单回路

    前言 查阅了网上许多关于通过DFS算法对有向图中所有简单回路的查找,发现有很多关于使用DFS求解有向回路中所有简单回路的帖子,(在按照节点编号情况下)但大多数仅仅寻找了编号递增的回路.又或者未对结果去 ...