CSS

2 CSS

2.1 样式定义方式

2.1.1 行内样式表（inline style sheet

直接定义在标签的 style 属性中。

●ㅤ作用范围：仅对当前标签产生影响。

例如：

1
2
<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

2.1.2 内部样式表（internal style sheet

定义在 style 标签中，通过选择器影响对应的标签。

●ㅤ作用范围：可以对同一个页面中的多个元素产生影响。

2.1.3 外部样式表（external style sheet

定义在 css 样式文件中，通过选择器影响对应的标签。可以用 link 标签引入某些页面。

●ㅤ作用范围：可以对多个页面产生影响。

2.1.4 注释

注意不能使用 //。

只有：

1
2
/* 注释 */

2.2 选择器

2.2.1 标签选择器

选择所有 div 标签：

1
2
3
4
5
6
div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.2.2 ID 选择器

选择 ID 为 rect-1 的标签：

1
2
3
4
5
6
#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.2.3 类选择器

选择所有 rectangle 类的标签：

1
2
3
4
5
6
.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.2.4 伪类选择器

伪类用于定义元素的特殊状态。

1. 链接伪类选择器：

ㅤㅤ●ㅤ:link：链接访问前的样式

ㅤㅤ●ㅤ:visited：链接访问后的样式

ㅤㅤ●ㅤ:hover：鼠标悬停时的样式

ㅤㅤ●ㅤ:active：鼠标点击后长按时的样式

ㅤㅤ●ㅤ:focus：聚焦后的样式

2. 位置伪类选择器：

ㅤㅤ●ㅤ:nth-child(n)：选择是其父标签第 n 个子元素的所有元素。

1
2
3
4
5
6
7
8
div:nth-child(2n + 1) { /* div:nth-child(odd) */
    background-color: #0000FF;
}

div:nth-child(2n + 2) { /* div:nth-child(even) */
    background-color: rgba(255, 0, 0, 0.7);
}

3. 目标伪类选择器：

ㅤㅤ●ㅤ:target：当 url 指向该元素时生效。

4. 复合选择器

由两个及以上基础选择器组合而成的选择器。

ㅤㅤ●ㅤelement1, element2：同时选择元素 element1 和元素 element2。

ㅤㅤ●ㅤelement.class：选则包含某类的 element 元素。

ㅤㅤ●ㅤelement1 + element2：选择紧跟 element1 的 element2 元素。

ㅤㅤ●ㅤelement1 element2：选择 element1 内的所有 element2 元素。

ㅤㅤ●ㅤelement1 > element2：选择父标签是 element1 的所有 element2 元素。

5. 通配符选择器

ㅤㅤ●ㅤ*：选择所有标签

ㅤㅤ●ㅤ[attribute]：选择具有某个属性的所有标签

ㅤㅤ●ㅤ[attribute=value]：选择 attribute 值为 value 的所有标签

6. 伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

ㅤㅤ●ㅤ::first-letter：选择第一个字母**

ㅤㅤ●ㅤ::first-line：选择第一行**

ㅤㅤ●ㅤ::selection：选择已被选中的内容**

ㅤㅤ●ㅤ::after：可以在元素后插入内容**

ㅤㅤ●ㅤ::before：可以在元素前插入内容**

2.2.5 样式渲染优先级

ㅤㅤ●ㅤ权重大小，越具体的选择器权重越大：

ㅤㅤ●ㅤ!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器

ㅤㅤ●ㅤ权重相同时，后面的样式会覆盖前面的样式

ㅤㅤ●ㅤ继承自父元素的权重最低

2.3 颜色

2.3.1 预定义的颜色值

black、white、red、green、blue、lightblue等等。

2.3.2 16进制表示法

使用 6 位 16 进制数表示颜色，例如：#ADD8E6。

其中第 1-2 位表示红色，第 3-4 位表示绿色，第 5-6 位表示蓝色。

简写方式：#ABC，等价于#AABBCC。

2.3.3 RGB表示法

rgb(173, 216, 230)。

其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。

2.3.4 RGBA表示法

