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

导航栏编写一般都是用<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>

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

html/css横向竖向导航栏的绘制相关推荐

JAVA竖向导航栏,css实现横向导航和竖向导航栏的方法（代码）
本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.竖向导航 ul{ list-style-type:non ...
css+div实现导航栏
css+div实现导航栏把页面分成两个部分,用div装起来 <body><div class="one1"><h1>SYROS</h1& ...
HTML css jQuery实现导航栏(华丽动画)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>H ...
搜索导航HTML,CSS 带搜索导航栏的示例代码
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏. 以下实例均是响应式的. 可以先看下效果图: 创建一个搜索栏主页关于联系我们 /* 在顶部导航栏中添加黑色背景颜色 */ .topnav ...
html+css简单立体导航栏
html+css简单立体导航栏一.简单立体导航栏效果二.代码实现 1.html 2.css 一.简单立体导航栏效果二.代码实现 1.html 代码如下(示例): <!DOCTYPE htm ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
使用Html+Css实现简易导航栏(导航栏遇到鼠标切换背景颜色)
Ⅰ.问题描述: 使用html+css实现简易导航栏: **要求:**将导航栏分成八个小部分,并在鼠标放上并不点击,导航栏背景颜色显示为黄绿色: Ⅱ实现过程如下: 1.运行软件VScode,亲测可实现: ...
HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下导航栏的制作: 技术要求: CSS HTML各类标签实现目的 ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...

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

html/css横向竖向导航栏的绘制相关推荐

最新文章

热门文章