【CSS】CSS还不会？一文带你深入浅出！

本是古典何须时尚 2024-04-27 07:37 34阅读 0赞

#### 文章目录 ####

*  一、什么是CSS？
 *  二、CSS基本语法规范
 *  三、CSS的引入方式
 *  四、CSS选择器
 *   *  1. 标签选择器
     *  2. 类选择器
     *  3. 通配符选择器
     *  4. 后代选择器
     *  5. 伪类选择器
 *  五、常用元素属性
 *   *  1. 字体属性
     *  2. 文本属性
     *  3. 背景属性
 *  六、圆角矩形和元素显示模式
 *   *  1. 圆角矩形
     *  2. 元素显示模式
 *  七、盒模型
 *  八、chrome调试工具和弹性布局
 *   *  1. chrome调试工具
     *  2. 弹性布局
 *  九、实战案例
 *   *  1. 新闻页面实现
     *  2. 小广告
     *  3. 百度热榜实现

--------------------

## 一、什么是CSS？ ##

**CSS**指的是`层叠样式表 (Cascading Style Sheets)`。它能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

HTML用来决定页面的结构，CSS用来控制页面的展示效果。

--------------------

## 二、CSS基本语法规范 ##

选择器 + {
        一条/N条声明}

*  `选择器`决定针对谁修改 (找谁)
 *  `声明`决定修改啥 (干啥)
 *  `声明的属性`是键值对使用 ; 区分键值对, 使用 : 区分键和值

这里我们需要注意的是，CSS要写到style标签中，`style`标签一般放到`head`标签内部。下面我们举个例子看一下：

![在这里插入图片描述][79de47c3b1c44b1ba0619d41047e1bb1.png]

**注意：**

>  *  CSS 要写到 `style` 标签中(后面还会介绍其他写法)。
>  *  style 标签可以放到页面任意位置，一般放到 head 标签内。
>  *  CSS 使用 `/* */` 作为注释。 (使用 ctrl + / 快速切换)

--------------------

## 三、CSS的引入方式 ##

? **内部样式**

写在 style 标签中. 嵌入到 html 内部。理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中。这种写法在实际开发中并不常用。

![在这里插入图片描述][24d29de1638f4e20b38c49f7d687683d.png]

>  *  **`优点:`** 这样做能够让样式和页面结构分离。
>  *  **`缺点:`** 分离的还不够彻底，尤其是 css 内容多的时候

? **行内样式**

通过 `style` 属性，来指定某个标签的样式，只适合于写简单样式。只针对某个标签生效。

<p style="color: green;">hello world</p>
    <p>hello 程序人</p>
    <h1 style="color: blue; font-size: 80px;">你好</h1>

![在这里插入图片描述][1847ecc53306422481df0a343a169381.png]  
![在这里插入图片描述][c8383d3c07ff45ddaec4c1ab3a0712fb.png]

这里我们可以看到，第一个样式表中的`red`颜色被覆盖了

> **`缺点:`** 不能写太复杂的样式，这种写法优先级较高，会覆盖其他的样式

? **外部样式**

使用外部样式是实际开发中最常用的方式。它分为两步：

1.  创建一个 `css` 文件
2.  使用 `link` 标签引入 `css`

*  创建 style.css 文件

p {
        
       color: red; 
       font-size: 80px;
    }

*  使用`link`标签引入css

![在这里插入图片描述][96513b220433415b8959dfeca1fba9db.png]

--------------------

## 四、CSS选择器 ##

? **选择器的功能：** 选中页面中指定的标签元素，要先选中元素，才能设置元素的属性，就好比 SC2, War3 这样的游戏，需要先选中单位，再指挥该单位行动。

? **选择器的种类**

1.  **`基础选择器`：单个选择器构成**
    
     *  标签选择器
     *  类选择器
     *  id 选择器
     *  通配符选择器
2.  **`复合选择器`：把多种基础选择器综合运用起来**
    
     *  后代选择器
     *  子选择器
     *  并集选择器
     *  伪类选择器

--------------------

### 1. 标签选择器 ###

标签选择器能快速为同一类型的标签都选择出来，但是不能差异化选择

p {
        
       color: red; 
       font-size: 40px;
    }

![在这里插入图片描述][341baac7d8dc481d8a190c3d733b98a9.png]

--------------------

### 2. 类选择器 ###

