05.实战练习

1. 京东图片列表
2. 京东左侧导航条
3. 网易新闻列表
- 结构搭建
- 样式添加

1. 京东图片列表

05.实战练习 - 图1

开发准备

//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 这是京东为了支持不同的浏览器进行的自动配置*/
<!-- 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进行调试，可以看到京东图片列表的具体元素及属性
05.实战练习 - 图2

05.实战练习 - 图3

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

这样，整个京东的图片列表的整体布局就非常清晰了
但是，我们不会那么去实现代码。因为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>

05.实战练习 - 图4
由于使用了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{
    /*
        这里任意只调整高度或宽度，图片可以保持原比例大小
    */
    /* width: 190px; */
    height: 150px;
}

方式2

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

05.实战练习 - 图5
但是因为图片本身的大小还没有做限制，所以图片保持了原来的图片比例和大小
那我们再对图片添加固定的宽或高不就行了？
不！我们直接指定宽或高的话，overflow属性不就显得多此一举嘛
我们给img元素设定一个100%的width属性

ul>li img {
    /* height: 150px; */
    width: 100%;
}

Q：为什么子元素不能用**auto**呢？
A：我们前一节-盒模型中讲过，水平布局必须要满足一个等式，不满足即存在过渡约束，会做自动调整
而ul元素是块元素，块元素什么特点？独占一行啊！
图片宽度为380px，浏览器宽度为1920px（我本机中最大化浏览器的宽度）
现在的等式为0 + 0 + 0 + 380px + 0 + 0 + 0 = 1920px
这七个值中没有auto的情况，所以浏览器会自动调整margin-right值以使等式满足
0 + 0 + 0 + 380px + 0 + 0 + (1920-380)px = 1920px
05.实战练习 - 图6
所以如果使用auto属性值，整个过程中图片的width不会发生变化，展现出来的效果就依然是裁剪的样式
Q：为什么**100%**可以呢？
A：我们知道100%是会按照父元素计算的，img的父元素是a，a的父元素是li，li的父元素是ul
也就是说，由于我们没有给a和li单独设置样式，因此img最终会根据ul的宽度计算
而如果只调整图片的宽或高，图片是会保持原比例进行缩放的
所以这个时候就相当于给img设置了一个width=190px的属性值

细节完善

背景色

通过颜色拾取器，识别背景色（我这里使用的是FastStone Capture中自带的Screen Color Picker）

ul{
    ...
    /* 添加背景色 */
    background-color: #F4F4F4;
}

外边距

ul>li:not(:last-child){
    margin-bottom: 10px;
}

Q：为什么是给**li**元素添加呢？
A：我们在调整布局结构的时候，特别是设置外边距，一般是设置块元素的，而不建议去调整行内元素或行内块元素

最终效果

05.实战练习 - 图7

核心代码

<link rel="stylesheet" href="css/reset.css">
<style>
    ul {
        /* 宽高 */
        width: 190px;
        height: 470px;
        /* 处理溢出部分，这块不写效果也是一样的 */
        overflow: hidden;
        /* 设置背景色 */
        background-color: #F4F4F4;
    }
    ul>li:not(:last-child) {
        /* 设置下外边距 */
        margin-bottom: 10px;
    }
    ul>li img {
        /* 设定图片宽度 */
        width: 100%;
    }
</style>
<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>

2. 京东左侧导航条

开发准备

家用电器
手机 / 运营商 / 数码
电脑 / 办公
家居 / 家具 / 家装 / 厨具
男装 / 女装 / 童装 / 内衣
美妆 / 个护清洁 / 宠物
女鞋 / 箱包 / 钟表 / 珠宝
男鞋 / 运动 / 户外
房产 / 汽车 / 汽车用品
母婴 / 玩具乐器
食品 / 食品 / 生鲜 / 特产
艺术 / 礼品鲜花 / 农资绿植
医药保健 / 计生情趣
图书 / 文娱 / 教育 / 电子书
机票 / 酒店 / 旅游 / 生活
理财 / 众筹 / 白条 / 保险
安装 / 维修 / 清洗 / 二手
工业品