rgba(173, 216, 230, 0.5)。

前三个数同上，第四个数表示透明度。

2.3.5 取色方式

ㅤㅤ●ㅤ网页里的颜色，可以在 chrome 的调试模式下获取

ㅤㅤ●ㅤ其他颜色可以使用 QQ 的截图软件：

ㅤㅤ●ㅤ我更推荐 Snipaste 微软商店就可以下载

ㅤㅤ●ㅤ直接按 c 键，可以复制 rgb 颜色值

ㅤㅤ●ㅤ按住 ctrl 再按 c 键，可以复制 16 进制颜色值

2.4 文本

2.4.1 text-align：文本对齐

ㅤㅤtext-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

2.4.2 line-height：行高

ㅤㅤline-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

●ㅤ 补充知识点：长度单位

单位 描述
px 设备上的像素点
% 相对于父元素的百分比
em 相对于当前元素的字体大小
rem 相对于根元素的字体大小
vw 相对于视窗宽度的百分比
vh 相对于视窗高度的百分比

2.4.3 letter-spacing：字符间距

ㅤㅤCSS 的 letter-spacing 属性用于设置文本字符的间距。

2.4.4 text-indent：文本缩进

ㅤㅤtext-indent 属性能定义一个块元素首行文本内容之前的缩进量。

2.4.5 text-decoration：文本装饰

ㅤㅤtext-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的

ㅤㅤtext-decoration-thickness 属性的缩写。

2.4.6 text-shadow：文字阴影

ㅤㅤtext-shadow 为文字添加阴影。可以为文字与 text-decorations

ㅤㅤ添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

2.5 字体

2.5.1 font-size：字体大小

ㅤㅤfont-size CSS 属性指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小。

2.5.2 font-style：字体样式

ㅤㅤfont-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

2.5.3 font-weight：字体粗细

ㅤㅤfont-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。

2.5.4 font-family：字体系列

ㅤㅤCSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

ㅤㅤ属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

2.6 背景

2.6.1 background-color：背景颜色

ㅤㅤCSS 属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字 transparent 二者选其一。

2.6.2 background-image：背景图片

ㅤㅤCSS background-image 属性用于为一个元素设置一个或者多个背景图像。

ㅤㅤ●ㅤ渐变色：linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

2.6.3 background-size：背景尺寸

ㅤbackground-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

2.6.4 background-repeat：背景重复

ㅤbackground-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

2.6.5 background-position：背景位置

ㅤbackground-position 为背景图片设置初始位置。

2.6.6 background-attachment：背景附件

ㅤbackground-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

2.7 边框

2.7.1 border-style：边框样式

ㅤborder-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

2.7.2 border-width：边框宽度

ㅤborder-width 属性可以设置盒子模型的边框宽度。

2.7.3 border-color：边框颜色

ㅤCSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

2.7.4 border-radius：边框半径

ㅤCSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

2.7.5 border-collapse：边框折叠

ㅤborder-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

2.8 元素展示格式

2.8.1 展示

display

2.8.1.1 block：块元素

ㅤㅤ●ㅤ独占一行

ㅤㅤ●ㅤwidth、height、margin、padding 均可控制

ㅤㅤ●ㅤwidth 默认 100%。

2.8.1.2. inline：行元素

ㅤㅤ●ㅤ可以共占一行

ㅤㅤ●ㅤwidth 与 height 无效，水平方向的 margin 与 padding 有效，竖直方向的 margin 与 padding 无效

ㅤㅤ●ㅤwidth 默认为本身内容宽度

2.8.1.3. inline-block：行内块元素

ㅤㅤ●ㅤ可以共占一行

ㅤㅤ●ㅤwidth、height、margin、padding 均可控制

ㅤㅤ●ㅤwidth 默认为本身内容宽度

2.8.2 white-space：空白

ㅤㅤwhite-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。

2.8.3 text-overflow：文本溢出

ㅤㅤtext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

2.8.4 overflow：溢出

ㅤㅤCSS 属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和 overflow-y 的简写属性 。

2.9 内边距与外边距

2.9.1 margin：外边距

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。

