没有过专业的培训,用心在实战中学习,效果也不错!
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; //可用width=100等固定宽度 height: 28px; line-height: 28px; text-decoration: none; hover: background: #DD4B39;
7. 设置网站的链接颜色,比如这篇的标题
.me-list-item-title a{ text-decoration:none; color: #0179b5; } .me-list-item-title a:hover{ color: #DD4B39;
8. 解决子级用css float 浮动,而父级DIV 高度不能自适应高度