这是我参与【第五届青训营】伴学笔记创作活动的第十天

实战练习

1. 京东图片列表

开发准备

本来我们是想直接右键图片另存为的，但是发现并没有该选项，应该是京东对图片做了一定的限制

不过，这不妨碍我们获取这些图片，当然你也可以采用截图的方式获取，这里我们采用另外一种方式

通过 F12 可以看到，img元素的src属性，我们将三张图片的这些地址 copy 出来，直接在地址栏进行访问

//img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg.webp
//img12.360buyimg.com/babel/s380x300_jfs/t1/152314/13/19839/57522/603e118dE941f0ce9/fdff58457adbef3e.jpg.webp
//img10.360buyimg.com/babel/s380x300_jfs/t1/154848/7/7426/82296/5fc072eeE20809200/34dca267e049d035.jpg.webp

这里就可以进行图片另存为了，当然你也可以直接在src上填写这些地址

不过，细心的同学会发现，这张图片的格式是jpg.webp后缀结尾的

因为我是在谷歌浏览器中访问的，而谷歌浏览器有自己的特有的一种图片格式 webp（这个我们在第三节-字符实体与语义标签中介绍过）

当然这个格式不是谷歌自己进行转换的，而应该是京东做了不同浏览器之间的适配，即不同的浏览器传递不同格式的图片

Q：怎么验证这种说法呢？

A：我们可以打开非 Chrome 内核的浏览器，使用 F12 查看img的src地址就会发现不一样的地方了

这里我用微软自带的 IE 浏览器（温馨提示：微软官宣定于 2022 年 6 月 15 日完全停止对 IE 的支持）

对比就可以发现，无非就是在 Chrome 浏览器里后缀名多了一个.webp而已

<!-- IE中的src地址 -->
//img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg
<!-- Chrome中的src地址 -->
//img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg.webp

知道这个原理，我们除了可以直接在图片另存为保存为jpg格式，其实还可以直接修改 url 地址

最后，我们将下载的图片放入assets（自定义目录）工程目录下即可

布局剖析

我们使用 F12 进行调试，可以看到京东图片列表的具体元素及属性

整体使用一个li元素包裹，里面又套了一层 div`元素，宽高比：190:470
每张图片使用一个img元素，同时分别用a元素包裹，宽高比：190:150
三张图片高度和为 1503=450 < 470，注意到图片之间存在 210px 的外边距

这样，整个京东的图片列表的整体布局就非常清晰了

525344c2d5628535e09f7f7087ef76c6a7ef6363

但是，我们不会那么去实现代码。因为li元素应该包裹在ul元素或者ol元素中，而这里并没有遵循 css 中的语义标签使用规范

我们先看一下这么写会有什么问题

<link rel="stylesheet" href="assets/reset.css" />
<!-- ul包裹li -->
<ul>
  <li>ul li</li>
  <li>ul li</li>
  <li>ul li</li>
</ul>
<!-- div包裹li -->
<div>
  <li>div li</li>
  <li>div li</li>
  <li>div li</li>
</div>

效果

由于使用了 reset 样式，浏览器的默认样式被我们去除了。但是使用ul包裹的li元素和使用div包裹的li元素存在明显的区别：

使用ul包裹的li元素是没有默认样式的
使用div包裹的li元素前仍然存在黑点

我想是因为京东在这里实现了自己的样式替换，所以为了避免重复 reset 默认样式，我们采用正常的列表标签

结构搭建

<ul>
  <li>
    <a href="javascript:;"><img src="assets/1.jpg" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="assets/2.jpg" /></a>
  </li>
  <li>
    <a href="javascript:;"><img src="assets/3.jpg" /></a>
  </li>
</ul>

到这里我们基本骨架已经有了，不过因为没有写 css 样式，图片几乎占据了整个浏览器页面

样式添加

方式 1

还记得上面分析对布局结构的分析吗？

我们首先调整整体的宽高比和单个图片的宽高比

ul {
  width: 190px;
  height: 470px;
}

ul > li img {
  /* 
		这里其实只调整高度即可，因为我们下载的图片宽高比跟F12中调试的是一致的
		而且一般情况下，不会固定或修改图片在网页中显示的宽高比
		因为如果我们随意调整css中的宽高比，会导致图片变形 
    	这里任意只调整高度或宽度，图片可以保持原比例大小
    */
  /* width: 190px; */
  height: 150px;
}

当然这只是其中写法，我们还可以换个思路，退一步来思考

方式 2

我们呢不去限制图片的宽或高，而是对超出ul元素部分（溢出部分）进行隐藏

ul {
  width: 190px;
  height: 470px;
  overflow: hidden;
}

但是因为图片本身的大小还没有做限制，所以图片保持了原来的图片比例和大小

小剧场：

我们发现下载下来的图片分辨率大小为 380*300，宽和高都刚好是浏览器中图片宽高的 2 倍

这只是巧合么？

不！这是京东为了高分辨率设备而做的适配，保证在一些高清屏下也能够保持清晰

那我们再对图片添加固定的宽或高不就行了？

不！我们直接指定宽或高的话，overflow属性不就显得多此一举嘛

青训营笔记