竖状菜单
#tab{top:234px;width:111px!important;height:222px!important;line-height:15px!important}
#tab a{height:15px!important;width:80px!important;}
代码注释
!important 可以提升指定样式规则的应用优先权
width:111px!important 整个菜单的宽度
width:80px!important 菜单连接的宽度
top:234px整个菜单的位置,即距顶部距离为234px
height:222px!important可以根据需要自己调节高度
line-height:15px!important与height:15px!important 是对应的,也可以根据需要自己需要设置菜单与菜单之间的位置排列规则
三列布局
#layout td.c3t1{width:30%}
#layout td.c3t3{width:55%}
#layout td.c3t5{width:20%}
实现各区域不同样式的定义
#layout td.c2t3 .modtl{background:url(http://hiphotos.baidu.com/himoban/pic/item/1ca9a51889817d0734fa4153.jpg) no-repeat top left;line-height:1px}#layout td.c2t3 .modtc{background:#a0c158}注释:这个代码适用两列布局，c2即两列布局,三列布局则为c3，t3表示列。 空间个性图片效果
代码
#m_blog div.cnt a:hover img{filter:alpha(opacity=50)}
注释:当鼠标移动到连接中的图片上时，图片的不透明度变为50%。注意:必须采用复制图片的方法来贴图才显示效果。
filter:progid:DXImageTransform.Microsoft.BasicImage(Mirror=1)注释:当鼠标移动到连接中的图片上时，图片翻转。图片添加灰色边框效
#m_blog div.cnt img{border:3px solid #eee;} /*图片元素加边框效果的定义*/
#m_blog div.cnt a:hover img{border:3px solid #cdcdcd;filter:alpha(opacity=50)} /*鼠标放在图片上图片变淡效果，另外并让边框的颜色也变淡一些*/
