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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_31134013/article/details/53057033

导航栏编写一般都是用<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>
<网页互动的内容关注,和我一起学习更多知识吧>

展开阅读全文

没有更多推荐了,返回首页