仿写小米网站首页中间部分

说明：

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;

未解决部分：
轮播图中的图片切换。