当前位置:中国易下载软件教材中心文章中心百度空间百度空间代码 → 百度空间立状导航菜单代码

百度空间立状导航菜单代码

减小字体 增大字体 作者:佚名  来源:不详  发布时间:2008-3-25 15:05:29
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
喜欢这些内容嘛,请告诉你身边的朋友,易下载中心-QQ资源-itnetcn.com一起享受这份乐趣,本站内容来源互联网
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

竖状菜单
#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/0454ldk) 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)} /*鼠标放在图片上图片变淡效果,另外并让边框的颜色也变淡一些*/