前言：

当我们在浏览网页时，常常能发现各种导航条，这些小小的导航条可以很大的方便我们更好的获取我们想得到的信息，就拿百度中的一个导航条做例子，简单做一个仿照版的吧~

在这里插入图片描述
用无序列表的方法来设计一个导航条：

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav{
				list-style: none;/*这里用到的是无序列表，不设置样式时默认为无序列表的样式*/
				width: 440px;
				height: 60px;
				background-color:white;
				padding-left: 15px;
			}
			//后代选择器
			.nav li{
				float: left;
				line-height: 23px;
			}/*对列表元素的设置*/
			.nav a{
				display: block;
				/*
				不用display：block;定义，那么定义width、height等和长宽相关的css属性时不会生效。使用display:block之后，
				a链接对象将能够像div和其它元素一样成为一个块状对象（block），就可以使用css外边距、内边距等属性给a链接标签加上一系列的样式了。
				*/
				font: Arial;
				font-size: 13px;
				text-decoration: none;
				text-align: center;
				padding: 0 10px;	
				color: #000000;
			}/*对a中元素的设置*/
			.nav a:hover{
				color: blue;
			}/*设置鼠标悬停时的样式*/
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="http://news.baidu.com/">新闻</a></li>
			<li><a href="https://www.hao123.com/?src=from_pc">hao123</a></li>
			<li><a href="http://map.baidu.com/">地图</a></li>
			<li><a href="http://tieba.baidu.com/">贴吧</a></li>
			<li><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a></li>
			<li><a href="http://image.baidu.com/">图片</a></li>
			<li><a href="https://pan.baidu.com/?from=1026962h">网盘</a></li>
			<li><a href="http://www.baidu.com/more/">更多</a></li>
		</ul>
	</body>
</html>

运行结果：

在这里插入图片描述

# css # html # css3
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

avatar 华为开发者空间
cover

GaussDB技术解读——GaussDB架构介绍（四）

avatar 华为开发者空间
cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间