div+css (7)

 

                                                        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;

}

如有需要参看源码，或到网上找相关详细说明代码。(动态效果是否要使用连接传值？)