通过类别名称选择具有特定类别的 HTML 元素。类选择器以`.` 开头，后面跟着类别名称。在HTML标签中可以使用`class`属性来设置类别名称。

如下代码，`.eat` 选择器将选择所有具有类别为 “`eat`” 的元素，`.sleep` 选择器将选择所有具有类别为 “`sleep`” 的元素，`.game` 选择器将选择所有具有类别为 “`game`” 的元素。

.eat {
        
        color: red;
    }
    
    .sleep {
        
        color: orange;
    }
    
    .game {
        
        color: blue;
    }

![在这里插入图片描述][746352086f5f46b484c45b8f33ee23bc.png]

![在这里插入图片描述][cedfb35b0981462f97832e24d14e8f3b.png]

除此之外，一个标签使用多个类名，在设置时不同的类名中间用空格分隔开，这样做可以把相同的属性提取出来, 达到简化代码的效果。

![在这里插入图片描述][e2701b61936c4f8f92f696614d388ee2.png]

--------------------

### 3. 通配符选择器 ###

使用 `*` 的定义, 选取所有的标签。

举例说明一下，写入以下代码后，整个页面的背景都会被设置成一种颜色

* {
        
        background-color: burlywood;
    }

![在这里插入图片描述][98dfc4fae18348009c55dce3839fd52e.png]

通配符选择器在实际应用开发过程中用来针对页面中所有的元素默认样式进行消除，主要用来`消除边距`。

![在这里插入图片描述][caacbda171c84fbebedef0d9924e56f6.png]

--------------------

### 4. 后代选择器 ###

又叫包含选择器. 选择某个父元素中的某个子元素

元素1 元素2 {
        样式声明}

*  元素 1 和 元素 2 要使用空格分割
 *  元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

**代码示例:** 把 `ol` 中的 `li` 修改颜色，不影响 `ul`中`li`的颜色

![在这里插入图片描述][c1487c5d015f41ce814d2d1302e2de8a.png]  
![在这里插入图片描述][e09f1a12cee6440b90af860c1d603626.png]

**代码示例:** `元素2` 不一定非是儿子, 也可以是孙子

![在这里插入图片描述][dd2ab74ce510472ca8c08c6a9f04a4f0.png]

**代码示例:** 可以是`任意基础选择器的组合`。 (包括类选择器, id 选择器)

![在这里插入图片描述][fdcb0338342743a1a7ef9c09c4c6ac44.png]

--------------------

### 5. 伪类选择器 ###

这里我们重点讲解一下`链接伪类选择器`。那么伪类选择器主要用来实现一种什么样的效果呢？

![在这里插入图片描述][a48f58158f3f42e3b2aca30ab763ac40.png]

>  *  `a:link` 选择未被访问过的链接
>  *  `a:visited` 选择已经被访问过的链接
>  *  `a:hover` 选择鼠标指针悬停上的链接
>  *  `a:active` 选择活动链接(鼠标按下了但是未弹起)

![在这里插入图片描述][7a9905769c3744b683351acfd3210de7.png]  
![在这里插入图片描述][c501713198e94378b2a182e43a9bfa86.png]

示例二：同样对于`input`按钮标签也同样适用

![在这里插入图片描述][e37058061d0448f9860ce3e7299064d4.png]

--------------------

## 五、常用元素属性 ##

### 1. 字体属性 ###

? **字体设置**

*  `font-family : '所要设的字体';`——字体类型设置
 *  `font-size: 字体大小;`——字体大小设置

>  *  字体名称可以用中文, 但是不建议。
>  *  多个字体之间使用逗号分隔。(从左到右查找字体, 如果都找不到, 会使用默认字体)
>  *  如果字体名有空格, 使用引号包裹。
>  *  建议使用常见字体, 否则兼容性不好。

![在这里插入图片描述][09af22103170432c9930c603de49f3dc.png]

? **字体颜色**

字体颜色的三种设置方法：`预定义的颜色值(直接是单词)`\[最常用\]、`十六进制形式`和`RGB` 方式

*  `color: red;`
 *  `color: #ff0000;`
 *  `color: rgb(255, 0, 0);`  
    ![在这里插入图片描述][a9722598a3fa4427a63a4bb2904928fe.png]

![在这里插入图片描述][92eeadce0cae49fa838bbf20385e7ee9.png]

