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

最新推荐文章于 2022-12-20 09:18:47 发布

会编程的阿强

最新推荐文章于 2022-12-20 09:18:47 发布

阅读量1.3k

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/12757251

版权

HTML/CSS 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<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>

会编程的阿强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
50-简单的竖直排列的菜单

简单的数值排列菜单/*设置背景颜色为浅色*/body{ background-color:#dee0ff;}/*设置整个Div块的宽度为150像素，并设置文字的字体*/#navigation{ width:150px; font-family:Arial; font-size:14px; text-align:right;}/*不显示项目符号*/#navig
复制链接

扫一扫