您的位置：首页 > 其它

50-简单的竖直排列的菜单

2013-10-15 21:59 344 查看 


<html>
<head>
<title>简单的数值排列菜单</title>
<style type="text/css">
/*设置背景颜色为浅色*/
body{
background-color:#dee0ff;
}
/*设置整个Div块的宽度为150像素，并设置文字的字体*/
#navigation{
width:150px;
font-family:Arial;
font-size:14px;
text-align:right;
}
/*不显示项目符号*/
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
}
/*添加下边线*/
#navigation li{
border-bottom:1px solid #9f9fed;
}
#navigation li a{
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #151571;/*左边的粗边*/
border-right:1px solid #151571;/*右侧阴影*/
}
/*设置超链接的样式，以实现动态菜单的效果*/
#navigation li a:link,#navigation li a:activted{
background-color:#1136c1;
color:#ffffff;
}
#navigation li a:hover{
background-color:#002099;/*鼠标经过时候改变背景颜色*/
color:#ffff00;
border-left:12px solid yellow;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contect Us</a></li>
<li><a href="#">Web Dev</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Map</a></li>
</ul>
</div>
</body>
</html>


更改成横向的菜单



<html>
<head>
<title>简单的数值排列菜单</title>
<style type="text/css">
/*设置背景颜色为浅色*/
body{
background-color:#dee0ff;
}
/*设置整个Div块的宽度为150像素，并设置文字的字体*/
#navigation{
font-family:Arial;
font-size:14px;
text-align:right;
}
/*不显示项目符号*/
#navigation ul{
list-style-type:none;
margin:0px;
padding:0px;
}
/*添加下边线*/
#navigation li{
float:left;
border-bottom:1px solid #9f9fed;
}
#navigation li a{
width:120px;
display:block;
height:1em;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #151571;/*左边的粗边*/
border-right:1px solid #151571;/*右侧阴影*/
}
/*设置超链接的样式，以实现动态菜单的效果*/
#navigation li a:link,#navigation li a:activted{
background-color:#1136c1;
color:#ffffff;
}
#navigation li a:hover{
background-color:#002099;/*鼠标经过时候改变背景颜色*/
color:#ffff00;
border-left:12px solid yellow;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contect Us</a></li>
<li><a href="#">Web Dev</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Map</a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航