本文是利用几个简单的小例子，来实现html+css的简单应用。
菱形链接菜单
本例是采用html5+css3.0设置的菜单链接。其中主要用到了以下几个方面：
- CSS3.0中的2D变换，如：旋转transform:rotate(45deg);移动，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/等功能。
- 用到了margin:25px;/*margin表示元素与其他元素之间的空白*/。
- 超链接标签a中垂直居中的设置：设置height 和line-height属性
- 鼠标放上去的样式
具体代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS 3.0设置菱形div</title> 5 <style type="text/css"> 6 .menu 7 { 8 border-bottom:1px solid black; 9 10 } 11 .menu div 12 { 13 width:100px; 14 height:100px; 15 text-align:center; 16 margin:25px;/*margin表示元素与其他元素之间的空白*/ 17 float:left; 18 border:1px solid black; 19 transform:rotate(45deg);/*rotate表示旋转45°*/ 20 } 21 .m1 22 { 23 background-color:Red; 24 } 25 .m2 26 { 27 background-color:Blue; 28 } 29 .m3 30 { 31 background-color:Green; 32 } 33 .m4 34 { 35 background-color:Yellow; 36 } 37 .m5 38 { 39 background-color:Gray; 40 } 41 .m6 42 { 43 background-color:Olive; 44 } 45 .m7 46 { 47 background-color:Orange; 48 } 49 .menu a 50 { 51 text-decoration:none;/*不显示下划线*/ 52 width:70px; 53 height:70px; 54 margin:15px; 55 display:block; 56 color:Black; 57 text-align:center; 58 line-height:70px; 59 transform:rotate(-45deg);/*因为外层Div进行旋转，所以a标签也会旋转，所以需要逆向旋转回来*/ 60 } 61 62 .menu a:hover 63 { 64 transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/*鼠标放上去后，放大,移动*/ 65 } 66 </style> 67 </head> 68 <body> 69 <header> 70 <h1>这是一个CSS3.0的示例</h1> 71 <div class="menu"> 72 <div class="m1"><a href="#">基础语言</a></div> 73 <div class="m2"><a href="#">前端开发</a></div> 74 <div class="m3"><a href="#">移动开发</a></div> 75 <div class="m4"><a href="#">数据处理</a></div> 76 <div class="m5"><a href="#">互联网</a></div> 77 <div class="m6"><a href="#">IT硬件</a></div> 78 <div class="m7"><span><a href="#">其他</a></span></div> 79 </div> 80 81 </header> 82 <div style="clear:left;border-top:1px solid black;"></div> 83 <div style=" margin-top:2px; border-top:1px solid black;">ada </div> 84 </body> 85 </html>
三维正方体
本例是采用div+css实现三维正方体，主要涉及到以下几个知识点：
- transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
- transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
- position: relative; 元素的定位。
如下图所示：
具体代码如下：
1 .wrap { 2 width: 200px; 3 height: 200px; 4 margin: 200px auto; 5 position: relative; 6 transform-style: preserve-3d; 7 transform: rotateX(30deg) rotateY(30deg); 8 } 9 10 .wrap div { 11 width: 200px; 12 height: 200px; 13 position: absolute; 14 border: 1px solid blue; 15 text-align: center; 16 line-height: 200px; 17 font-size: 15px; 18 } 19 20 #top { 21 transform: rotateX(90deg) translateZ(100px); 22 } 23 24 #bottom { 25 transform: rotateX(90deg) translateZ(-100px); 26 border-left: dashed; 27 } 28 29 #before { 30 transform: translateZ(100px); 31 border-bottom: dashed; 32 border-left: dashed; 33 } 34 35 #after { 36 transform: translateZ(-100px); 37 } 38 39 #left { 40 transform: rotateY(-90deg) translateZ(100px); 41 } 42 43 #right { 44 transform: rotateY(90deg) translateZ(100px); 45 46 }
一扇打开的门
本例是实现一扇打开的门，涉及的知识点如下：
- transform-style: preserve-3d; 以3D的方式显示被镶嵌的元素。
- transform: rotateX(30deg) rotateY(30deg);对元素应用旋转变换。
- position: relative; 元素的定位。
- border-radius: 20px;定义元素的角的弧度半径。
效果图如下：
具体代码如下：
1 #door{ 2 width:200px; 3 height: 200px; 4 margin: 200px auto; 5 /*border: 1px solid black;*/ 6 position: relative; 7 transform-style: preserve-3d; 8 } 9 #door div{ 10 width:200px; 11 height: 200px; 12 border: 1px solid black; 13 position: absolute; 14 text-align: center; 15 } 16 17 #left{ 18 transform:rotateX(45deg) rotateY(-45deg) translateX(-200px) translateY(-70px) scaleY(1.4); 19 } 20 21 #middle{ 22 transform:rotateY(45deg) ; 23 background-color: greenyellow; 24 } 25 26 #right{ 27 transform:rotateX(45deg) rotateY(45deg) translateX(200px) translateY(-70px) scaleY(1.4); 28 } 29 30 #door #left1{ 31 width:101px; 32 height: 200px; 33 border:0px; 34 position:absolute; 35 margin-left: 0px; 36 padding: 0px; 37 background-color: darkred; 38 39 } 40 #door #left2{ 41 width:100px; 42 height: 200px; 43 border:0px; 44 position:absolute; 45 margin-left: 100px; 46 padding: 0px; 47 background-color: darkred; 48 } 49 50 #door .ball{ 51 width:20px; 52 height: 20px; 53 border-radius: 20px; 54 background-color: gold; 55 margin-top: 10px; 56 margin-left: 50px; 57 position:relative; 58 }
明星照片墙
本例是实现一款自由的明星照片墙，涉及到的知识点如下：
- position:absolute; 绝对定位。
- transform: scale(1.2); 缩放，大于0：放大，小于0：缩小。
- transform: rotate(-30deg); 旋转，二维空间旋转。
效果图如下：
具体代码如下：
1 #star{ 2 width:800px; 3 height: 800px; 4 background-image: url(../img/bg.jpg); 5 background-repeat: repeat; 6 } 7 8 #star div{ 9 width:180px; 10 height: 180px; 11 border: 1px solid lightblue; 12 position:absolute; 13 } 14 15 #star div:hover{ 16 transform: scale(1.2); 17 } 18 19 #star p{ 20 margin-top: 2px; 21 padding: 0px; 22 text-align: center; 23 color: blue; 24 } 25 26 #star img{ 27 width: 180px; 28 height: 150px; 29 } 30 31 #s1{ 32 transform: rotate(-30deg); 33 top:40px; 34 left: 20px; 35 } 36 37 #s2{ 38 transform: rotate(30deg); 39 top:350px; 40 left: 400px; 41 } 42 43 #s3{ 44 transform: rotate(45deg); 45 top:200px; 46 left: 200px; 47 } 48 49 #s4{ 50 transform: rotate(60deg); 51 top:50px; 52 left: 450px; 53 } 54 55 #s5{ 56 transform: rotate(-45deg); 57 top:600px; 58 left: 500px; 59 } 60 61 #s6{ 62 transform: rotate(-60deg); 63 top:400px; 64 left: 50px; 65 } 66 67 #s7{ 68 transform: rotate(-45deg); 69 top:600px; 70 left: 200px; 71 }
备注：
关于CSS的定位【position】，详细说明如下：
- static:默认定位方式，文档流方式，单独占满一行。left,top,bottom,right不起作用。
- absolute:绝对定位，脱离了文档流，不会单独占满一行。方位只会受left,top,bottom,right的影响。默认距离浏览器左上角的距离。如果父元素做了定位，就相对于的是最近的父元素。如果父元素没有定位，则相对于body进行定位。
- relative:相对定位，没有脱离文档流，会单独占满一行，方位会受到left,top,bottom,right的影响。相对于离它最近的父元素。
- fixed：固定定位，脱离了文档流，不会单独占满一行。lef,top,bottom,right始终相对于body。
关于CSS的块级元素并排，说明如下：
- float:块级元素实现漂浮。left,right.
- clear:清除浮动，可以清除左浮动和右浮动。
-----------------------------------------------------------------------------------------------------------------