目录：
- 目标
- 小技巧
- 实现
- 最终代码
一、目标：我们要做一个手机版本的淘宝网，蓝色框住的按钮这部分。
二、 小技巧：如何在网页上看手机版本的页面
- 首先在网页上打开淘宝网，然后按F12，进入调试状态；（mac电脑要按出F12 - 长按fn - bar条上就自动显示F1 - F12 - 然后在点击）
- 点击这个类似pad按钮，就可以切换成手机版本 -》 然后切换下成手机如iphone12 pro或者其他 -》 然后再点击顶部的刷新按钮 -》 接下来页面就会变成手机版的页面。 -》 观察你要做的页面；
三、实现
1.准备工作 - 搭骨架
先后顺序分别是：
- 最外层容器nav；
- 两行nav-inner;
- 每行里面的按钮item;
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 设置外层容器 */
/* 因为两行div本身就是垂直排列，所以不用把nav设置成弹性容器，所以不用管nav */
.nav{
/* 外层容器和屏幕是一样宽的，当然不写也一样 */
width: 100%;
}
/* 设置每一行的容器 */
/* nav-inner 里面的div元素因为需要横向排列，直接把他设置为弹性容器 */
.nav-inner{
display: flex;
}
</style>
</head>
<body>
<!-- 创建一个最外层容器 -->
<nav class="nav">
<!-- 第一行行按钮 -->
<div class="nav-inner">
<!-- 单个按钮 -->
<div class="item">
<a href="#">
<img src="img/16/1.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/2.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/3.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/4.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/5.png">
</a>
</div>
</div>
<!-- 第二行行按钮 -->
<div class="nav-inner">
<!-- 单个按钮 -->
<div class="item">
<a href="#">
<img src="img/16/6.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/7.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/8.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/9.png">
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/10.png">
</a>
</div>
</div>
</nav>
</body>
</html>
2.优化
缺陷：我们发现即使在外层容器nav,设置了width:100%,右侧依然也有空白。
-这是因为我们设置了nav-inner 为弹性容器后，默认是没有弹性增长系数。 flex-grow 和flex可以去设置。
解决代码：
/* 设置弹性元素 - 按钮 */
.item{
background-color: #bfa;
/* 设置了这个后，里面元素会随着视口的宽度改变而自动改变，撑满 */
flex:auto;
}
3.优化item图片样式
缺陷：目前我们的item图片图标，过大，而且随视口大小的变化，也很大。item与item之间没有间隙。
- 这是因为我们设置了flex:auto; 会弹性增长来占空白区域，item对应被拉大。
解决代码：（步骤是按照1,2,3,4来操作的）
/* 设置每一行的容器 */
.nav-inner{
/* 设置为弹性容器 */
display: flex;
/* 4. 设置主轴上的空白分布 */
justify-content: space-around;
}
/* 设置弹性元素 - 按钮 */
.item{
background-color: #bfa;
/*3. 一定要注释这句 */
/* flex:auto; */
/*2. 固定下item的宽度比例，让用户拖动改变视口时，图标大小都差不多符合视觉
*/
/*这个值越小，item与item之间间隙空间越大
*/
width:18%;
}
/* 防止图片撑大 */
.item img{
/* 1. 设置图片的宽度和父元素的宽度一样，所以设置width:100% */
width:100%;
}
- item把背景颜色也去掉，最终的代码效果：
.nav-inner{
display: flex;
justify-content: space-around;
}
.item{
width:18%;
}
.item img{
width:100%;
}
4. 图标下的添加文字span
<body>
<!-- 创建一个最外层容器 -->
<nav class="nav">
<!-- 第一行行按钮 -->
<div class="nav-inner">
<!-- 单个按钮 -->
<div class="item">
<a href="#">
<img src="img/16/1.png">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/2.png">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/3.png">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/4.png">
<span>外卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/5.png">
<span>天猫超市</span>
</a>
</div>
</div>
<!-- 第二行行按钮 -->
<div class="nav-inner">
<!-- 单个按钮 -->
<div class="item">
<a href="#">
<img src="img/16/6.png">
<span>充值中心</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/7.png">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/8.png">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/9.png">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/10.png">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
5.调整字的样式 - 至此结束
- 文字样式
/* 设置a里面span文字的样式 */
.item a{
color:#333;
font-size: 16px;
text-decoration: none;
}
- 设置span文字的居中效果。
.item{
width:18%;
/* span文字的居中要在item这个父类设置，否则无效 */
text-align: center;
}
四、最终代码
总结：
- 通过设置弹性容器display:flex ，可以做到用户拖动改变视口，里面的图标大小自适应。
- 对于弹性容器出现的空白，我们通过设置item宽度width:18%; 和 分配nav-inner 里面的空白主轴左右环绕 justify-content: space-around; 将多的空白，作为我们item与item之间的间隙。
- 这样做的好处，可以控制item的大小不过于大，同时自适应。
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 100%;
}
.nav-inner{
display: flex;
justify-content: space-around;
}
.item{
width:18%;
text-align: center;
}
.item img{
width:100%;
}
.item a{
color:#333;
font-size: 16px;
text-decoration: none;
}
</style>
<body>
<!-- 创建一个最外层容器 -->
<nav class="nav">
<!-- 第一行行按钮 -->
<div class="nav-inner">
<!-- 单个按钮 -->
<div class="item">
<a href="#">
<img src="img/16/1.png">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/2.png">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/3.png">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/4.png">
<span>外卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/5.png">
<span>天猫超市</span>
</a>
</div>
</div>
<!-- 第二行行按钮 -->
<div class="nav-inner">
<!-- 单个按钮 -->
<div class="item">
<a href="#">
<img src="img/16/6.png">
<span>充值中心</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/7.png">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/8.png">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/9.png">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/10.png">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
![[疑难杂症2023-005]dcmtk-movescu访问dcm4chee模拟PACS Server报错问题解析](https://img-blog.csdnimg.cn/80a252beb3fe41f18e470d687531ff3a.png)