? **字体粗细**

`font-weight: 数值;`

![在这里插入图片描述][69dc5d16ceb64867b21c6d682b781ca1.png]

![在这里插入图片描述][61b63e82c6bc4b8e8208e44ce68c2b3c.png]

? **字体样式**

`font-style: 样式;`

![在这里插入图片描述][9939831473af4ffdaad839a6a7749f46.png]

![在这里插入图片描述][b3d8c74978ed4b219607c66a789b473a.png]

--------------------

### 2. 文本属性 ###

? **对齐方式**

`text-align: 选项;`

文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右，两端对齐，当`text-align`设置为"`justify`"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

*  `center`: 居中对齐
 *  `left`: 左对齐
 *  `right`: 右对齐

![在这里插入图片描述][82b37f7caa084f2f85e47892329bd99d.png]  
![在这里插入图片描述][fa81efff2af348ed9ed05dc12e1ea74e.png]

? **文本修饰**

`text-decoration: [值];`

常用取值：

*  `underline` 下划线. \[常用\]
 *  `none` 啥都没有. 可以给 a 标签去掉下划线.
 *  `overline`上划线. \[不常用\]
 *  `line-through` 删除线 \[不常用\]

![在这里插入图片描述][3d3454652d06477c959f5363577b2839.png]

? **文本缩进**

控制段落的 首行 缩进 (其他行不影响)

`text-indent: [值];`

注意：

*  单位可以使用 `px` 或者 `em`。
 *  使用 `em` 作为单位更好，1 个 `em` 就是当前元素的文字大小。
 *  缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

![在这里插入图片描述][7f2aa06a579d4150a3ca1793ed1371b3.png]

? **行高**

行高指的是上下文本行之间的基线距离

`line-height: [值];`

![在这里插入图片描述][2f8cbb7c6ec7497eae06b9e4136b8f56.png]

![在这里插入图片描述][833d64ba8dc6482a931a53fac4cd06e1.png]

--------------------

### 3. 背景属性 ###

? **背景颜色**

`background-color: [指定颜色]`

![在这里插入图片描述][98f4377b17474965b22e53ec0724b55d.png]

? **背景图片**

`background-image: url(图片地址);` 比 image 更方便控制位置(图片在盒子中的位置)；背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方

**注意:**

> 1.  url 不要遗漏.
> 2.  url 可以是绝对路径, 也可以是相对路径
> 3.  url 上可以加引号, 也可以不加

![在这里插入图片描述][97e4e48b32a94ac2a359d83412d8be96.png]

我们发现图片展示不全，需要设置一下div背景的宽和高。

![在这里插入图片描述][3997e5b67ec74f409e7a58551c4ee50f.png]

? **背景平铺**

`background-repeat: [平铺方式]`

重要取值:

> 1.  repeat: 平铺
> 2.  no-repeat: 不平铺
> 3.  repeat-x: 水平平铺
> 4.  repeat-y: 垂直平铺

![在这里插入图片描述][7491bb638e1a4f9e8ecd5e2c6ec7a259.png]

? **背景位置**

`background-position: x y;`

参数有三种风格:

> 1.  方位名词: (top, left, right, bottom)
> 2.  精确单位: 坐标或者百分比(以左上角为原点)
> 3.  混合单位: 同时包含方位名词和精确单位

![在这里插入图片描述][3245c421ac41444fb4dfdcb96b0d984c.png]

? **背景尺寸**

`background-size`指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小，你指定的大小是相对于父元素的宽度和高度的百分比的大小。

![在这里插入图片描述][4fe21f9c5d8d4e438c3a571ac4a88eb1.png]

--------------------

## 六、圆角矩形和元素显示模式 ##

### 1. 圆角矩形 ###

`border` 是边框属性的简写属性。我们可以通过 `border-radius` 使边框带圆角效果。

? **基本用法**

`border-radius: length;`length 是内切圆的半径. 数值越大, 弧线越强烈。

![在这里插入图片描述][12531ae16cc54c129361f3bc89019bf1.png]

? **生成圆形**

让 `border-radius` 的值为正方形宽度的一半或者用 `50%` 表示宽度的一半。

![在这里插入图片描述][ec52e08f65d04d83b432bb81d4fe1643.png]

? **生成圆角矩形**

让 border-radius 的值为矩形高度的一半即可

