采用Html5技术编写

了解HTML5请到：http://baike.baidu.com/link?url=4437QJzcpocoFR42wQf6DDOk-7Wj3_zrA7ft_ces0keEVjiCey2C4PyMKmiTt8Mg9YI2hWC7CXBxV7oLbT3Rg_

开始学习吧！

Learn Html5   By C.N.Chinese

1.伪元素

• Home
• About
• News
• Develop
• Others

 style:

 #nav{
	display:block;width:600px;margin:0px auto;font-family:"Microsoft Yahei";
 }
 #nav li{
 display:block;float:left;font-size:20px;
 margin:1px 10px;padding:10px;
 border:1px solid red;
 }
 #nav li:hover{background:red;}
/*在鼠标悬浮在标签上时触发事件hover*/

2.过渡
Click

style:

 #b2 a{text-decoration:none;display:inline-block;padding:2px 10px;font-size:20px;background:white;border:1px solid black;border-radius:5px;color:black;
 transition/*过渡*/:
 all 1s ease-in;
 -webkit-transition:/*-**-对浏览器的支持*/
 all 1s ease-in;
 -moz-transiton: all 1s ease-in;
 -o-transition: all 1s ease-in;
 }
 #b2 a:hover{
 background:black;color:white;
 }

3.图形旋转

style:

 #b3 div{width:200px;height:200px;background:skyblue;display:inline-block;
 transition: all 1s ease-in;
 -webkit-transition: all 1s ease-in;
 -moz-transition: all 1s ease-in;
 -o-transition: all 1s ease-in;

 }

 #b3 div:hover{background:blue;
 transform/*改变*/: rotate(360deg) scale(2);/*rotate:旋转,可以为负值，+顺时针，-逆时针；scale:缩放,单位px,无单位表示放大倍数*/
 }

PS：不定期更新！！！