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

小米官网静态页面:


实战小米官网静态页面1:导航栏部分_第1张图片

导航栏部分:

这里用id选择器,猫脸动画:class选择器(复习!)

F12
实战小米官网静态页面1:导航栏部分_第2张图片
实战小米官网静态页面1:导航栏部分_第3张图片
实战小米官网静态页面1:导航栏部分_第4张图片
实战小米官网静态页面1:导航栏部分_第5张图片
导航栏分了左右两个部分:
实战小米官网静态页面1:导航栏部分_第6张图片
实战小米官网静态页面1:导航栏部分_第7张图片
实战小米官网静态页面1:导航栏部分_第8张图片

下图18行少了个v,记得补上,是navCenter
实战小米官网静态页面1:导航栏部分_第9张图片
设置好网页的边距
图片原本是带着框线的,要去掉
a标签本来是带着下划线的,要去掉
实战小米官网静态页面1:导航栏部分_第10张图片
实战小米官网静态页面1:导航栏部分_第11张图片

实战小米官网静态页面1:导航栏部分_第12张图片

小米官网~Selection Location

naCenter的div里写无序列表ul,里面写小米官网~Selection Location
每个类别后都有一个竖线,最后一个li的后面没有竖线,所以最后一个li要用上class属性,因为它在后面需要单独设置
实战小米官网静态页面1:导航栏部分_第13张图片
实战小米官网静态页面1:导航栏部分_第14张图片
鼠标悬停设置:
达到效果字体颜色改变,并且没有下划线
实战小米官网静态页面1:导航栏部分_第15张图片
实战小米官网静态页面1:导航栏部分_第16张图片

购物车

购物车标
用的时候一定要删掉里面的点
实战小米官网静态页面1:导航栏部分_第17张图片
购物车是和无序列表ul是并列关系
小知识点:href="#"是一种临时链接的写法,这样写就是说这个链接目前不可用,点击了也不会有作用,还是会跳转到本页,当#被有效链接替换才会起作用。
实战小米官网静态页面1:导航栏部分_第18张图片
实战小米官网静态页面1:导航栏部分_第19张图片
下图是鼠标放在上面的效果:
实战小米官网静态页面1:导航栏部分_第20张图片

登录注册消息通知

登录注册消息通知 是和 购物车 和 li 同级
实战小米官网静态页面1:导航栏部分_第21张图片
实战小米官网静态页面1:导航栏部分_第22张图片
效果是鼠标放上去字变白色,并且是没有下划线的
实战小米官网静态页面1:导航栏部分_第23张图片
导航栏效果展示:
实战小米官网静态页面1:导航栏部分_第24张图片

实战小米官网静态页面1:导航栏部分_第25张图片
实战小米官网静态页面1:导航栏部分_第26张图片
代码:
html:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城title>
		
		
		 
		 <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="#">MIUIa>li>
							<li><a href="#">oTa>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="#">下appa>li>
							<li class="lastli"><a href="#">SelectLocationa>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;
}

你可能感兴趣的:(Web应用开发笔记,前端,html,css)