CSS导航条从入门到精通

最新推荐文章于 2023-09-20 08:50:45 发布

原创

最新推荐文章于 2023-09-20 08:50:45 发布 · 392 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

1 css实现基本的横向导航条

html结构

	<body>
		<div id="top">
			<!-- 无序列表  包含4个列表项 -->
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">新闻</a>
				</li>
				<li>
					<a href="#">联系</a>
				</li>
				<li>
					<a href="#">关于</a>
				</li>
			</ul>
		</div>
	</body>

css设置

		<style type="text/css">
			
			#top{
				width: 1000px;
				margin: 0px auto;  /*div top 居网页中部*/
			}
			
			ul{
				list-style: none; /*清除原有的列表样式*/
			}
			
			ul li{
				float: left;  /*所有的列表项左浮动*/
			}
			
			/*a标签默认是内联元素，设置宽度和高度无效*/
			ul li a{
				width: 200px; 	/*宽度200*/
				height: 35px; 	/*高度35*/
				line-height: 35px; /*行高35  当行高==高度  内容垂直居中*/
				display: inline-block;/*改变a为块级元素，宽高生效*/
				background-color: #6495ED;
				text-align: center; /*内容水平居中*/
				color: white;
				font-weight: bold;
				font-size: 18px;
				text-decoration: none;
			}
			
			/*当鼠标在a标签上悬停时，改变a标签背景颜色*/
			ul li a:hover{
				background-color: #CC0000; /*鼠标悬浮改变背景色*/
			}
			
		</style>

2 css实现间隔的横向导航条

css设置：跟上一个案例的区别就是增加一个左距离

		<style type="text/css">
			
			#top{
				width: 1000px;
				margin: 0px auto;  /*div top 居网页中部*/
			}
			
			ul{
				list-style: none; /*清除原有的列表样式*/
			}
			
			ul li{
				float: left;  /*所有的列表项左浮动*/
			}
			
			/*a标签默认是内联元素，设置宽度和高度无