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标签默认是内联元素,设置宽度和高度无
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值