说明：
1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客 《仿写小米官网 简单的HTML+CSS练习》
目标：仿写小米官网的中间部分：
初步HTML元素分析：
观察可知，整体部分为一个整个的块，使用一个div元素。中间有一个表示内容区的块存放要显示的内容。
内容区分为两部分（左侧导航栏和底部图片）。左侧导航栏是垂直布局，用ul元素实现，且其中的每一项
都是一个链接，所以每个li中都是一个链接。除此之外，每个li后面都有一个弹出框。底部图片部分是一
个轮播图，本文没有实现，但是本文将图片放在了位置上，并且做出了右下角导航点的效果。
整体框架如下：
<div class="all">
<div class="middle">
<div class="middle-left-bar">
<ul>
<li>
<div class="bar-div">
<a href="#">
<span>手机 电话卡</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<!-- 弹出框部分-->
<div class="bar-item four-column">
</div>
</li>
</ul>
</div>
<!-- 轮播图部分-->
<div class="slidshow">
<img src="" id="img1">
<img src="" id="img2">
<img src="" id="img3">
<img src="" id="img4">
<img src="" id="img5">
<!-- 轮播图中的导航点部分-->
<div>
<a href="#" class="img-button" id="button1"></a>
<a href="#" class="img-button" id="button2"></a>
<a href="#" class="img-button" id="button3"></a>
<a href="#" class="img-button" id="button4"></a>
<a href="#" class="img-button" id="button5"></a>
</div>
</div>
</div>
CSS样式分析：
1.对于整个的块div，宽度为整个页面宽度，需设定高度。上部需要设置边框。
2.对于内容区，高度为父元素高度，需设置一定宽度，用 margin：0 auto；使其水平居中。
3.对于内容区中左部导航栏。li中的链接要设置鼠标移入样式。为每个 li 设置一个弹出框，所以要添加弹出框元素和样式。
4.在弹出框中有一个图片下面的文字设置了省略号隐藏效果，要单独设置。
代码实现：
<!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;
}
/* 中间部分 */
.middle{
width: 1226px;
height: 460px;
margin: 0 auto;
position: relative;
}
/* 中间部分 左侧导航栏 */
.middle .middle-left-bar{
width: 234px;
height: 460px;
position:absolute;
z-index: 899;
background-color: rgba(105,101,101,.6);
}
.middle-left-bar ul{
width: 100%;
height: 100%;
padding: 20px 0;
position: relative;
}
.middle-left-bar ul li{
/* position: relative; */
width: 234px;
height: 42px;
line-height: 42px;
}
/* 中间部分 左侧导航栏弹出框设置 */
.middle-left-bar ul li .bar-div{
padding-left: 30px;
}
.middle-left-bar ul li .bar-div a{
text-decoration: none;
font-size: 14px;
color: #fff;
}
.middle-left-bar ul li .bar-div a i{
position: absolute;
right: 20px;
padding-top: 14px;
}
.middle-left-bar ul li:hover .bar-div{
background-color: #FF6A00;
}
.middle-left-bar ul li .bar-item{
display: none;
position: absolute;
left: 234px;
top: 0;
background-color: white;
border: 1px solid #e0e0e0;
border-left: none;
box-shadow: 0px 8px 16px rgb(0 0 0 / 18%);
z-index: 800;
}
.four-column{
width: 992px;
height: 458px;
}
.three-column{
width: 795px;
height: 458px;
}
.two-column{
width: 530px;
height: 458px;
}
.middle-left-bar ul li:hover .bar-item{
display: block;
}
.bar-item ul{
width: 248px;
height: 458px;
float: left;
margin: 0 auto;
padding: 2px 0;
}
.bar-item ul li{
width: 100%;
height: 76px;
/* line-height: 76px; */
}
.bar-item ul a{
display: inline-block;
text-decoration: none;
width: 100%;
height: 40px;
line-height: 40px;
color: #333;
padding: 18px 20px;
}
.bar-item ul a:hover{
color: #FF6A00;
}
.bar-item ul a img{
width: 40px;
height: 40px;
margin-right: 12px;
vertical-align: middle;
}
.bar-item ul a span{
font-size: 14px;
}
/* 设置用省略号隐藏文字效果 */
#hidden-font{
display: inline-block;
/* 设置宽度使溢出 */
width: 170px;
height: 100%;
/* 文字不换行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 溢出部分用省略号代替 */
text-overflow:ellipsis;
/* 使文字与图片的中线对齐 */
vertical-align: middle;
}
/* 中间部分 轮播图 */
.middle .slidshow{
width: 1226px;
height: 460px;
}
.slidshow img{
width: 1226px;
height: 460px;
position: absolute;
}
.slidshow div{
width: 400px;
height: 20.8px;
position: absolute;
z-index: 898;
right: 20px;
bottom: 20px;
}
.slidshow .img-button{
display: block;
float: right;
width: 6px;
height: 6px;
margin:0 4px;
border-radius: 10px;
border: 2px solid hsla(0,0%,100%,.3);
background-color: rgba(0,0,0,.4);
}
.slidshow .img-button:hover{
background-color: hsla(0,0%,100%,.4);
border-color: rgba(0,0,0,.4);
}
#img1{
z-index: 750;
}
</style>
</head>
<body>
<div class="all">
<div class="middle">
<div class="middle-left-bar">
<ul>
<li>
<div class="bar-div">
<a href="#">
<span>手机 电话卡</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item four-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-11.png">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-12.png">
<span>小米11 Ultra</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-13.png">
<span>小米11 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-14.png">
<span>小米11 青春</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-15.png">
<span>小米10S</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-16.png">
<span>小米11</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-21.png">
<span>小米10</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-22.png">
<span>黑鲨4 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-23.png">
<span>黑鲨4</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-24.png">
<span>Redmi K30S 至尊纪念版</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-25.jpg">
<span>小米云服务</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-26.jpg">
<span>Redmi K30 至尊纪念版</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-31.png">
<span>K40 游戏增强版</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-32.png">
<span>K40 Pro 系列</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-33.png">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-34.png">
<span>Redmi 10X 5G</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-35.png">
<span>Redmi Note 9 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-36.png">
<span>Redmi Note 9 5G</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-41.png">
<span>Redmi Note 9 4G</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-42.png">
<span>Redmi Note 8 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-43.png">
<span>手机上门维修</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-44.png">
<span>Redmi 9</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-45.jpg">
<span>Redmi 9A</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item1/1-46.png">
<span>Redmi 8A</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>电视 盒子</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item four-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-11.png">
<span id="hidden-font">Redmi MAX 86″ 超大屏电视</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-12.png">
<span>小米透明电视</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-13.png">
<span>小米电视5 Pro 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-14.png">
<span>小米电视5 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-15.png">
<span>Redmi 智能电视 A系列</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-16.png">
<span>量子点电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-21.png">
<span>Redmi 智能电视 X系列</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-22.png">
<span>小米电视大师 82英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-23.png">
<span>小米电视5 Pro 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-24.png">
<span>小米电视5 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-25.png">
<span>小米全面屏电视E34K</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-26.png">
<span>金属全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-31.jpg">
<span>小米盒子</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-32.png">
<span>大师电视 65英寸 OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-33.png">
<span>小米电视5 Pro 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-34.png">
<span>小米电视4A 60英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-35.png">
<span>Redmi 智能电视 X55</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-36.jpg">
<span>小米全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-41.png">
<span>电视音箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-42.jpg">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-43.png">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-44.png">
<span>小米电视4A 70英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-45.png">
<span>小米电视4S 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item2/2-46.jpg">
<span>小米壁画电视</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>笔记本 显示器</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item two-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-11.png">
<span>小米笔记本Pro 15</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-12.jpg">
<span>小米笔记本Pro 14</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-13.png">
<span>RedmiBook Pro 14</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-14.png">
<span>RedmiBook Pro 15</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-15.png">
<span>Redmi G 游戏本</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-16.png">
<span>RedmiBook Air 13</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-21.png">
<span>RedmiBook 16</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-22.jpg">
<span>RedmiBook 13</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-23.png">
<span>小米显示器27英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-24.png">
<span>Redmi显示器23.8英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-25.png">
<span>键鼠套装</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item3/3-26.png">
<span>鼠标</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>家电 插线板</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item four-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-11.jpg">
<span>冰箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-12.png">
<span>立式空调</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-13.png">
<span>壁挂空调</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-14.png">
<span>滚筒洗衣机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-15.jpg">
<span>Redmi全自动波轮洗衣机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-16.jpg">
<span>净水器</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-21.jpg">
<span>微波炉</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-22.jpg">
<span>电烤箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-23.jpg">
<span>扫地机器人</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-24.jpg">
<span>吸尘器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-25.jpg">
<span>空气净化器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-26.jpg">
<span>电饭煲</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-31.jpg">
<span>电磁炉</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-32.jpg">
<span>电水壶</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-33.jpg">
<span>滤水壶</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-34.png">
<span>落地风扇</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-35.png">
<span>投影仪</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-36.jpg">
<span>灯具</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-41.jpg">
<span>插线板</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-42.jpg">
<span>新风机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-43.jpg">
<span>电暖器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-44.jpg">
<span>电压力锅</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item4/4-45.jpg">
<span>料理机</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>出行 穿戴</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item three-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-11.png">
<span>小米手环6 NFC版</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-12.png">
<span>小米手环6 标准版</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-13.png">
<span>Redmi 手表</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-14.png">
<span>小米手环5NFC</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-15.png">
<span>小米手环5</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-16.png">
<span>小米手表</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-21.jpg">
<span>平衡车</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-22.jpg">
<span>滑板车</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-23.png">
<span>自行车</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-24.jpg">
<span>车载充电器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-25.jpg">
<span>智能后视镜</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-26.jpg">
<span>智能记录仪</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-31.jpg">
<span>无线车充</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-32.jpg">
<span>充气宝</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item5/5-33.jpg">
<span>石英表</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>智能 路由器</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item three-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-11.jpg">
<span>打印机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-12.png">
<span>喷墨打印机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-13.png">
<span>喷墨打印机墨水</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-14.png">
<span>小米路由器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-15.jpg">
<span>智能家庭</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-16.jpg">
<span>对讲机</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-21.jpg">
<span>摄像机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-22.jpg">
<span>照相机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-23.jpg">
<span>智能门锁</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-24.jpg">
<span>视频门铃</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-25.png">
<span>小爱老师</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-26.png">
<span>Redmi路由器</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-31.jpg">
<span>小爱音箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-32.png">
<span>云服务空间年卡</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item6/6-33.png">
<span>云服务空间月卡</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>电源 配件</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item two-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-11.png">
<span>移动电源</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-12.jpg">
<span>数据线</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-13.jpg">
<span>车充</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-14.png">
<span>充电器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-15.jpg">
<span>电池</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-16.jpg">
<span>自拍杆</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-21.jpg">
<span>手机壳</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-22.jpg">
<span>手机贴膜</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-23.png">
<span>无线充电器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-24.jpg">
<span>平板配件</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-25.jpg">
<span>黑鲨配件</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item7/7-26.jpg">
<span>其他配件</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>健康 儿童</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item three-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-11.jpg">
<span>洗手机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-12.jpg">
<span>剃须刀</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-13.jpg">
<span>修剪器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-14.jpg">
<span>牙刷</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-15.jpg">
<span>吹风机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-16.png">
<span>体重秤</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-21.jpg">
<span>体脂称</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-22.jpg">
<span>早教启智</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-23.png">
<span>益智积木</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-24.jpg">
<span>儿童手表</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-25.jpg">
<span>儿童滑板车</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-26.jpg">
<span>婴儿推车</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-31.jpg">
<span>走步机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item8/8-32.png">
<span>智能遥控车</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>耳机 音箱</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item three-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-11.png">
<span>Redmi AirDots 3</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-12.png">
<span>小爱音箱 Art 电池板</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-13.png">
<span>小爱触屏音箱Pro 8</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-14.png">
<span>Redmi小爱触屏音箱8</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-15.png">
<span>小爱音箱 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-16.png">
<span>小米小爱音箱</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-21.jpg">
<span>小米小爱触屏音箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-22.png">
<span>Redmi音箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-23.jpg">
<span>小米小爱音箱 Play</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-24.jpg">
<span>线控耳机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-25.png">
<span>蓝牙耳机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-26.jpg">
<span>头戴耳机</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-31.jpg">
<span>品牌耳机</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-32.png">
<span>蓝牙音箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-33.jpg">
<span>小米AI音箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-34.jpg">
<span>小米小爱音箱HD</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item9/9-35.jpg">
<span>k歌耳机</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<div class="bar-div">
<a href="#">
<span>生活 箱包</span>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<div class="bar-item three-column">
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-11.jpg">
<span>小背包</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-12.jpg">
<span>双肩包</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-13.jpg">
<span>胸包</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-14.jpg">
<span>旅行箱</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-15.jpg">
<span>运动鞋</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-16.jpg">
<span>眼镜</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-21.jpg">
<span>床垫</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-22.png">
<span>枕头</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-23.jpg">
<span>螺丝刀</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-24.jpg">
<span>保温杯</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-25.jpg">
<span>驱蚊器</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-26.jpg">
<span>毛巾/浴巾</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-31.png">
<span>米兔</span>
</a>
</li>
<li>
<a href="#">
<img src="./img/middle-img/bar-item10/10-32.jpg">
<span>笔</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="slidshow">
<img src="./img/middle-img/slidshow/1.jpeg" id="img1">
<img src="./img/middle-img/slidshow/2.jpg" id="img2">
<img src="./img/middle-img/slidshow/3.jpg" id="img3">
<img src="./img/middle-img/slidshow/4.jpeg" id="img4">
<img src="./img/middle-img/slidshow/5.jpg" id="img5">
<div>
<a href="#" class="img-button" id="button1"></a>
<a href="#" class="img-button" id="button2"></a>
<a href="#" class="img-button" id="button3"></a>
<a href="#" class="img-button" id="button4"></a>
<a href="#" class="img-button" id="button5"></a>
</div>
</div>
</div>
</div>
</body>
</html>
最终结果：
小结：
设置用省略号隐藏文字效果:
/* 设置为块元素方便设置宽和高 */
display: inline-block;
/* 设置宽度使溢出 */
width: 170px;
height: 100%;
/* 文字不换行 */
white-space: nowrap;
/* 溢出部分隐藏 */
overflow: hidden;
/* 溢出部分用省略号代替 */
text-overflow:ellipsis;
/* 使文字与图片的中线对齐 */
vertical-align: middle;
未解决部分：
轮播图中的图片切换。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
