css淘宝导航栏模拟实例

最新推荐文章于 2024-03-24 22:23:02 发布

席剑啊~

最新推荐文章于 2024-03-24 22:23:02 发布

阅读量2.2k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/m2606707610/article/details/80760213

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<link rel="stylesheet" href="test2.css" type="text/css">
</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>

*{
	/*初始化整个界面的外边距和内边距以及字体颜色和字体*/
	margin: 0;
	padding: 0;
	color: #424242;
	font-family: arial;
}
.nav{
	/*取消导航栏的圆点*/
	list-style: none;
}

.nav .list-item{
	/*设置左浮动 左右外边距控制10px 高度30px 行高30px(文字居中)*/
	float: left;
	margin: 0 10px;
	height: 30px;
	line-height: 30px;
}
.nav::after{
	/*利用伪元素清除浮动流*/
	content: "";
	display: block;
	clear: both;
}
a{
	/*超链接取消下划线*/
	text-decoration: none;
}
.nav .list-item a{
	/*超链接内容文字颜色 加粗 使超链接内容填充满容器 设置左右内边距 圆角15px*/
	color: #f40;
	font-weight: bold;
	height: 30px;
	display: inline-block;
	padding: 0 5px;
	border-radius: 15px;

}
.nav .list-item a:hover{
	/*伪类选择器控制鼠标进入a标签控制区域时背景颜色和字体颜色进行反转*/
	background-color: #f40;
	color: #fff;
}

席剑啊~

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css淘宝导航栏模拟实例

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航栏&lt;/title&gt; &lt;link rel="stylesheet" href="test2.css"
复制链接

扫一扫

专栏目录