布局剖析

05.实战练习 - 图8

整体使用ul和li元素，宽高比=190px:470px，其中上下存在10px的内边距（影响盒子大小）和10px的外边距（影响盒子布局）

05.实战练习 - 图9

li中每个元素也比较简单，用a包裹文字，用span包裹斜杠
每个li元素的宽高比=190px:25px，其中左边存在18px的内边距（注意右边是不存在的）

05.实战练习 - 图10

a元素没有什么大的布局，span元素左右存在2px的内边距

结构搭建

<link rel="stylesheet" href="css/reset.css">
<!--可以使用nav(div) div(div) ul(li)-->
<ul>
    <li>
        <a href="javascript:;">家用电器</a>
    </li>
    <li>
        <a href="javascript:;">手机</a>
        <span>/</span>
        <a href="javascript:;">运营商</a>
        <span>/</span>
        <a href="javascript:;">数码</a>
    </li>
    <li>
        <a href="javascript:;">电脑</a>
        <span>/</span>
        <a href="javascript:;">办公</a>
    </li>
    <li>
        <a href="javascript:;">家居</a>
        <span>/</span>
        <a href="javascript:;">家具</a>
        <span>/</span>
        <a href="javascript:;">家装</a>
        <span>/</span>
        <a href="javascript:;">厨具</a>
    </li>
    <li>
        <a href="javascript:;">男装</a>
        <span>/</span>
        <a href="javascript:;">女装</a>
        <span>/</span>
        <a href="javascript:;">童装</a>
        <span>/</span>
        <a href="javascript:;">内衣</a>
    </li>
    <li>
        <a href="javascript:;">美妆</a>
        <span>/</span>
        <a href="javascript:;">个护清洁</a>
        <span>/</span>
        <a href="javascript:;">宠物</a>
    </li>
    <li>
        <a href="javascript:;">女鞋</a>
        <span>/</span>
        <a href="javascript:;">箱包</a>
        <span>/</span>
        <a href="javascript:;">钟表</a>
        <span>/</span>
        <a href="javascript:;">珠宝</a>
    </li>
    <li>
        <a href="javascript:;">男鞋</a>
        <span>/</span>
        <a href="javascript:;">运动</a>
        <span>/</span>
        <a href="javascript:;">户外</a>
    </li>
    <li>
        <a href="javascript:;">房产</a>
        <span>/</span>
        <a href="javascript:;">汽车</a>
        <span>/</span>
        <a href="javascript:;">汽车用品</a>
    </li>
    <li>
        <a href="javascript:;">母婴</a>
        <span>/</span>
        <a href="javascript:;">玩具乐器</a>
    </li>
    <li>
        <a href="javascript:;">食品</a>
        <span>/</span>
        <a href="javascript:;">酒类</a>
        <span>/</span>
        <a href="javascript:;">生鲜</a>
        <span>/</span>
        <a href="javascript:;">特产</a>
    </li>
    <li>
        <a href="javascript:;">艺术</a>
        <span>/</span>
        <a href="javascript:;">礼品鲜花</a>
        <span>/</span>
        <a href="javascript:;">农资绿植</a>
    </li>
    <li>
        <a href="javascript:;">医药保健</a>
        <span>/</span>
        <a href="javascript:;">计生情趣</a>
    </li>
    <li>
        <a href="javascript:;">图书</a>
        <span>/</span>
        <a href="javascript:;">文娱</a>
        <span>/</span>
        <a href="javascript:;">教育</a>
        <span>/</span>
        <a href="javascript:;">电子书</a>
    </li>
    <li>
        <a href="javascript:;">机票</a>
        <span>/</span>
        <a href="javascript:;">酒店</a>
        <span>/</span>
        <a href="javascript:;">旅游</a>
        <span>/</span>
        <a href="javascript:;">生活</a>
    </li>
    <li>
        <a href="javascript:;">理财</a>
        <span>/</span>
        <a href="javascript:;">众筹</a>
        <span>/</span>
        <a href="javascript:;">白条</a>
        <span>/</span>
        <a href="javascript:;">保险</a>
    </li>
    <li>
        <a href="javascript:;">安装</a>
        <span>/</span>
        <a href="javascript:;">维修</a>
        <span>/</span>
        <a href="javascript:;">清洗</a>
        <span>/</span>
        <a href="javascript:;">二手</a>
    </li>
    <li>
        <a href="javascript:;">工业品</a>
    </li>
