admin管理员组文章数量:1567745
说明：
1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》
目标：仿写小米官网的顶部导航栏：
初步HTML元素分析：
观察可知，整体部分为一个整个的块，使用一个div元素。中间有一个表示内容区的块存放要显示的内容。
内容区分为两部分（左侧导航栏和右侧导航栏），都用ul元素实现，且其中的每一项都是一个链接，所以
每个li中都是一个链接。除此之外，每个li后面又有一个隔开符，也要用li隔开。整体框架如下：
<div class="all">
<div class="top-bar">
<div class="content">
<ul class="left-bar">
<li>
<a href="#">小米商城</a>
</li>
<li>
<span class="line"></span>
</li>
</ul>
<ul class="right-bar">
</ul>
</div>
</div>
</div>
CSS样式分析：
1.对于整个的块div，宽度为整个页面宽度，需设定高度。上部需要设置边框。
2.对于内容区，高度为父元素高度，需设置一定宽度，用 margin：0 auto；使其居中。
3.对于内容区中左部导航栏，其中的li需要靠左横向排列。li中的链接要设置鼠标移入样式。其中鼠标移入
“下载app”这项内容有一个下拉框，所以要添加下拉框元素和样式。
4.对于内容区中右部导航栏，其中的li需要靠右横向排列。li中的链接要设置鼠标移入样式。其中
“购物车（0）”这项内容中有一个图标,需要引入图标字体来实现，鼠标移入 “购物车（0）”这项内容有一
个下拉框，所以要添加下拉框元素和样式。
代码实现：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./iconfont/fontawesome-free-5.15.3-web/css/all.css">
<style>
body{
/* 设置整个字体样式 */
font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}
.top-bar{
width: 100%;
height: 40px;
background-color: #333;
/* 设置上边框 */
border-top: 1px solid #DADCE0;
font-size: 14px;
}
.top-bar a{
color: #b0b0b0;
font-size: 12px;
/* 去掉链接文字的下划线 */
text-decoration: none;
}
/* 鼠标移入时样式 */
.top-bar a:hover{
color: white;
}
.top-bar .content{
width: 1226px;
height: 40px;
margin: 0 auto;
line-height: 40px;
}
.top-bar .left-bar{
height: 100%;
float: left;
}
.top-bar .left-bar li{
float: left;
}
.right-bar{
float: right;
}
.right-bar li{
float: left;
}
/* 分隔符样式 */
.content .line{
display: inline-block;
width: 1px;
height: 12px;
margin: 15px 8px;
background-color: #424242;
}
#shopping-car{
display: inline-block;
width: 105px;
height: 40px;
margin-left: 25px;
padding-left: 15px;
background-color: #424242;
position: relative;
z-index: 999;
}
/* 购物车内容中图标文字样式 */
#shopping-car .fas{
color: #b0b0b0;
}
/* 设置下拉框中的小三角 */
.drop-box1::after{
display: none;
content: '';
width: 0px;
height: 0px;
border: 8px solid transparent;
border-top: none;
border-bottom-color: white;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0 auto;
}
/* 下拉二维码 */
.drop-box1{
display: block;
position: relative;
}
.download{
/* display: none; */
position: absolute;
z-index: 999;
background-color: white;
box-shadow: 0 1px 5px #aaa;
top: 40px;
left: -30px;
width: 124px;
height: 0px;
overflow: hidden;
/* 设置过渡样式 */
transition: height 0.3s;
}
.download img{
/* display: block; */
width: 90px;
height: 90px;
margin: 18px auto 0px;
}
.download span{
margin-left: 17px;
}
.drop-box1:hover .download,
.drop-box1:hover::after{
display: block;
height: 161px;
}
/* 购物车下拉框 */
.drop-box2{
display: none;
width: 316px;
height: 100px;
line-height: 100px;
background-color: white;
/* 开启定位并设置位置 */
position: absolute;
z-index: 997;
top: 40px;
right: 0;
/* 设置阴影 */
box-shadow: 0 5px 5px rgba(170, 170, 170, 0.425);
}
.drop-box2 div{
font-size: 12px;
margin: 0 65px;
}
#shopping-car:hover .drop-box2{
display: block;
}
#shopping-car:hover{
background-color: white;
border-bottom: 2px solid white;
}
#shopping-car:hover .fas{
color: orange;
}
#shopping-car:hover a{
color: orange;
}
</style>
</head>
<body>
<div class="all">
<div class="top-bar">
<div class="content">
<ul class="left-bar">
<li>
<a href="#">小米商城</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#"> MIUI</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">IoT</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">云服务</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">天星数科</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">有品</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">小爱开放平台</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">企业团购</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">资质证照</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">协议规则</a>
</li>
<li>
<span class="line"></span>
</li>
<li class="drop-box1">
<a href="#">下载app</a>
<!-- 下拉框 -->
<div class="download" >
<img src="./img/download.png" alt="二维码">
<span>小米商城APP</span>
</div>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">智能生活</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">Select Location</a>
</li>
</ul>
<ul class="right-bar">
<li>
<a href="#">登录</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">注册</a>
</li>
<li>
<span class="line"></span>
</li>
<li>
<a href="#">消息通知</a>
</li>
<li id="shopping-car">
<div class="shopping-box">
<!-- 图标文字 -->
<i class="fas fa-shopping-cart"></i>
<a href="#">购物车（0）</a>
</div>
<div class="drop-box2">
<div>购物车中还没有商品，赶紧选购吧!</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
最终结果：
小结：
1.在内容区中设置 line-height 与 height 相等，可以使子元素中的文字在其中垂直居中。
2.在内容区中，设置两个 ul 中内容浮动时，可以先分别设置两个 ul 浮动，再设置 ul 中的 每个 li 靠左浮动，这样，右侧导航栏就会按正确顺序排列。
3.分隔符要单独放在一个 li 元素里，不然格式就会混乱。
4.开启相对定位后会根据 最近的开启定位的父元素来定位，所以开启相对定位时，要为其父元素开启定位，一般用 position: relative ，这个定位不会对元素产生影响。
5.用伪类生成小三角形，以.drop-box1类为例：
.drop-box1::after{
display: none;
content: '';
width: 0px;
height: 0px;
border: 8px solid transparent;
border-top: none;
border-bottom-color: white;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0 auto;
}
6.用 transition 设置过渡效果
版权声明：本文标题：仿写小米网站首页 顶部导航栏部分 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1725633315a1033966.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论