您的位置：首页 > Web前端 > CSS

CSS设置无需表格的菜单

2016-10-30 16:22 281 查看
CSS设置无需表格的菜单

          项目列表的符号可以设置list-style-type属性值为none，然后，制作各种各样的菜单和导航条，来显示项目的列表。

          首先，建立一个HTML结构，将菜单的各个项用项目列表<ul>表示，同时页面的背景颜色。

<span style="font-size:24px;"><html>
<head>
<title>
无需表单的菜单
</title>
<style>
<!--
body{
background-color:#ffdee0;
}
-->
</style>
</head>
<body>
<divid="navigation">
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">My Blog</a></li>
<li><ahref="#">Friends</a></li>
<li><ahref="#">Next Station</a></li>
<li><ahref="#">Contact Me</a></li>
</ul>
</div>
</body>
</html></span>
          设置整个<div>块的宽度为固定像素，设置文字的字体，设置项目列表<ul>的属性，并将项目符号设置为不显示。

<span style="font-size:24px;">#navigation{
width:200px;
font-family:Arial;
}
#navigationul{
list-style-type:none;
margin:0px;
padding:0px;
}</span>
          此时，项目类别就显示为普通的超链接列表的样式。

          然后，为<li>标记添加下划线，分割各个超链接，并且，对超链接<a>标记进行整体设置。

<span style="font-size:24px;">#navigation li{
border-bottom:1pxsolid #ed9f9f;
}
#navigationli a{
display:block;
padding:5px5px 5px 0.5em;
text-decoration:none;
border-left:12pxsolid #711515;
border-right:1pxsolid #711515;
}</span>
          这里需要说明，display：block，该语句将超链接设置成了块元素，当鼠标进入该块的任何部分时，都会被激活，而不是仅仅在文字上方时才被激活。

          最后，设置超链接的3个伪属性，实现动态菜单的效果，代码如下：

<span style="font-size:24px;">#navigation li a:link,#anvigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigationli a:hover{
background-color:#990020;
color:#ffff00;
}</span>
          完成制作，并且在IE和Firefox中显示的效果一致，通过鼠标指针经过时，改变背景色和改变文字颜色来实现动态菜单的效果。

<span style="font-size:24px;"><html>
<head>
<title>
无需表单的菜单
</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation{
width:200px;
font-family:Arial;
}
#navigationul{
list-style-type:none;
margin:0px;
padding:0px;
}
#navigationli{
border-bottom:1pxsolid #ed9f9f;
}
#navigationli a{
display:block;
padding:5px5px 5px 0.5em;
text-decoration:none;
border-left:12pxsolid #711515;
border-right:1pxsolid #711515;
}
#navigationli a:link,#anvigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigationli a:hover{
background-color:#990020;
color:#ffff00;
}
-->
</style>
</head>
<body>
<divid="navigation">
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">My Blog</a></li>
<li><ahref="#">Friends</a></li>
<li><ahref="#">Next Station</a></li>
<li><ahref="#">Contact Me</a></li>
</ul>
</div>
</body>
</html></span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航