![在这里插入图片描述][0cdb6e09f0154781a4270f051a67951c.png]

? **展开写法**

border-radius 是一个复合写法. 实际上可以针对四个角分别设置。

border-top-left-radius: 20px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 40px;

等价于

border-radius: 20px 40px 20px 40px;

![在这里插入图片描述][9bd327409da14131920c2dbbff246545.png]

--------------------

### 2. 元素显示模式 ###

在 CSS 中, HTML 的标签的显示模式有很多。

**此处只重点介绍两个:**

>  *  块级元素
>  *  行内元素

? **块级元素**

例如：

![在这里插入图片描述][edead6ef81de4aeb907009f244463420.png]  
特点:

>  *  独占一行
>  *  高度, 宽度, 内外边距, 行高都可以控制.
>  *  宽度默认是父级元素宽度的 100% (和父元素一样宽)
>  *  是一个容器(盒子), 里面可以放行内和块级元素

文字类的元素内不能使用块级元素，p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div

? **行内元素/内联元素**

例如：

![在这里插入图片描述][3aa835833eb4481c8d3d62176b3017f4.png]  
特点:

>  *  不独占一行, 一行可以显示多个
>  *  设置高度, 宽度, 行高无效
>  *  左右外边距有效(上下无效). 内边距有效.
>  *  默认宽度就是本身的内容
>  *  行内元素只能容纳文本和其他行内元素, 不能放块级元素

? **行内元素和块级元素的区别**

*  块级元素独占一行, 行内元素不独占一行。
 *  块级元素可以设置宽高, 行内元素不能设置宽高。
 *  块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置。

? **改变显示模式**

使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素。

*  `display: block` 改成块级元素 \[常用\]
 *  `display: inline` 改成行内元素 \[很少用\]
 *  `display: inline-block` 改成行内块元素

![在这里插入图片描述][eedb86ad1f8b45f392e5c90f5333dab9.png]

--------------------

## 七、盒模型 ##

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。  
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：

![在这里插入图片描述][8f91f1c8cfc84842a97aa9cb5af4f4a9.png]

>  *  `Margin(外边距)` \- 清除边框外的区域，外边距是透明的。
>  *  `Border(边框)` \- 围绕在内边距和内容外的边框。
>  *  `Padding(内边距)` \- 清除内容周围的区域，内边距是透明的。
>  *  `Content(内容)` \- 盒子的内容，显示文本和图像。

? **边框**

基础属性：

>  *  粗细: `border-width`
>  *  样式: `border-style`, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
>  *  颜色: `border-color`

除此之外，边框的粗细、颜色和样式还支持简写, 没有顺序要求：

border: 1px solid red;

![在这里插入图片描述][28dc5bffc2394c17a5ba482a7af0c14b.png]

这里我们看到这里的边框变成了 `219.2*119.2` ，这是因为加上了边框的厚度，想要解决这个问题就必须加入一行：`box-sizing: border-box;`

![在这里插入图片描述][36f8265f4fd94c5abd1689b4b9c9c1e4.png]

? **内边距**

`padding` 设置内容和边框之间的距离。可以给四个方向都加上边距：

*  padding-top
 *  padding-bottom
 *  padding-left
 *  padding-right

没加padding之前：

![在这里插入图片描述][9b9f684fc30344c9a3b25b0149051d4d.png]

加上padding之后：

![在这里插入图片描述][d592b8ce7977428db4616180206730ac.png]

可以把多个方向的 padding 合并到一起。(四种情况都要记住, 都很常见)

>  *  `padding: 5px;` 表示四个方向都是 5px
>  *  `padding: 5px 10px;` 表示上下内边距 5px, 左右内边距为 10px
>  *  `padding: 5px 10px 20px;` 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
>  *  `padding: 5px 10px 20px 30px;` 表示 上5px, 右10px, 下20px, 左30px (顺时针)

? **外边距**

`margin`控制盒子和盒子之间的距离，可以给四个方向都加上边距：

*  margin-top
 *  margin-bottom
 *  margin-left
 *  margin-right

没有设置外边距之前：三个边框紧紧挨在一起。

![在这里插入图片描述][eb068e2832f949db85abb3de844f4c65.png]

加了外边框之后：边框之间有了间隙。

![在这里插入图片描述][7d3c04c7afcd4a888afb3b4b6e2f5b1b.png]

