html/css横向竖向导航栏的绘制

来源：互联网发布：c语言是面向过程编辑：程序博客网时间：2024/05/29 17:12

导航栏编写一般都是用<ul><li>标签来写及列表，下面就看一下代码如何编写的吧：

【竖向导航栏】

<span style="font-size:18px;"><body><div class="menu"><ul class="menubar"><li class="menu-value"><a href="">产品</a></li><li class="" ><a href="">工具与镜像</a></li><li class="" ><a href="">客户与伙伴</a></li><li class="" ><a href="">帮助与支持</a></li><li class="" ><a href="">论坛与博客</a></li></ul></div></body></span>

（图为没有css修饰的运行截图）

接下来css修饰：在没有用css处理过的代码上，其样式ul,li标签的属性都是默认的值：

a:去除li前的点：需要在ul的样式里添加 list-style-type: none; 知识在(点击打开链接)；

b:去除<a>标签的默认样式下划线：需在a标签样式里加 text-decoration: none;知识在（点击打开链接）；

c:怎么让导航栏当鼠标移动上去的时候都会有响应会变色？需要为li标签添加hover选择器在，知识在（点击打开链接）

当鼠标移动上时当前li变色.

d:鼠标移动到ul范围内时变为手形：设置li 的属性cursor: pointer;知识在（点击打开链接）

【竖向导航栏效果】

【横向导航栏】

横向只需在li标签样式中添加属性：display:inline-block;知识在（点击打开链接）

【横向导航栏效果】

【横向代码（全）】

<!DOCTYPE html><html><meta charset="utf-8"><head><title></title></head><style type="text/css">body,ul,li,a{padding: 0;margin: 0;}body{margin-top: 50px;background-color:#e6e6e6;color: #fff; }.menu{font-size: 0;padding: 0;height: 50px;padding-left: 5%;background-color: #00a2ca;position: relative;}.menubar{margin: 0 auto;position: absolute;list-style-type: none;width: 100%;overflow-y: auto;}.menubar li{padding:0px 5px;display:inline-block;cursor: pointer;line-height: 50px;}.menubar li:hover{background-color:#0095bb;}.menubar li.menu-value{background-color: #0095bb;}.menubar a{display: block;height: 50px;font-family: "微软雅黑","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"宋体" ;font-size: 15px;text-align: center;text-decoration: none;color: #fff;}</style><body><div class="menu"><ul class="menubar"><li class="menu-value" ><a href="">产品</a></li><li class="" ><a href="">工具与镜像</a></li><li class="" ><a href="">客户与伙伴</a></li><li class="" ><a href="">帮助与支持</a></li><li class="" ><a href="">论坛与博客</a></li></ul></div></body></html>

<网页互动的内容关注，和我一起学习更多知识吧>

0 0