CSS制作实用菜单
一、项目列表
1、 列表的符号
样式表
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal;
/* 项目编号,这里可以改成圈或符号图片等 */
}
引用的时候
<ul>
<li>freestyle 自由泳</li>
<li>backstroke 仰泳</li>
<li>breaststroke 蛙泳</li>
<li>butterfly 蝶泳</li>
<li>individual medley 个人混合泳</li>
<li>freestyle relay 自由泳接力</li>
</ul>
如果是图片的话,在样式里改成
list-style-image:url(icon1.jpg);
/* 图片符号 */
二、无需表格的菜单
实例:
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /*
添加下划线
*/
}
#navigation li a{
display:block; /*
区块显示
*/
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /*
左边的粗红边
*/
border-right:1px solid #711515; /*
右侧阴影
*/
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{
/* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
三、菜单的横竖转换
#navigation li {
float:left; /* 水平显示各个项目 */
}
四、流行的tab菜单
body#home li.home, body#news li.news,
/* 当前页面的菜单项 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
border-bottom:1px solid #FFFFFF; /* 白色下边框,覆盖<ul>中的蓝色下边框 */
color:#000000;
background-color:#FFFFFF;
}
如有需要参看源码,或到网上找相关详细说明代码。(动态效果是否要使用连接传值?)