1. 可以接受 1 ~ 4 个值（上、右、下、左的顺序）

2. 可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left

3. 可取值

ㅤㅤ●ㅤ3.1 length：固定值

ㅤㅤ●ㅤ3.2 percentage：相对于包含块的宽度，以百分比值为外边距。

ㅤㅤ●ㅤ3.3 auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

4. 外边距重叠

ㅤㅤ●ㅤ4.1 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

ㅤㅤ●ㅤ4.2 父元素与后代元素：父元素没有上边框和 padding 时，后代元素的 margin-top 会溢出，溢出后父元素的 margin-top 会与后代元素取最大值。

2.9.2 padding：内边距

padding CSS 简写属性控制元素所有四条边的内边距区域。

1. 可以接受 1 ~ 4 个值（上、右、下、左的顺序）

2. 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left

3. 可取值

ㅤㅤ●ㅤ3.1 length：固定值

ㅤㅤ●ㅤ3.2 percentage：相对于包含块的宽度，以百分比值为内边距。

2.10 盒子模型

2.10.1 box-sizing：盒子尺寸

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

ㅤㅤ●ㅤcontent-box：是默认值，设置 border 和 padding 均会增加元素的宽高。

ㅤㅤ●ㅤborder-box：设置 border 和 padding 不会改变元素的宽高，而是挤占内容区域。

2.11 位置

2.11.1 position：位置

CSS position 属性用于指定一个元素在文档中的定位方式。

定位类型：

ㅤㅤ●ㅤ定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除 static 以外的任何东西）。

ㅤㅤ●ㅤ相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。

ㅤㅤ●ㅤ绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。

ㅤㅤ●ㅤ粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。

取值：

ㅤㅤ●ㅤstatic：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

ㅤㅤ●ㅤrelative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。top, right, bottom, left 等调整元素相对于初始位置的偏移量。

ㅤㅤ●ㅤabsolute：元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

ㅤㅤ●ㅤfixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

ㅤㅤ●ㅤsticky：元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括 table-related 元素，基于 top, right, bottom, 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。

2.12 浮动

2.12.1 float：浮动

ㅤㅤfloat CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

由于 float 意味着使用块布局，它在某些情况下修改 display 值的计算值：

ㅤㅤ●ㅤdisplay 为 inline 或 inline-block 时，使用 float 后会统一变成 block。

取值：

ㅤㅤ●ㅤleft：表明元素必须浮动在其所在的块容器左侧的关键字。

ㅤㅤ●ㅤright：表明元素必须浮动在其所在的块容器右侧的关键字。

2.12.2 clear：清除

ㅤㅤ有时，你可能想要强制元素移至任何浮动元素下方。比如说，你可能希望某个段落与浮动元素保持相邻的位置，但又希望这个段落从头开始强制独占一行。此时可以使用 clear。

取值：

ㅤㅤ●ㅤleft：清除左侧浮动。

ㅤㅤ●ㅤright：清除右侧浮动。

ㅤㅤ●ㅤboth：清除左右两侧浮动

2.13 flex 布局

flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

2.13.1 flex-direction：弹性方向

ㅤㅤCSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

取值：

ㅤㅤ●ㅤrow：flex 容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

ㅤㅤ●ㅤrow-reverse：表现和 row 相同，但是置换了主轴起点和主轴终点。

ㅤㅤ●ㅤcolumn：flex 容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同

ㅤㅤ●ㅤcolumn-reverse：表现和 column 相同，但是置换了主轴起点和主轴终点

2.13.2 flex-wrap：弹性包装

ㅤㅤCSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

取值：

ㅤㅤ●ㅤnowrap：默认值。不换行。

ㅤㅤ●ㅤwrap：换行，第一行在上方。

ㅤㅤ●ㅤwrap-reverse：换行，第一行在下方。

2.13.3 flex-flow：弹性流动

ㅤㅤCSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。默认值为：row nowrap。

2.13.4 justify-content：证明内容

ㅤㅤCSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

取值：

ㅤㅤ●ㅤflex-start：默认值。左对齐。

