web 网页学习之（导航栏）

最新推荐文章于 2024-04-24 09:32:23 发布

__网瘾少年

最新推荐文章于 2024-04-24 09:32:23 发布

阅读量615

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/uVarAndMethod/article/details/108934200

web 专栏收录该内容

3 篇文章

订阅专栏

效果如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>test html</title>
	
	<style type="text/css">//页面级CSS
		*{
				margin:0;
				padding:0;
				color:#424242;
		}
		a{
			text-decoration:none;
		}
		.nav{
			list-style:none;
		}
		.nav .list_item{
			float:left;
			margin:0 10px;
			height:30px;
			line-height:30px;
			//border:1px solid black;
			color:#424242;
		}
		.nav .list_item a{
			color:#f40;
			padding:0 5px;
			font-weight:bold;
			height:30px;
			display:inline-block;
			border-radius: 15px;
		}
		.nav .list_item a:hover{
			background-color:#f40;
			color:#fff;
		}
		.nav::after //关闭浮动流  如果不关后面的html会在后面进行布局
		{
			content:"";
			display:block;
			clear:both;
		}
		
	</style>
	
</head>

<body>
	<ul class = "nav">
		<li class="list_item">
			
			<a href="#">天猫</a>
			</li>
		<li class="list_item">
			<a href="#">聚划算</a>
			</li>
		<li class="list_item">
			<a href="#">天猫超市</a>
			</li>
	</ul>

</body>
<html>