最近写了一些简单的页面，整体来说没有什么难度，只是经常会遇到一些小问题，这些问题真的很小，但是自己解决却是用的一种凑合的方法，。代码写久了的人看你同样的页面
下面来看看images元素，这个元素应该是Html中最为特殊的元素，叫做内联块状，不能理解，不过不用理解，这个元素你用margin：0；和padding：0是没有办法去除他们的默认边距。
现在只有将inline-block转化为块状就ok了，来看看。
.main-inner1 img{ display: block; float: left; margin-right: 20px; } .main-inner1 img{ float: left; margin-right: 20px; }这两个样式会实现同样的效果，浮动的元素就自动转化成块元素了，所以设定浮动
display: block;就可以免去了。
另外经常会看到一幅图片右边有很多文字环绕，就是img和p元素的父元素设置一个宽，另外浮动img元素，就可以实现环绕的效果了；
好了。来说说css3的过渡属性，这个属性会实现动画的效果，但是又不是动画，对于孩子啊做静态页面的同学来说，当用大transition实现了一些效果，会感觉到自己的学习才刚刚开始，这应该是最简单的实现动画的属性，。
来看看做的实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } a{ text-decoration: none; } ul{ list-style: none; } ul li a{ border-right: 1px solid #28353b; 100px; height: 40px; text-align: center; line-height: 40px; float: left; background: #d1d1d1; display: block; border-bottom: 1px solid #28353b; } ul li:last-child a{ border-right: none; } .wo{ position: relative; } .cao{ position: absolute; top:41px; left: 101px; height: 0; overflow: hidden; transition: all 3s ease; } .wo:hover .cao{ height: 150px; display: block; } .cao a{ border-right: none; } </style> </head> <body> <ul> <li><a href="#">first</a></li> <li class="wo"> <a href="#">second</a> <ul class="cao"> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </li> <li><a href="#">third</a></li> <li><a href="#">forth</a></li> </ul> </body> </html>
这个代码可以实现鼠标悬浮的时候让二级菜单以动画的效果呈现出来，主要思路很简单，让二级菜单中的ul高度为0，另外在设它的overflow: hidden属性，我当时没有实现出想要的效果，以为高度为零的，内容就隐藏了，其实内容没有隐藏，而是全部超出来了，那么overflow: hidden属性就起到了全部超出的内容隐藏，。
那么hover的时候设置一下高就出来了，。
第二种方法设置二级菜单ul的display: none;属性，。当hover的时候设置display: block;属性，但是效果是直接显示出来的，。
在来看看第三种方法，设置二级菜单的opacity属性为0；当hover的时候让opacity为1，再在二级菜单上设置transition: all 3s ease;这样3s中元素呈现出来，记住一点transition这个东西加在什么地方，很简单，那个元素想实现效果，。就放在那个元素的style上面，。
另外transition还可以实现很多你想不到的效果，。
在来看看做的一个彩虹，。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ 340px; height: 160px; overflow:hidden; margin: 300px auto; transition:box-shadow 3s, transform 3s; } .box:hover{ transform:rotate(360deg); box-shadow: 0px 20px 5px #c9d92b; } .box1{ 300px; height: 300px; border-radius: 50%; border: 20px solid #e91e63; } .box2{ 260px; height: 260px; border-radius: 50%; border: 20px solid #ea1c0d; } .box3{ 220px; height: 220px; border-radius: 50%; border: 20px solid #a82abe;} .box4{ 180px; height: 180px; border-radius: 50%; border: 20px solid #673ab7; } .box5{ 140px; height: 140px; border-radius: 50%; border: 20px solid #0cb1fc; } .box6{ 100px; height: 100px; border-radius: 50%; border: 20px solid #ffe608; } .box7{ 60px; height: 60px; border-radius: 50%; border: 20px solid #56b65a; } </style> </head> <body> <div class="box"> <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"> <div class="box5"> <div class="box6"> <div class="box7"> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
代码很混乱，思路很简单，用到的主要东西就是border，border-radius，overflow: hidden;等几个属性，一个盒子嵌套一个何在，彩虹的效果由border呈现出来，一个彩虹套这个一个彩虹，因此每一个盒子的高度和宽度比它上一级的盒子小两个border值，因为border是两边的，所以是小两个border值。
再不出去就没有图发了。