ㅤㅤ●ㅤflex-end：右对齐。

ㅤㅤ●ㅤspace-between：左右两段对齐。

ㅤㅤ●ㅤspace-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

ㅤㅤ●ㅤspace-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样。

2.13.5 align-items：对齐项目

ㅤㅤCSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。 align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式。

取值：

ㅤㅤ●ㅤflex-start：元素向主轴起点对齐。

ㅤㅤ●ㅤflex-end：元素向主轴终点对齐。

ㅤㅤ●ㅤcenter：元素在侧轴居中。

ㅤㅤ●ㅤstretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

2.13.6 align-content：对齐内容

ㅤㅤCSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

取值：

ㅤㅤ●ㅤflex-start：所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

ㅤㅤ●ㅤflex-end：所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

ㅤㅤ●ㅤcenter：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

ㅤㅤ●ㅤstretch：拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

2.13.7 order：命令

ㅤㅤ定义 flex 项目的顺序，值越小越靠前。

2.13.8 flex-grow：弹性成长

CSS 属性 flex-grow 设置 flex 项主尺寸的 flex 增长系数。

负值无效，默认为 0。

2.13.9 flex-shrink：弹性收缩

ㅤㅤ**CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。**

负值无效，默认为 1。

2.13.10 flex-basis：弹性基础

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。

取值：

ㅤㅤ●ㅤwidth 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto。

2.13.11 flex：柔性

flex-grow、flex-shrink、flex-basis 的缩写。

常用取值：

ㅤㅤ●ㅤauto：flex: 1 1 auto

ㅤㅤ●ㅤnone：flex: 0 0 auto

2.14 响应式布局

2.14.1 media查询

当屏幕宽度满足特定条件时应用 css。

例如：

1
2
3
4
5
6
7
@media(min-width: 768px) {
    .container {
        width: 960px;
        background-color: lightblue;
    }
}

2.14.2 Bootstrap

ㅤㅤ●ㅤ**Bootstrap 点击传送**

2.15 作业

homework_1

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
</head>

<body>
    <div class="small-div">1</div>
    <div id="big-div">2</div>
    <div>3</div>
    <div class="small-div">4</div>
    <div class="small-div hover-div">5</div>
    <div>6</div>
    <div>7</div>
    <div class="hover-div">8</div>
    <div>9</div>
    <div>10</div>
</body>

</html>

要求：

ㅤㅤ1. 所有 div 标签的字体颜色设置为 white，宽度和高度均设置为 300px。

ㅤㅤ2. 从前往后数，第奇数个 div 的背景颜色设置为：#0000FF。

ㅤㅤ3. 从前往后数，第偶数个 div 的背景颜色设置为：rgba(255, 0, 0, 0.7)。

ㅤㅤ4. 所有包含 small-div 类的 div 的宽度和高度均设置为 200px。

ㅤㅤ5. id 为 big-div 的 div 的宽度和高度均设置为 400px。

ㅤㅤ6. 对于所有包含 hover-div 类的 div，当鼠标悬浮时，背景颜色变成 orange。

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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>
            div {
                color: white;
                width: 300px;
                height: 300px;
            }

            div:nth-child(2n + 1) { /* odd */
                background-color: #0000FF;
            }

            div:nth-child(2n + 2) { /* even */
                background-color: rgba(255, 0, 0, 0.7);
            }

            div.small-div {
                width: 200px;
                height: 200px;
            }

            #big-div {
                width: 400px;
                height: 400px;
            }

            div.hover-div:hover {
                background-color: orange;
            }
        </style>
    </head>

    <body>
        <div class="small-div">1</div>
        <div id="big-div">2</div>
        <div>3</div>
        <div class="small-div">4</div>
        <div class="small-div hover-div">5</div>
        <div>6</div>
        <div>7</div>
        <div class="hover-div">8</div>
        <div>9</div>
        <div>10</div>
    </body>

</html>

homework_2

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
</head>

