实战小米官网静态页面1：导航栏部分

凑热闹分子

已于 2022-11-11 21:18:14 修改

阅读量1.4k

点赞数 1

分类专栏： Web应用开发笔记文章标签：前端 html css

于 2022-11-11 21:15:25 首次发布

本文链接：https://blog.csdn.net/qq_51704382/article/details/127805367

版权

Web应用开发笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小米官网静态页面：

在这里插入图片描述

导航栏部分：

这里用id选择器，猫脸动画：class选择器（复习！）

F12
在这里插入图片描述

导航栏分了左右两个部分：

下图18行少了个v，记得补上，是navCenter

设置好网页的边距
图片原本是带着框线的，要去掉
a标签本来是带着下划线的，要去掉

在这里插入图片描述

小米官网~Selection Location

naCenter的div里写无序列表ul，里面写小米官网~Selection Location
每个类别后都有一个竖线，最后一个li的后面没有竖线，所以最后一个li要用上class属性，因为它在后面需要单独设置
在这里插入图片描述

鼠标悬停设置：
达到效果字体颜色改变，并且没有下划线

购物车

购物车标
用的时候一定要删掉里面的点
在这里插入图片描述
购物车是和无序列表ul是并列关系
小知识点：href="#"是一种临时链接的写法，这样写就是说这个链接目前不可用，点击了也不会有作用，还是会跳转到本页，当#被有效链接替换才会起作用。

下图是鼠标放在上面的效果：
在这里插入图片描述

登录注册消息通知

登录注册消息通知是和购物车和 li 同级
在这里插入图片描述

效果是鼠标放上去字变白色，并且是没有下划线的

导航栏效果展示：

在这里插入图片描述

代码：
html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		
		<!-- 对应图标库的引入 -->
		 <!-- Bootstrap -->
		 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

		<!-- 外部文件引入 -->
		<link rel="stylesheet" type="text/css" href="css/mi.css" />
	</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="nav">
					<div id="navCenter">
						<ul>
							<li><a href="#">小米官网</a></li>
							<li><a href="#">小米商城</a></li>
							<li><a href="#">MIUI</a></li>
							<li><a href="#">oT</a></li>
							<li><a href="#">云服务</a></li>
							<li><a href="#">天星数科</a></li>
							<li><a href="#">有品</a></li>
							<li><a href="#">小爱开放平台</a></li>
							<li><a href="#">企业团购</a></li>
							<li><a href="#">资质证书</a></li>
							<li><a href="#">协议规则</a></li>
							<li><a href="#">下app</a></li>
							<li class="lastli"><a href="#">SelectLocation</a></li>
						</ul>
						<div id="navRightCar">
							<a href="#">
								<span class="glyphicon glyphicon-shopping-cart"></span>
								购物车(0)
							</a>
						</div>
						<div id="navRightLogin">
							<a href="#">登录</a>
							<span>|</span>
							<a href="#">注册</a>
							<span>|</span>
							<a href="#">消息通知</a>
							<span>|</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>

css：

/* 初始化 */
*{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
body{
	font-family: "微软雅黑";
}
img{
	
	border: none;
}
a{
	/* 去掉a标签下划线 */
	text-decoration: none;
}
#container{
	width: 100%;
}
#header{
	width: 100%;
	height: 140px;
}
#nav{
	width: 100%;
	height: 40px;
	background-color: #333;
}
#navCenter{
	width: 1226px;
	height: 40px;
	/* 位置居中 */
	margin: 0 auto;
	/* background-color: red; */
}
#navCenter ul{
	margin-top: 16px;
	float: left;
}
#navCenter ul li{
	float: left;
	font-size: 12px;
	line-height: 14px;
	/* 右边框 */
	border-right: 1px solid #424242;
}
#navCenter ul li a{
	color: #b0b0b0;
	margin-right: 8px;
	margin-left: 8px;
}
#navCenter ul .lastli{
	border: none;
}
#navCenter ul li a:hover{
	color: #E0E0E0;
	text-decoration: none;
}
#navRightCar{
	background-color: #424242;
	width: 120px;
	height: 40px;
	float: right;
	line-height: 40px;
	/* 设置鼠标移动上去，变成手的形状 */
	cursor: pointer;
	/* 设置父级div里面的内容水平居中 */
	text-align: center;
}
#navRightCar a{
	font-size: 12px;
	color: #B0B0B0;
}
#navRightCar:hover{
	background-color: white;
}
#navRightCar:hover a{
	color: #ff6700;
	/* 去掉a标签下划线 */
	text-decoration: none;
}
#navRightLogin{
	float: right;
	height: 40px;
	line-height: 40px;
	/* 设置父级div里面的内容水平居中 */
	text-align: center;
	margin-right: 15px;
}
#navRightLogin span{
	color: #424242;
	/* 去掉a标签下划线 */
	text-decoration: none;
}
#navRightLogin a{
	color: #B0B0B0;
	font-size: 12px;
	margin-left: 5px;
	margin-right: 5px;
}
#navRightLogin a:hover{
	color: #E0E0E0;
}