? **块级元素水平居中**

三种写法均可：

*  `margin-left: auto; margin-right: auto;`
 *  `margin: auto;`
 *  `margin: 0 auto;`

![在这里插入图片描述][317ac781d4c0425c978ba824e275e497.png]

--------------------

## 八、chrome调试工具和弹性布局 ##

### 1. chrome调试工具 ###

1.  按F12进入开发者工具
2.  选择按钮可以选择页面中的某个布局。  
    ![在这里插入图片描述][9293b7ebbdc04a6196818266a8284e94.png]
3.  被选中模块的html代码和样式表  
    ![在这里插入图片描述][94c2f7e01db04781b2b1251c9763cd88.png]
4.  前后端交互相关调试工具和JS调试工具  
    ![在这里插入图片描述][056595a646a94b1da64b32ab5e28777e.png]

--------------------

### 2. 弹性布局 ###

创建一个 div, 内部包含三个 span：

<div>
    	<span>1</span>
    	<span>2</span>
    	<span>3</span>
    </div>
    <style>
    	div {
          
    		width: 100%;
    		height: 150px;
    		background-color: red;
    	}
    	div span {
          
    		background-color: green;
    		width: 100px;
    		width: 100px;
    	}
    </style>

此时看到的效果为：

![在这里插入图片描述][97615232b3ee4b02a275baaa7b1d10f4.png]

当我们给 div 加上 `display:flex;` 之后, 效果为：

![在这里插入图片描述][ca25536ba8ad4dfd87e3bdb574f9259e.png]

我们看到span有了高度，它不再是”行内元素“了。

再给 `div` 加上 `justify-content: space-around;` 此时效果为：

![在这里插入图片描述][0232cdebbe854f74a28b8e081ee7f72d.png]

此时可以看到这些 span 已经能够水平隔开了。

把 `justify-content: space-around;` 改为 `justify-content: flex-end;` 可以看到此时三个元素在右侧显示了：

![在这里插入图片描述][4f6a179c433c4289b2c6d62149e02f19.png]

在上面的代码中, 我们是让元素按照`主轴的方向`排列, 同理我们也可以指定元素按照`侧轴方向`排列：`align-items`

`align-items: start;`：

![在这里插入图片描述][04a6820167574939aa336ade96bc7c70.png]

`align-items: center;`：

![在这里插入图片描述][8f6afeb1976f44b0836362b862e3b190.png]

`align-items: end;`：  
![在这里插入图片描述][c8260cd0b330412b88aed59cd2f24c33.png]

--------------------

## 九、实战案例 ##