<body>
    <h2>春</h2>
    <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
    <p class="shadow-p">一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
    <p class="fantasy-p">小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
    <p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。
    </p>
    <p class="beautiful-p">
        “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
    </p>
    <p class="bold-p italic-p">
        雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
    </p>
    <p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。</p>
    <p class="beautiful-p">春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
    <p>春天像小姑娘，花枝招展的，笑着，走着。</p>
    <p class="shadow-p">春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
</body>

</html>

要求：

ㅤㅤ1. h2 标签的文本居中。

ㅤㅤ2. 所有 p 标签的行高设置为 1.5em，字间距设置为 1px，段首缩进设置为 2 倍字体大小。

ㅤㅤ3. 为所有包含 beautiful-p 类的标签设置下划线，样式为：underline wavy green。

ㅤㅤ4. 为所有包含 shadow-p 类的标签设置字体阴影，样式为：5px 5px 5px grey。

ㅤㅤ5. 每个 p 标签的首字母的字体大小更改为 1.2em，字体颜色设置为 red。

ㅤㅤ6. 为所有包含 bold-p 类的标签设置字体粗细，权值为 800。

ㅤㅤ7. 为所有包含 italic-p 类的标签设置字体斜体。

ㅤㅤ8. 为所有包含 fantasy-p 类的标签设置字体为：monospace（等宽字体）。

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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>
            h2 {
                text-align: center;
            }

            p {
                line-height: 1.5em;
                letter-spacing: 1px;
                text-indent: 2em;
            }

            .beautiful-p {
                text-decoration: underline wavy green;
            }

            .shadow-p {
                text-shadow: 5px 5px 5px grey;
            }

            p::first-letter {
                font-size: 1.2em;
                color: red;
            }

            .bold-p {
                font-weight: 800;
            }

            .italic-p {
                font-style: italic;
            }

            .fantasy-p {
                font-family: monospace;
            }
        </style>
    </head>

    <body>
        <h2>春</h2>
        <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
        <p class="shadow-p">一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
        <p class="fantasy-p">小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
        <p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。
        </p>
        <p class="beautiful-p">
            “吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味儿，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响。
        </p>
        <p class="bold-p italic-p">
            雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
        </p>
        <p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”，刚起头儿，有的是工夫，有的是希望。</p>
        <p class="beautiful-p">春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
        <p>春天像小姑娘，花枝招展的，笑着，走着。</p>
        <p class="shadow-p">春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
    </body>

</html>

homework_3

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

要求：

ㅤㅤ●ㅤ1. 所有 div 标签的宽度和高度均设置为 300px，外边距设置为 10px。

ㅤㅤ●ㅤ2. 第一个 div 的背景颜色设置为 lightblue。

ㅤㅤ●ㅤ3. 第二个 div 的背景图片设置为 url('/static/images/mountain.jpg')，背景图片大小设置为100% 100%，背景图片不重复。

ㅤㅤ●ㅤ4. 第三个 div 的背景图片设置为 url('/static/images/mountain.jpg'), url('/static/images/logo.png')，背景图片大小设置为 50% 100%, 50% 100%，两张背景图片均不重复，两张背景图片的位置设置为 top left, 150px 0。