</ul>

Q：那有些人会问了，我们不是引入了**reset.css**重置了浏览器的默认样式吗？为什么超链接还有样式？
A：其实，如果仔细看reset.css的源代码，会发现a元素只是重置了一些基本的内外边距、边框和字体大小，并没有做完全把a元素的样式去除。这个下面会具体介绍

样式添加

根据布局剖析，我们可以直接设置整体的样式

body{
    /* 这里顺便添加下背景色，通过颜色拾取器识别 */
    background-color: #F4F4F4;
}
ul {
    /* 宽高 */
    width: 190px;
    height: 450px;
    /* 内外边距 */
    padding: 10px 0;
    margin: 10px auto;
    /* 处理溢出部分 */
    overflow: hidden;
    /* 这里顺便添加下背景色，通过颜色拾取器识别 */
    background-color: #fefefe;
}
ul>li {
    /* 宽高，根据继承关系可以不写宽度 */
    height: 25px;
    /* 内外边距，这里只有一个内边距 */
    padding-left: 18px;
    /* 设置背景色：不是必须的，这里只是为了发现一些问题 */
    background-color: #bfa;
}
ul>li span{
    /* 内外边距*/
    padding: 0 2px;
}

细节完善

两个主要问题

要求效果文字居中显示，而我们的文字偏左上角，底部有一定间距
文字存在换行和重叠现象
文字调整
文字居中，只需要给li元素添加一行属性
```
/*要让一个文字在父元素中居中，只需将父元素的line-height 设置为一个和父元素height的值*/
line-height: 25px;
```
解决文字重叠现象，要知道文字有几个属性：

文字大小、颜色\样式

font-size: 14px;
color: #333;
text-decoratoion:none;//去掉下划线

符号调整

ul>li span {
  padding: 0 2px;
  /* 调整符号字体大小 */
  font-size: 12px;
}

悬浮样式

我们注意到，当鼠标悬浮在某一行时，其背景颜色会有变化；同时，悬浮在某一个超链接上时，字体颜色变红
这里要用到一个伪类选择器:hover，我们还是直接上代码

ul>li {
  height: 25px;
  padding-left: 18px;
  /* background-color: #bfa; 同时注释掉之前的一个辅助我们查看问题的背景色 */
  line-height: 25px;
}
/* 悬浮在某一行时，其背景颜色会有变化 */
ul>li:hover {
  background-color: #D9D9D9;
}
/* 悬浮在某一个超链接上时，字体颜色变红 */
ul>li a:hover {
  color: #C81724;
}

最终效果

05.实战练习 - 图11

核心代码

```html

<a name="dda10b38"></a>
### 存疑问题
因为在编写HTML代码时，每个`li`元素中的`a`的`span`标签都是换行的<br />而HTML中会将多个空格合并成一个，所以`a`的`span`之间都多了一个空格<br />有几种解决这个问题的方式
-  一是调整HTML中每个`li`元素中的代码，使之在一行上 
-  二是给ul元素或li元素设置一个`font-size: 0`的属性值 
-  三是通过js去除多余的换行字符（目前还没有学习到，所以不用这种方式，而且较麻烦） 
我这里采用第二种方式
```css
ul>li {
    height: 25px;
    padding-left: 18px;
    line-height: 25px;
    /* 设置font-size */
    font-size: 0;
}
ul>li span {
    /* 设置内边距 */
    padding: 0 2px;
    font-size: 12px;
}

