没有过专业的培训,用心在实战中学习,效果也不错!
1.background 图片平铺100%,固定不动。
background: url(test.jpg) 50% 0% / cover no-repeat fixed;
-webkit-background-size: cover;
2.鼠标放图片或者文字上有变白的效果:
#main ul.products li a:hover img { opacity:0.8;filter:alpha(opacity=80) }
3.设置一个区块的圆角与阴影(比如mreald网站):
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 0 5px #ccc;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #ccc;
4. css min max-width ie8 不兼容 用width=
5.设置li行高并居中
ul:
list-style: none;
li:
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #CCCBAF;
a:
overflow: hidden;
6. 按钮的设置 比如 我的右边的:
border-radius: 3px;
background: #FE9900;
color: #FFF;
padding: 6px 32px;
height: 28px;
line-height: 28px;
text-decoration: none;
hover:
background: #DD4B39;
原文:http://blog.mreald.com/109