css 如何制作一个水平的导航栏(导航菜单)呢?


摘要:
下文讲述css 制作一个水平导航栏的方法分享,如下所示:

导航栏被广泛应用于网站及各种系统中,下文讲述使用css 制作html导航的方法,如下:

实现思路:
1.使用ul li 生成列表
2.使用css 设置ul 列表样式
3.设置li子项向左漂浮
4.使用css 设置li 中链接样式
5.使用css 设置li 中链接样式hover信息

例:
设置一个水平方向的列表样式

   <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 300px;
    background-color:blue;
}

li{
   float:left;
}
 
li a {
    display: block;
    color: white;
    padding: 10px 18px;
    text-decoration:none;
}
 
li a:link{
     background-color:black;
     color:white;
 }

 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color:red;
    color: white;
}

li a:visited{
     background-color:black;
    color: white;
 }

</style>
</head>

<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">教程</a></li>
</ul>

<p></p>
<p>li全部都为点击区域</p>
</body>
</html>
 

css_菜单样式应用举例

css 菜单样式应用举例


相关阅读:
CSS 列表样式设置方法分享