html和CSS基础学习(十一)

本文通过一个具体的实例展示了如何使用CSS来实现一个响应式的导航条布局。从HTML结构的搭建开始,逐步介绍了如何通过CSS样式调整导航条的样式,包括去除列表默认样式、设置背景颜色、解决浮动引起的塌陷问题等技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

导航条的练习


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding:0 ;
			
		}
			 
			.sn{
				list-style: none;
				/*去掉列表的*号*/
				/*设置背景颜色*/
				background-color: #6495EB;
				/*解决父元素的塌陷问题*/
				overflow: hidden;
				/*设置父元素的宽度让其居中对齐*/
				width: 80%;
				margin: 50px auto;
				
			}
			.sn li{
				/*/让其水平排列/*/
				/*width: 25%;宽度给li制定则会造成超链接只有点到字才能点击*/
				width: 25%;
				/*让字体分开超链接*/
				float:left;
				/*由于元素浮动造成父元素塌陷*/
				/*让其居中对齐*/
				text-align: center;
				/*设置外边距*/
				/*margin: 2px 0;*/
				
			}
			a{
				/*去掉下划线*/
				display: inline-block;
				text-decoration: none;
				width: 100%;
				padding:10px 0 ;
				/**由于A内联元素不能设置宽度/*/
				font-family: "微软雅黑";
				font-weight: bold;
			}
			.sn a:hover{
				background-color: red;
				/*设置背景的移入的颜色*/
			}
			
		</style>
		
	</head>
	<body>
		<ul class="sn">
			<li><a href="#">新闻</a></li>
			<li><a href="#">娱乐</a></li>
			<li><a href="#">关于</a></li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</body>
</html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值