### 1. 新闻页面实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .title {
          
                text-align: center;
                font-size: 40px;
                font-family: '微软雅黑';
                font-weight: bolder;
            }
            .time {
          
                text-align: right;
            }
            p {
          
                text-indent: 2em;
            }
            .picture {
          
                text-align: center;
            }
            img {
          
                width: 200px;
                height: 300px;
            }
            .finnaly {
          
                text-align: right;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="title">这是新闻标题</div>
            <p class="time">2020年3月10日</p>
            <hr>
        </div>
        <div>
            <p>这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段
                这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段
                这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段
            </p>
            <p>这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
                这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
                这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
                这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
            </p>
            <div class="picture">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsPHf1t0btLrJT-BpcVPhXAM68oLZeklPhIw&usqp=CAU" alt="">
            </div>
            <p>这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段
                这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段
                这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段
            </p>
            <p>这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段
                这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段
                这是新闻第四段这是新闻第四段这是新闻第四段
            </p>
        </div>
        <div class="finnaly">这是落款</div>
    </body>
    </html>

**效果如下：**

![在这里插入图片描述][eec106d92dc54e22a20026de250f20f3.png]

--------------------

### 2. 小广告 ###

>  *  预期效果  
>     ![在这里插入图片描述][aa13ef4dd10049eaa98b07bbbfba17ab.png]
>  *  如何测量尺寸
>     
>      *  需要获取到当前界面上的尺寸/颜色信息，例如：图片大小，边距大小，文字大小，文字颜色，背景颜色等。
>      *  此处可以用到一个简单轻量的网页版PS来进行测量：[在线PS软件][PS]  
>         使用步骤：
>         
>         1.  使用截图工具截取目标图片，粘贴到网页PS中（直接 `ctrl + v` 即可）
>         2.  使用 `ctrl + ‘+’` 放大
>         3.  使用标尺固定好边界
>         4.  是用矩形工具测量好尺寸
>         5.  使用取色器获取颜色
>  *  实际开发中一般不需要手动测量，美工人员会给前端提供设计稿，设计稿中会包含所有尺寸颜色的详细信息。  
>     注意：
>     
>      *  测量时要注意当前页面是否有缩放，使用 `ctrl + 0` 还原缩放效果。
>      *  测量时候还需要注意当前系统是否有缩放（在系统设置中搜索“缩放与布局”），改为100%  
>         ![在这里插入图片描述][c246e43c487447c5b06310a2d80f927c.png]
>  *  测量
>     
>      *  整个区域 `308*204`，边框颜色 `d8dad8`，实心，背景 `fcfffc`
>      *  标题区域高度 `40px`，下边框为圆点 `e8ebe8`，文字大小 `18px`，颜色 `9e9d9a` 距离左侧 `20px`
>      *  正文部分文字大小 `16px`，颜色 `898b76`，距离左侧 `25px`，行高 `28px`，上方边距 `10px`
>  *  提示
>     
>      *  写代码的时候一定要先确定结构(`html`)，在确定样式(`CSS`)
>      *  测量的时候一定要耐性

? **代码实现**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
          
                width: 308px;
                height: 204px;
                border: #d8dad8 solid 2px;
            }
            .title {
          
                padding-left: 40px;
                border-bottom: 2px dotted #e8ebe8;
            }
            .item {
          
                font-size: 16px;
                flood-color: #898b76;
                padding-left: 25px;
                line-height: 28px;
                padding-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="title">广告板</div>
            <div class="content">
                <div class="item">赔钱清仓甩卖,全场一律八折优惠</div>
                <div class="item">赔钱清仓甩卖,全场一律八折优惠</div>
                <div class="item">赔钱清仓甩卖,全场一律八折优惠</div>
                <div class="item">赔钱清仓甩卖,全场一律八折优惠</div>
            </div>
        </div>
    </body>
    </html>

? **展示效果**

![在这里插入图片描述][f03bf191ed654002b89c830b3beac164.png]

--------------------

### 3. 百度热榜实现 ###

![在这里插入图片描述][2090ebfb428c4131982680d88a61ef56.png]

? **代码实现**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            a {
          
                color: blue;
                text-decoration: none;
            }
            a :hover{
          
                text-decoration: underline;
            }
            table {
          
                width: 536px;
            }
            .title .col-1 {
          
                font-size: 20px;
                font-weight: bolder;
            }
            .col-1 {
          
                width: 80%;
                text-align: left;
            }
            .col-2 {
          
                width: 20%;
                text-align: center;
            }
            .icon {
          
                background-image: url(./refresh.png);
                display: inline-block;
                width: 24px;
                height: 24px;
                background-size: 100% 100%;
                vertical-align: bottom;
            }
            .content {
          
                font-size: 18px;
                line-height: 40px;
            }
            .content .col-1, .content .col-2{
          
                border-bottom: 2px solid #f3f3f3;
            }
            .num {
          
                font-size: 20px;
                color: #fffff3;
            }
            .first {
          
                background-color: #f54545;
                padding-right: 8px;
            }
            .second {
          
                background-color: #ff8547;
                padding-right: 8px;
            }
            .third {
          
                background-color: #ffac38;
                padding-right: 8px;
            }
            .other {
          
                background-color: #8eb9f5;
                padding-right: 8px;
            }
        </style>
    </head>
    <body>
        <table cellspacing="0px">
            <th class="title col-1">百度热榜</th>
            <th class="title col-2"><a href="#">换一换<span class="icon"></span></a></th>
            <tr class="content">
                <td class="col-1"><span class="num first">1</span><a href="#">共促开放合作,共创美好未来</a></td>
                <td class="col-2">474万</td>
            </tr>
            <tr class="content">
                <td class="col-1"><span class="num second">2</span><a href="#">美将对华出售芯片, 但不卖最顶尖的</a></td>
                <td class="col-2">474万</td>
            </tr>
            <tr class="content">
                <td class="col-1"><span class="num third">3</span><a href="#">记者实测喝完酱香拿铁吹检测仪</a></td>
                <td class="col-2">474万</td>
            </tr>
            <tr class="content">
                <td class="col-1"><span class="num other">4</span><a href="#">期待杭州亚运会到来</a></td>
                <td class="col-2">474万</td>
            </tr>
        </table>
    </body>
    </html>

![在这里插入图片描述][fbed2351ee6042eea5b1d981c41865f6.png]

--------------------

[79de47c3b1c44b1ba0619d41047e1bb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/342f023c5cb649ff963fb1e859774a8e.png
[24d29de1638f4e20b38c49f7d687683d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/04f8475ee25f46c89c568eb16490ab4d.png
[1847ecc53306422481df0a343a169381.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/200b148522d94353a91d09cd7e49d547.png
[c8383d3c07ff45ddaec4c1ab3a0712fb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/db221fdc773c4582967c6ff137adec1a.png
[96513b220433415b8959dfeca1fba9db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/02f789d302624d0c90a469fe9578ab50.png
[341baac7d8dc481d8a190c3d733b98a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/851fc6fb9b7341c9a0833fe7c8ad4676.png
[746352086f5f46b484c45b8f33ee23bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7c33e9292ad14f449ba093cadf90bb15.png
[cedfb35b0981462f97832e24d14e8f3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5a458d231cfb40b7a6a02af860b11d46.png
[e2701b61936c4f8f92f696614d388ee2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/586a2f8936b2403dab604476786d6576.png
[98dfc4fae18348009c55dce3839fd52e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9e2efa0d5b07485ab32fd48e8371bb69.png
[caacbda171c84fbebedef0d9924e56f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1251693fb8344ef69aae0d1f9b3677f0.png
[c1487c5d015f41ce814d2d1302e2de8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/e0cdb24bad714fcda0f59d8ca0b8bdaf.png
[e09f1a12cee6440b90af860c1d603626.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/cbb08ffe00914462bfab8abbe07fb945.png
[dd2ab74ce510472ca8c08c6a9f04a4f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/45aa89cbd8df4fc0bbdbdf686f30c472.png
[fdcb0338342743a1a7ef9c09c4c6ac44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/bdfa2d2aa0244c8aa93ed7077fcf9124.png
[a48f58158f3f42e3b2aca30ab763ac40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/762bb8b943fb411bbf7c601b1cbcb6d8.png
[7a9905769c3744b683351acfd3210de7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9760d96e66f746ffae506477667a2ded.png
[c501713198e94378b2a182e43a9bfa86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/38c06066cca54af2b17ae7485815760f.png
[e37058061d0448f9860ce3e7299064d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9063e8de8dfe476f9b89cbbecb1a5fed.png
[09af22103170432c9930c603de49f3dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2caf06fe4b684ec9a7694880312a1731.png
[a9722598a3fa4427a63a4bb2904928fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/b7070e6293ba4250ba0f95ee2df43818.png
[92eeadce0cae49fa838bbf20385e7ee9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5e2504fdd18841bab0a05a18d56faa0a.png
[69dc5d16ceb64867b21c6d682b781ca1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2fdbd78982524013ba10b459961a9ae0.png
[61b63e82c6bc4b8e8208e44ce68c2b3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/33f761f7877a4eaeafeb17fba2b65bd7.png
[9939831473af4ffdaad839a6a7749f46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3a680d81c7e04bc985e6430b3c02a0cf.png
[b3d8c74978ed4b219607c66a789b473a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/cc9e12bae3c741d39cc0f3447c50cfaa.png
[82b37f7caa084f2f85e47892329bd99d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/562f812c27654e21b03e0c531f7daece.png
[fa81efff2af348ed9ed05dc12e1ea74e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/a98b21cdd99c46daa1dddf0e2ee78076.png
[3d3454652d06477c959f5363577b2839.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6ab39acab64d4d7a9b962eb33d03d0d8.png
[7f2aa06a579d4150a3ca1793ed1371b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/b8f7ecc976fe4105987eb2e5a7904013.png
[2f8cbb7c6ec7497eae06b9e4136b8f56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2f5713170610455ab1fe1368637eeabc.png
[833d64ba8dc6482a931a53fac4cd06e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/4765d652662749d3a1e13c77de38248e.png
[98f4377b17474965b22e53ec0724b55d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/33c0eab85e504f76a91c616a39b917b4.png
[97e4e48b32a94ac2a359d83412d8be96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/0cc338206d0f42a38152c2b8503fa7f6.png
[3997e5b67ec74f409e7a58551c4ee50f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1d50e19efe7a4e7c9b5327f86b530a52.png
[7491bb638e1a4f9e8ecd5e2c6ec7a259.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/0e13acfc677b4fdda7e9096106358666.png
[3245c421ac41444fb4dfdcb96b0d984c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/eb131368f20c4c768d203fda97a40711.png
[4fe21f9c5d8d4e438c3a571ac4a88eb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/232563f6c9004efb86a8e41bfd694ea0.png
[12531ae16cc54c129361f3bc89019bf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2ccdee6a61c74327be7029f3b0d4fb2b.png
[ec52e08f65d04d83b432bb81d4fe1643.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/8edc38ed0e2448848849d4098dbf1a74.png
[0cdb6e09f0154781a4270f051a67951c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7c7be2d6e69146e79f168e00682d83df.png
[9bd327409da14131920c2dbbff246545.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/309a77984c414a219a3b1feab5221404.png
[edead6ef81de4aeb907009f244463420.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/c14e7f31b2384abfb4e48f64b00b49c2.png
[3aa835833eb4481c8d3d62176b3017f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/302307b643cc4170857a56c972437661.png
[eedb86ad1f8b45f392e5c90f5333dab9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9b0eadfb87ac4ab38096aecca3efca46.png
[8f91f1c8cfc84842a97aa9cb5af4f4a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/aa7220d1b54d435fbed8cb83bf2c7f01.png
[28dc5bffc2394c17a5ba482a7af0c14b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/9b03e13a9cee456a8c0be55a769cd635.png
[36f8265f4fd94c5abd1689b4b9c9c1e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/95ba258d0ed34e2594f515b46893b67e.png
[9b9f684fc30344c9a3b25b0149051d4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/26a62d055bbe4050891e09e38058a2ea.png
[d592b8ce7977428db4616180206730ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ca9b31a9668a4e43b68cf12cee932283.png
[eb068e2832f949db85abb3de844f4c65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/2156ce6479294ba69a51000b0b7597c5.png
[7d3c04c7afcd4a888afb3b4b6e2f5b1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/6f92e6ad545d41a0850f08701ecbca2d.png
[317ac781d4c0425c978ba824e275e497.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/707a722962b242fda884630ac342ac6d.png
[9293b7ebbdc04a6196818266a8284e94.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/d132c75ce91e45c9a90f2ef324c3d3e8.png
[94c2f7e01db04781b2b1251c9763cd88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/3e527d1356234b108ffe9d23cdad2cfb.png
[056595a646a94b1da64b32ab5e28777e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/5746d4a57c314957adba906e1dd7d039.png
[97615232b3ee4b02a275baaa7b1d10f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/706912c5e6554cee9b1852403a5e0324.png
[ca25536ba8ad4dfd87e3bdb574f9259e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/431c47064e434c21b6186356f033ef4b.png
[0232cdebbe854f74a28b8e081ee7f72d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/73410e04f426470fa8ae54112e258067.png
[4f6a179c433c4289b2c6d62149e02f19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7fdfabc392714bf5bfc5e698b211208d.png
[04a6820167574939aa336ade96bc7c70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1f5bb9481cc945908d3f3c2084a3e707.png
[8f6afeb1976f44b0836362b862e3b190.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/69a7a2df518f409ab93d639f9fb34557.png
[c8260cd0b330412b88aed59cd2f24c33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/402adfea786042618b5ea3a68b1e2442.png
[eec106d92dc54e22a20026de250f20f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/902520a3686645e1b5a880a4ee2b6adc.png
[aa13ef4dd10049eaa98b07bbbfba17ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/8a2bac0ee22a4af1b5820956b91036ec.png
[PS]: https://www.uupoop.com/#/
[c246e43c487447c5b06310a2d80f927c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/ecf73aad5b004f9fa48f05c44ea7468a.png
[f03bf191ed654002b89c830b3beac164.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1837bdd6a7924927a3a3776e3c637225.png
[2090ebfb428c4131982680d88a61ef56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/4754705cc91945e9b1fa2e9a9852c8bb.png
[fbed2351ee6042eea5b1d981c41865f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/bfc70319a03f42c0858407ab0227aaa5.png