没有过专业的培训，用心在实战中学习，效果也不错！

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 高度不能自适应高度

方法一：对父级设置固定高度。
方法二：使用css  clear 清除浮动（clear:both）
方法三：对父级样式加overflow(overflow:hidden)

9. 设置a的宽度，用display:block（比如 http://blog.mreald.com/list 右边的分类列表 ）

.me-catogory ul li a{
color:#0179b5;

text-decoration:none;
font-weight: bold;
display: block;
padding: 0px 30px 12px 20px;
font-size: 1.3em;
}

10.设置网站图片有的背影（有立体感，比如http://blog.mreald.com上的图片）

.me-body img{

box-shadow: 5px 5px 20px #647F47;

}