说明：
1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》
目标：仿写小米官网的产品导航栏：
初步HTML元素分析：
观察可知，与顶部导航栏部分类似，整体结构为一个整个的块，使用一个div元素。中间有一个表示内容
区的块存放要显示的内容。
内容区分为三部分（logo、中间的列表和右侧搜索框），logo部分用div元素，里面放图片。中间的列表
用ul元素实现，且其中的每一项都是一个链接，所以每个li中都是一个链接。除此之外，每个li都有一个
下拉框。右侧搜索框单独放在一个div元素中。整体框架如下：
<div class="product-bar">
<div class="product-content">
<div class="logo">
<a href="#" ><img src=""></a>
</div>
<ul class="list">
<li>
<a href="#">小米手机</a>
<!-- 下拉框 -->
<div class="item">
</div>
</li>
<li class="become-color"><a href="#">服务</a></li>
<li class="become-color"><a href="#">社区</a></li>
</ul>
<div class="right">
<div class="search"
</div>
</div>
</div>
</div>
CSS样式分析：
1.对于整个的块div，宽度为整个页面宽度，需设定高度。
2.对于内容区，高度为父元素高度，需设置一定宽度，用 margin：0 auto；使其水平居中。需设置定位，方便后面子元素定位。
3.对于内容区中logo部分需要开启绝对定位，排列在内容区的最左边。
4.对于内容区中间列表部分，其中的li需要靠左横向排列。每个 li 都有下拉框，所以 li 中的链接要设置鼠标移入样式和下拉框的元素和样式。
代码实现：
<!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;
}
/* product-bar 产品导航 */
.product-bar{
width: 100%;
height: 100px;
}
.product-content{
width: 1226px;
height: 100%;
margin: 0 auto;
position: relative;
font: 14px;
}
/* 产品导航左侧logo */
.logo{
margin-top: 21px;
position: absolute;
}
.product-content img{
width: 56px;
height: 56px;
}
/* 产品导航 产品列表*/
.product-content .list a{
text-decoration: none;
color: #333;
font-size: 16px;
}
.product-content .list{
display: inline-block;
width: 620px;
height: 100px;
line-height: 100px;
margin-left: 245px;
position: absolute;
}
.product-content .list li{
margin-right: 20px;
float: left;
}
/* 产品导航 产品列表 下拉框 */
.item{
display: none;
width: 1536px;
height: 220px;
line-height: 230px;
border-top: 1px solid #e0e0e0;
position: absolute;
z-index: 995;
left: -400px;
background-color: white;
}
.item ul{
width: 1250px;
height: 220px;
margin: 0px auto;
padding-top: 10px;
}
.item ul li{
float: left;
height: 220px;
}
.item ul li img{
width: 160px;
height: 110px;
}
.list li:hover a{
color: #FF6A00;
}
.list li:hover .item{
display: block;
}
.item ul li .first-txt{
display: block;
color: #333;
width: 100%;
height: 20px;
font-size: 12px;
line-height: 20px;
margin-top: -90px;
padding-left: 35px;
}
.tv .item ul .first-txt{
padding-left: 0px;
}
.item ul li .second-txt{
display: block;
width: 100%;
font-size: 12px;
height: 20px;
line-height: 20px;
color: #FF6A00;
padding-left: 50px;
}
.item ul .line{
display: inline-block;
width: 1px;
height: 100px;
background-color: #e0e0e0;
}
.become-color a:hover{
color: #FF6A00;
}
/* 右侧搜索区 */
.search{
width: 296px;
height: 50px;
position: absolute;
right: 0;
top: 25px;
}
/* 设置点击搜索框样式 */
.search input{
box-sizing: border-box;
float: left;
height: 50px;
width: 244px;
border: none;
padding: 0 10px;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
/* 去掉轮廓线 */
outline: none;
}
.search button{
float: left;
height: 50px;
width: 52px;
padding: 0;
border: none;
background-color: white;
color: #616161;
font-size: 16px;
border: 1px solid rgb(224, 224, 224);
border-left: none;
}
/* 获取焦点 */
.search input:focus{
/* 边框颜色 */
border: 1px solid #ff6700;
}
/* 分组选择器 兄弟元素*/
.search input:focus + button{
border: 1px solid #ff6700;
border-left: none;
}
.search button:hover{
background-color: #ff6700;
border: none;
}
.search button:hover i{
color: white;
}
</style>
</head>
<body>
<div class="all">
<div class="product-bar">
<div class="product-content">
<div class="logo">
<a href="#" ><img src="./img/milogo-mi2.png" alt="logo"></a>
</div>
<ul class="list">
<li>
<a href="#">小米手机</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p11.png">
<span class="first-txt">小米MIX FOLD</span>
<span class="second-txt">999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p12.png">
<span class="first-txt">小米MIX FOLD</span>
<span class="second-txt">999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p13.png">
<span class="first-txt">小米MIX FOLD</span>
<span class="second-txt">999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p14.png">
<span class="first-txt">小米MIX FOLD</span>
<span class="second-txt">999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p15.png">
<span class="first-txt">小米MIX FOLD</span>
<span class="second-txt">999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p16.png">
<span class="first-txt">小米MIX FOLD</span>
<span class="second-txt">999元起</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Redmi红米</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p21.png">
<span class="first-txt">K40 游戏增强版</span>
<span class="second-txt">1999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p22.png">
<span class="first-txt">K40 Pro 系列</span>
<span class="second-txt">2799元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p23.png">
<span class="first-txt">Redmi K40</span>
<span class="second-txt">1999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p24.png">
<span class="first-txt">Redmi Note 9 系列</span>
<span class="second-txt">999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p25.png">
<span class="first-txt">Redmi K30S 至尊纪念版</span>
<span class="second-txt">2299元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p26.jpg">
<span class="first-txt">Redmi K30 至尊纪念版</span>
<span class="second-txt">999元起</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">电视</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p31.png">
<span class="first-txt">Redmi MAX 86” 超大屏电视</span>
<span class="second-txt">9999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p32.png">
<span class="first-txt">小米电视大师 82英寸至尊纪念版</span>
<span class="second-txt">49999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p33.png">
<span class="first-txt">小米电视大师 82英寸</span>
<span class="second-txt">11999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p34.jpg">
<span class="first-txt">小米透明电视</span>
<span class="second-txt">49999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p35.png">
<span class="first-txt">小米电视 大师 65英寸OLED</span>
<span class="second-txt">9999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p36.jpg">
<span class="first-txt">Redmi 智能电视 MAX 98''</span>
<span class="second-txt">19999元</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">笔记本</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p41.png">
<span class="first-txt">小米笔记本Pro 14</span>
<span class="second-txt">5299元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p42.png">
<span class="first-txt">小米笔记本Pro 15</span>
<span class="second-txt">6499元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p43.png">
<span class="first-txt">RedmiBook Pro 14</span>
<span class="second-txt">4699元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p44.png">
<span class="first-txt">RedmiBook Pro 15</span>
<span class="second-txt">4999元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p45.png">
<span class="first-txt">Redmi G 游戏本</span>
<span class="second-txt"></span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p46.png">
<span class="first-txt">RedmiBook 16</span>
<span class="second-txt">5499元</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">家电</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p51.jpg">
<span class="first-txt">米家风冷对开门冰箱 483L</span>
<span class="second-txt">2499元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p52.png">
<span class="first-txt">米家扫拖机器人1T</span>
<span class="second-txt">2299元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p53.png">
<span class="first-txt">米家互联网洗烘一体机10kg</span>
<span class="second-txt">1999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p54.png">
<span class="first-txt">小米净水器S1 800G</span>
<span class="second-txt">2299元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p55.png">
<span class="first-txt">小米净水器S1 800G</span>
<span class="second-txt">899元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p56.jpg">
<span class="first-txt">米家两门冰箱 160L</span>
<span class="second-txt">899元</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">路由器</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p61.png">
<span class="first-txt">小米路由器AX6000</span>
<span class="second-txt">599元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p62.png">
<span class="first-txt">Redmi路由器 AX6</span>
<span class="second-txt">399元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p63.png">
<span class="first-txt">小米路由器AX9000</span>
<span class="second-txt">999元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p64.png">
<span class="first-txt">小米路由器 AX1800</span>
<span class="second-txt">399元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p65.png">
<span class="first-txt">小米AIoT路由器AX3600</span>
<span class="second-txt">499元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p66.png">
<span class="first-txt">小米AIoT路由器AX3600</span>
<span class="second-txt">169元</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">智能硬件</a>
<div class="item">
<ul>
<li>
<a href="#">
<img src="./img/p71.png">
<span class="first-txt">小米全自动智能门锁</span>
<span class="second-txt">1699元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p72.png">
<span class="first-txt">Redmi小爱触屏音箱Pro8</span>
<span class="second-txt">499元起</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p73.jpg">
<span class="first-txt">小米小爱触屏音箱</span>
<span class="second-txt">219元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p74.png">
<span class="first-txt">Redmi小爱音箱 Play</span>
<span class="second-txt">89元</span>
</a>
</li>
<li><span class="line"></span></li>
<li>
<a href="#">
<img src="./img/p75.png">
<span class="first-txt">查看全部</span>
<span class="second-txt">智能硬件</span>
</a>
</li>
</ul>
</div>
</li>
<li class="become-color"><a href="#">服务</a></li>
<li class="become-color"><a href="#">社区</a></li>
</ul>
<div class="search">
<form action="#">
<input type="search">
<button>
<a href="#"><i class="fas fa-search"></i></a>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最终结果：
小结：
对于兄弟元素，要使用分组选择器。
搜索框默认有轮廓线，在设置边框时要去掉轮廓线。
2060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