3. 网易新闻列表

05.实战练习 - 图12
有了上面的实战步骤，对于网易新闻列表，我们就不进行那么详细的剖析了，直接上代码

结构搭建

<div class="news_money">
    <div class="news_title">
        <h2 class="title"><a href="#">财经</a></h2>
    </div>
    <div class="news_img">
        <a href="#">
            <img width="300" height="150" alt="楼市＂加息潮＂来了?" src="assets/news.png">
            <div class="bg">
                <h3>楼市"加息潮"来了?</h3>
            </div>
        </a>
    </div>
    <ul class="news_list">
        <li>
            <a href="#">太疯狂！1000万芯片投资 "换来"7个涨停</a>
        </li>
        <li>
            <a href="#">重磅定调！打击比特币挖矿和交易行为</a>
        </li>
        <li>
            <a href="#">拜登愿将基建规模砍去6000亿美元</a>
        </li>
        <li>
            <a href="#">呷哺呷哺高管大换血 经营模式要变？</a>
        </li>
    </ul>
</div>

05.实战练习 - 图13

样式添加

/* ====================整体==================== */
.news_money {
    /* 整体布局 */
    width: 300px;
    height: 324px;
    margin: 35px auto;
}
a {
    /* 去除超链接样式 */
    text-decoration: none;
}
/* ====================标题==================== */
.news_title {
    height: 40px;
    border-top: 1px #ddeedd solid;
}
.news_title .title {
    /* 标题整体布局 */
    width: 32px;
    height: 24px;
    line-height: 24px;
    padding-top: 6px;
    border-top: 1px #f34540 solid;
    margin-top: -1px;
}
.news_title a {
    /* 标题字体样式 */
    font-size: 16px;
    font-weight: bold;
    color: #404040;
}
.news_title a:hover {
    /* 标题悬浮样式 */
    color: red;
}
/* ====================图片==================== */
.new_img {
    height: 150px;
}
.news_img:hover {
    /* 
        图片悬浮样式
        这部分知识还没有学习到，所以只是做了一个简单的放大效果
        但现在的效果其实是不对的，标题文字也被放大了
    */
    transform: scale(2);
}
/* 图片标题 */
.news_img .img_title {
    /* 图片标题整体布局 */
    height: 40px;
    line-height: 40px;
    margin-top: -40px;
    padding-left: 30px;
}
.news_img a {
    /* 图片标题字体样式 */
    color: #fff;
    font-weight: bold;
}
/* ====================新闻列表==================== */
.news_list {
    height: 120px;
    margin-top: 12px;
}
.news_list li {
    /* 新闻列表整体布局 */
    width: 285px;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
}
.news_list a {
    /* 新闻列表字体样式 */
    font-size: 14px;
    color: #666;
}
.news_list a:hover {
    /* 新闻列表悬浮样式 */
    color: red;
}

//总结：在样式编写部分的分析：

先设置总体大盒子，（划分出一个个的部门）再去找一个个的小盒子嵌套的（从这也可以明白为什么写框架的时候，有些简洁的地方也嵌套了很多元素标签）
一般都可以从先布局（宽高、内外边框位置的设置）、** **后样式（大小、颜色、样式）去写
盒子设置：宽高、内外边框位置的设置
字体的设置：字体大小、样式、颜色、是否添加悬浮、超链接去样式（text-decoration）
图片的设置：整体盒子的长宽、图片是否悬浮、图片上布局和样式

// 新增：

图片样式的放大
图片上加字体
字体的加粗：font-weight: bold;
伪类元素选择器临时代替一些符号：
```
.list li::before{
      content:'。'
  }
```

1. 京东图片列表

开发准备

布局剖析

结构搭建

样式添加

方式1

方式2

细节完善

背景色

外边距

最终效果

核心代码

2. 京东左侧导航条

开发准备

布局剖析

结构搭建

样式添加

细节完善

文字调整

符号调整

悬浮样式

最终效果

核心代码

3. 网易新闻列表

结构搭建

样式添加