html：列表导航实例，小米头

翩翩丫头45

已于 2023-02-01 13:11:00 修改

阅读量134

点赞数

文章标签： html css 前端

于 2023-02-01 13:09:35 首次发布

本文链接：https://blog.csdn.net/weixin_65544554/article/details/128549757

版权

<!doctype html>
<html>
<head>
<title>HTML</title>
<!--style表示引入css-->
	<style type="text/css">
/*		去掉所有的边距*/
		*{
			margin: 0;
			padding: 0;
/*			改变字体大小*/
			font-size: 14px;
		}
		div{
			height: 40px;
			background-color: #222;
		}
		ul{
/*			去掉列表样式如前面的索引号或者点号*/
			list-style: none;
			height: 40px;
			width:800px;
/*			居中显示*/
			margin: 0 auto;
		}
		li{
/*			进行从左向右横向展示，默认为纵向*/
			float: left;
			line-height: 40px;
/*			加0表示左右间隔15px；不加0表示上下间隔15px*/
			padding:0 15px;
		}
/*		设置字体*/
		a{
			color: #999;
/*			去掉字体下划线*/
			text-decoration: none;
		}
/*		鼠标放在字体上，字体会变成白色*/
		a:hover{
			color: #FFF;
		}
		
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">小米官网</a></li>
			<li><a href="#">小米商城 </a></li>
			<li><a href="#"> MIUI </a></li>
			<li><a href="#"> IoT </a></li>
			<li><a href="#"> 云服务 </a></li>
			<li><a href="#">天星数科 </a></li>
		
		</ul>
	
	</div>

</body>
</html>

结果：