网页设计:css重点实例(一),导航栏设置

先看预览效果:

在这里插入图片描述

实现思路:

<li>标签向右浮动实现水平平铺,同样是用li设置样式来表示成分隔竖线。而鼠标经过出现的下划线,通过只设置底部边框样式来实现,就是说边框本来有上下左右,现在只显示下边框,并设置为黄色

具体代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
	li{
		float:right;		/*向右浮动*/

		text-align:center;	/*文字水平居中*/
		
		margin-right:30px;	

		height:40px;		/*设置盒子大小*/
		width:100px;

		line-height:40px;	/*设置文字垂直居中,把长度设置为盒子高度一致,可以实现*/

		list-style: none;	/*去除默认的圆点样式*/

		}
	.pad1:hover{				/*设置鼠标经过会有下划线*/
		border-bottom:solid;
		border-bottom-color:rgb(254, 225, 0);
		border-width: 5px;
	}

	.pad2{						/*设置分隔竖线*/
			width:0px;
			border-style:solid;
			border-width:1px;
			border-color:#666;
		}

	#nk72{					/*不重要,样式设置*/
		width:200px;
	}

	#last_li{				/*不重要,样式设置*/
		margin-right:60px;
	}
</style>
</head>

<body>

<ul>
	<li class="pad2" id="last_li"></li>		<!--竖线-->

	<li class="pad1">学习教程</li>

	<li class="pad2"></li>					<!--竖线-->
	
	<li id="nk72" class="pad1">关于 Nikon d7200</li>
	
	<li class="pad2"></li>				<!--竖线-->
	
	<li class="pad1">如何购买</li>
	
	<li class="pad2"></li>		<!--竖线-->
	
	<li class="pad1">支持与下载</li>
	
	<li class="pad2"></li>	<!--竖线-->
	
	<li class="pad1">产品介绍</li>
	
	<li class="pad2"></li>	<!--竖线-->
	
    <li class="pad1">主页</li> 
</ul>
</body>
</html>
展开阅读全文

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

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读