ㅤㅤ●ㅤ5. 第四个 div 的背景图片设置为 url('/static/images/mountain.jpg')，背景图片大小设置为 100% 100%，背景图片不重复，背景图片的位置在视口内固定。

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>
            div {
                width: 300px;
                height: 300px;
                margin: 10px;
            }

            div:nth-child(1) {
                background-color: lightblue;
            }

            div:nth-child(2) {
                background-image: url('/static/images/mountain.jpg');
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            div:nth-child(3) {
                background-image: url('/static/images/mountain.jpg'), url('/static/images/logo.png');
                background-size: 50% 100%, 50% 100%;
                background-repeat: no-repeat;
                background-position: top left, 150px 0;
            }

            div:nth-child(4) {
                background-image: url('/static/images/mountain.jpg');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-attachment: fixed;
            }
        </style>
    </head>

    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>

</html>

homework_4

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

要求：

1. 所有 div 标签的宽度和高度均设置为 300px。

2. 第一个 div 满足：

ㅤㅤ●ㅤ四条边的宽度为 10px；

ㅤㅤ●ㅤ上右下左四条边的样式依次为：solid dotted inset dashed；

ㅤㅤ●ㅤ上下两条边的颜色为 blue，左右两条边的颜色为 red；

ㅤㅤ●ㅤ外边框圆角半径为 50%；

3. 第二个 div 满足:

ㅤㅤ●ㅤ四条边的样式为：solid 3px black；

ㅤㅤ●ㅤ外边框圆角半径为 10px；

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
            div {
                width: 300px;
                height: 300px;
            }

            div:nth-child(1) {
                border-width: 10px;
                border-style: solid dotted inset dashed;
                border-color: blue red;
                border-radius: 50%;
            }

            div:nth-child(2) {
                border: solid 3px black;
                border-radius: 10px;
            }
        </style>
    </head>

    <body>
        <div></div>
        <div></div>
    </body>

</html>

homework_5

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
</head>

<body>
    <div class="container">
        <div class="inline-block-div">div-1</div>
        <div class="inline-block-div">div-2</div>
        <div class="inline-block-div">div-3</div>
        <br>
        <span>span-1</span>
        <span>span-2</span>
        <span>span-3</span>
        <br>
        <div class="block-div">
            123456789101112
        </div>
    </div>
</body>

</html>

要求：

1. 包含 container 类的标签满足：

ㅤㅤ●ㅤ**display 属性为 block；**

ㅤㅤ●ㅤ宽度和高度均为 500px；

ㅤㅤ●ㅤ内边距为 10px；

ㅤㅤ●ㅤ外边距为 20px；

ㅤㅤ●ㅤ背景颜色为 lightblue；

2. 包含 inline-block-div 类的标签满足；

ㅤㅤ●ㅤ**display 属性为 inline-block；**

ㅤㅤ●ㅤ宽度和高度均为 100px；

ㅤㅤ●ㅤ内边距为 10px；

ㅤㅤ●ㅤ外边距为 10px；

ㅤㅤ●ㅤ背景颜色为 blue；

ㅤㅤ●ㅤ字体颜色为 white；

3. 所有 span 满足：

ㅤㅤ●ㅤ**display 属性为 inline；**

ㅤㅤ●ㅤ左右内边距为 10px；

ㅤㅤ●ㅤ左右外边距为 20px；

ㅤㅤ●ㅤ背景颜色为 bisque；

ㅤㅤ●ㅤ字体颜色为 green；

4. 包含 block-div 类的标签满足；

ㅤㅤ●ㅤ**display 属性为 block；**

ㅤㅤ●ㅤ宽度和高度均为 100px；

ㅤㅤ●ㅤ内边距与外边距均为 10px；

ㅤㅤ●ㅤ背景颜色为 blue；

ㅤㅤ●ㅤ字体颜色为 white；

ㅤㅤ●ㅤ**overflow 属性为 hidden；**

ㅤㅤ●ㅤ**text-overflow 属性为 ellipsis；**

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>
            .container {
                display: block;
                width: 500px;
                height: 500px;
                padding: 10px;
                margin: 20px;
                background-color: lightblue;
            }

            .inline-block-div {
                display: inline-block;
                width: 100px;
                height: 100px;
                padding: 10px;
                margin: 10px;
                background-color: blue;
                color: white;
            }

            span {
                display: inline;
                padding: 0 10px;
                margin: 0 20px;
                background-color: bisque;
                color: green;
            }

            .block-div {
                display: block;
                width: 100px;
                height: 100px;
                padding: 10px;
                margin: 10px;
                background-color: blue;
                color: white;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="inline-block-div">div-1</div>
            <div class="inline-block-div">div-2</div>
            <div class="inline-block-div">div-3</div>
            <br>
            <span>span-1</span>
            <span>span-2</span>
            <span>span-3</span>
            <br>
            <div class="block-div">
                123456789101112
            </div>
        </div>
    </body>

</html>

homework_6

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>
</head>

<body>
    <div>文本1</div>
    <div>文本2</div>
</body>

</html>

要求：

1. 所有 div 标签满足：

ㅤㅤ●ㅤ宽度和高度均为 100px；

ㅤㅤ●ㅤ背景颜色为 lightsalmon；

2. 第一个 div 满足：

ㅤㅤ●ㅤ上右下左外边距依次为：10px 20px 30px 40px；

ㅤㅤ●ㅤ上右下左内边距依次为：10px 20px 30px 40px；

3. 第二个 div 在父标签内水平居中，外边距设置为：0 auto。

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>
            div {
                width: 100px;
                height: 100px;
                background-color: lightsalmon;
            }

            div:nth-child(1) {
                margin: 10px 20px 30px 40px;
                padding: 10px 20px 30px 40px;
            }

            div:nth-child(2) {
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
        <div>文本1</div>
        <div>文本2</div>
    </body>

</html>

homework_7

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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>
</head>

<body>
    <div>1</div>
    <div>2</div>
</body>

</html>

要求：

1. 所有 div 标签满足：

ㅤㅤ●ㅤ宽度和高度均为 300px；

ㅤㅤ●ㅤ内边距与外边距均为 10px；

ㅤㅤ●ㅤ背景颜色为 lightblue；

ㅤㅤ●ㅤ边框样式为 solid 10px gray；

2. 第一个 div 为内容盒子模型。

3. 第二个 div 为边框盒子模型。

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
            div {
                width: 300px;
                height: 300px;
                padding: 10px;
                margin: 10px;
                background-color: lightblue;
                border: solid 10px gray;
            }

            div:nth-child(1) {
                box-sizing: content-box;
            }

            div:nth-child(2) {
                box-sizing: border-box;
            }
        </style>
    </head>

    <body>
        <div>1</div>
        <div>2</div>
    </body>

</html>

homework_8

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>

</html>

要求：

1. body 的高度设为 2000px，外边距设为 0。

2. 所有 div 标签的样式设置为：

ㅤㅤ●ㅤ宽度与高度均为 200px；

ㅤㅤ●ㅤ背景颜色设置为 lightblue；

ㅤㅤ●ㅤ外边距设置为 20px；

3. 第一个 div 的 position 属性为 static。

4. 第二个 div 的样式设置为：

ㅤㅤ●ㅤ**position 的值为 relative；**

ㅤㅤ●ㅤ**left 的值为 50px；**

ㅤㅤ●ㅤ**top 的值为 15px；**

5. 第三个 div 的样式设置为：

ㅤㅤ●ㅤ**position 的值为 absolute；**

ㅤㅤ●ㅤ背景颜色为 rgba(0, 0, 255, 0.5)；

ㅤㅤ●ㅤ**left的值为 30px;**

ㅤㅤ●ㅤtop 的值为 30px；

6. 第四个 div 的样式设置为：

ㅤㅤ●ㅤ**position 的值为 fixed；**

ㅤㅤ●ㅤ背景颜色为 rgba(0, 255, 0, 0.5)；

ㅤㅤ●ㅤ**left 的值为 100px；**

ㅤㅤ●ㅤ**top 的值为 250px；**

7. 第十个 div 的样式为：

ㅤㅤ●ㅤ**position 的值为 sticky；**

ㅤㅤ●ㅤ背景颜色为 rgba(255, 0, 0, 0.5)；

ㅤㅤ●ㅤ**bottom 的值为 10px；**

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>
            body {
                height: 2000px;
                margin: 0;
            }

            div {
                width: 200px;
                height: 200px;
                background-color: lightblue;
                margin: 20px;
            }

            div:nth-child(1) {
                position: static;
            }

            div:nth-child(2) {
                position: relative;
                left: 50px;
                top: 15px;
            }

            div:nth-child(3) {
                position: absolute;
                background-color: rgba(0, 0, 255, 0.5);
                left: 30px;
                top: 30px;
            }

            div:nth-child(4) {
                position: fixed;
                background-color: rgba(0, 255, 0, 0.5);
                left: 100px;
                top: 250px;
            }

            div:nth-child(10) {
                position: sticky;
                background-color: rgba(255, 0, 0, 0.5);
                bottom: 10px;
            }
        </style>
    </head>

    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </body>

</html>

homework_9

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
</head>

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="next-line"></div>
    </div>
</body>

</html>

要求：

1. 包含 container 类的标签满足：

ㅤㅤ●ㅤ宽度与高度均为 500px；

ㅤㅤ●ㅤ背景颜色为 1lightblue1；

2. 包含 item 类的标签满足：

ㅤㅤ●ㅤ宽度和高度均为 100px；

ㅤㅤ●ㅤ外边距为 10px；

ㅤㅤ●ㅤ背景颜色为 lightcoral；

ㅤㅤ●ㅤ**float 属性的值为 left；**

3. 包含 next-line 类的标签满足：

ㅤㅤ●ㅤ宽度和高度均为 150px；

ㅤㅤ●ㅤ背景颜色为 rgba(0, 0, 255, 0.5)；

ㅤㅤ●ㅤ必须移动到之前的浮动元素的下面（使用 clear 属性）；

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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>
            .container {
                width: 500px;
                height: 500px;
                background-color: lightblue;
            }

            .item {
                width: 100px;
                height: 100px;
                margin: 10px;
                background-color: lightcoral;
                float: left;
            }

            .next-line {
                width: 150px;
                height: 150px;
                background-color: rgba(0, 0, 255, 0.5);
                clear: both;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="next-line"></div>
        </div>
    </body>

</html>

homework_10

编写一个完整的 HTML 页面，标签内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>
</head>

<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>

    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

要求：

1. 所有包含 container 类的标签满足：

ㅤㅤ●ㅤ**display 属性为 flex；**

ㅤㅤ●ㅤ宽度为 50%；

ㅤㅤ●ㅤ高度为 500px；

ㅤㅤ●ㅤ背景颜色为 lightblue；

ㅤㅤ●ㅤ外边距为 10px；

2. 所有 container 类标签的子标签满足：

ㅤㅤ●ㅤ宽度与高度均为 120px；

3. 所有 container 类标签的第奇数个子元素满足：

ㅤㅤ●ㅤ背景颜色为：lightsalmon；

4. 所有 container 类标签的第偶数个子元素满足：

ㅤㅤ●ㅤ背景颜色为 lightgreen；

5. 第一个 container 类标签满足：

ㅤㅤ●ㅤ**flex-wrap 属性为 wrap；**

ㅤㅤ●ㅤ**justify-content 属性为 space-between；**

ㅤㅤ●ㅤ**align-content 属性为 flex-start；**

6. 第二个 container 类标签满足：

ㅤㅤ●ㅤ**flex-direction 属性为 row-reverse；**

ㅤㅤ●ㅤ**flex-wrap 属性为 nowrap；**

7. 第二个 container 类标签的所有第奇数个子标签满足：

ㅤㅤ●ㅤ**flex-grow 属性为 3；**

ㅤㅤ●ㅤ**flex-shrink 属性为 3；**

8. 第二个 container 类标签的所有第偶数个子标签满足：

ㅤㅤ●ㅤ**flex-grow 属性为 1；**

ㅤㅤ●ㅤ**flex-shrink 属性为 1；**

作业如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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>
            .container {
                display: flex;
                width: 50%;
                height: 500px;
                background-color: lightblue;
                margin: 10px;
            }

            .container > * {
                width: 120px;
                height: 120px;
            }

            .container > *:nth-child(2n + 1) {
                background-color: lightsalmon;
            }

            .container > *:nth-child(2n + 2) {
                background-color: lightgreen;
            }

            .container:nth-child(1) {
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: flex-start;
            }

            .container:nth-child(2) {
                flex-direction: row-reverse;
                flex-wrap: nowrap;
            }

            .container:nth-child(2) > *:nth-child(2n + 1) {
                flex-grow: 3;
                flex-shrink: 3;
            }

            .container:nth-child(2) > *:nth-child(2n + 2) {
                flex-grow: 1;
                flex-shrink: 1;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>

        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </body>

</html>