任务目的：
- 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化，合理地使用HTML标签来构建页面
- 掌握基本的CSS编码，包括以下但不限于：
- 了解CSS的定义、概念、发展简史
- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述：
基于第一个任务“零基础HTML编码”的代码，在步骤一的代码基础上增加CSS样式代码的编写。
任务注意事项：
- 只需要完成HTML、CSS代码编写，不需要写JavaScript
- 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
- 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
- HTML及CSS代码结构清晰、规范
总结：
一、相关CSS属性
1、表格属性
border-collapse属性：设置是表格边框是否被合并为单一的边框，还是像在标准的HTML中那样分开显示。属性值包括：
| 属性 | 值 |
|---|---|
| border-collapse | separate：边框分开。不会忽略border-spacing属性 |
| collapse:如果可能，边框会合并成一个单一的边框。 | |
| initial:设成默认值：separate | |
| inherit：c从父元素继承 |
border-spacing属性：指定单元格边界之间的距离（仅用于“分离边框模式”）。在指定的两个长度中，第一个是水平间隔，第二个是垂直间隔。
empty-cells属性：设置是否显示表格中的空单元格（仅用于“分离边框”模式）。
table { border-collapse:separate; border-spacing:10px 50px; empty-cells:hidden; }
| 属性 | 值 | 描述 |
|---|---|---|
| empty-cells | hide | 不在空单元格周围绘制边框 |
| show | 在空单元格周围绘制边框。默认。 | |
| inherit | 从父元素继承 |
cpation-side属性：指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。属性值包括：top（默认）、bottom、inherit。
table-layout属性：用来显示表格单元、行、列的算法规则。
| 属性 | 值 | 描述 |
|---|---|---|
| table-layout | automatic | 默认。列宽度由列单元格中没有折行的最宽的内容设定。速度较慢。 |
| fixed | 列宽由表格宽度、列宽度、表格边框宽度、单元格间距设定，与单元格内容无关。速度快，但不够灵活。 | |
| inherit | 从父元素继承 |
2、text-indent属性
指定段落中第一行的缩进值。
可以使用em。em与元素字体大小有关，自适应字体大小。1em指当前字体尺寸的1倍。2em是2倍。
3、列表属性：
list-style属性：列表最常见的属性包括列表标志类型（list-style-type）、图像列表标志（list-style-img）、列表标志位置（list-style-position）。
利用list-style属性可以使用一个语句设置所有列表属性。其值可以按任何顺序列出，而且都可以忽略。未设置的值，则使用属性的默认值。
li {list-style:url(example.gif) square inside}
list-style-type属性：设置列表标记的类型。可能的值如下（列举几个）：
| 属性 | 值 | 描述 |
|---|---|---|
| list-style-type | none | 无标记 |
| disc | 默认。标记是实心圆 | |
| circle | 标记是空心圆 | |
| square | 标记是实心方块 | |
| decimal | 标记是数字 | |
| decimal-leading-zero | 0开头的数字标记（01,02,03，等） | |
| lower-roman | 小写罗马数字 | |
| upper-roman | 大写罗马数字 | |
| lower-alpha | 小写英文字母 | |
| upper-alpha | 大写英文字母 |
list-style-position属性：设置在何处放置列表项标记。
| 属性 | 值 | 描述 |
|---|---|---|
| list-tyle-position | inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 | |
| inherit | 从父元素继承 |
list-style-img属性：使用图像来替换列表项目的标记。
| 属性 | 值 | 描述 |
|---|---|---|
| list-style-img | URL | 图像的路径 |
| none | 默认 | |
| ieherit | 从父元素继承 |
4、box-shadow属性
box-shadow属性向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。
CSS语法：box-shadow:none|h-shadow v-shadow blur spread color |inset|initial|inherit;
| 属性 | 值 | 描述 |
|---|---|---|
| box-shadow | h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | |
| blur | 可选。模糊距离。 | |
| spread | 可选。阴影的尺寸。 | |
| color | 可选。阴影的颜色。 | |
| inset | 可选。将外部阴影（outset）改为内部阴影。 |
二、CSS选择器
| 选择器类型 | 选择器符号 | |
|---|---|---|
| 上下文选择器 | 标签选择器 | h1 {fone-size:16px;} p {color:red;} |
| 后代选择器 | article p {font-size:12px;} | |
| 子选择器 | article {font-size:12px;} | |
| 相邻兄弟选择器 （p标签必须紧跟在h2标签后面） |
h2+p {font-size:12px;} | |
| 一般同胞选择器 | h2~p {font-size:12px;} | |
| 通用选择器 | * {color:green;} | |
| id和类选择器 | 类选择器 | .类名 {font-style:italic;} |
| 标签带类名选择器 | 标签名.类名 {color:red;} | |
| 多类选择器 （两个类名之间无空格，有空格就成“祖先/后代”关系） |
.类名.类名 {font-size} | |
| id选择器 | #id名 {font-style:italic} | |
| 属性选择器 | 属性名选择器 | 例如：img[title] {border:2px solod blue;} |
| 属性值选择器 | 例如：img[title="red flower"] {border:4px solid green;} | |
关于选择器的详细知识，请参考：CSS选择器详解。
三、伪类（Pseudo-classes）和伪元素（Pseudo-elements）
1、伪类
CSS的伪类用于设置元素的特殊状态，用于当已有元素处于某个状态时，为其添加对应的样式，这个状态时根据用户行为而动态变化的。
CSS语法：
selector:pseudo-class {
property:calue;
}
CSS伪类：
（1）链接伪类
a:link 选择所有未访问过的链接；
a:visited 选择已被点击过的链接；
a:hover 鼠标悬停在链接上；
a:active 链接正在被点击（鼠标按下还没有释放）
（2）input:checked 选择被选中的<input>元素；
（3）input:focus 选择获得焦点的<input>元素；
（4）input:disabled 选择无效的<input>元素（无效input元素不会被提交）；
（5）input:enabled 选择已启用的<input>元素；
（6）input:invalid 选择所有无效值的<input>元素；
（7）input:in-rang 选择<input>元素的值在指定范围内的元素；
（8）input:out-of-range 选择值在指定范围之外的<input>元素；
（9）input：read-only 选择只读属性的<input>元素；
（10）input:read-write 选择不是只读属性的<input>元素；
（11）input:optional 选择没有“必须”属性的<input>元素；
（12）input:required 选择有一个“required”属性的<input>元素；
（13）input:valid 选择所有有valid值的<input>元素；
（14）p:empty 选择所有没有子元素的<p>元素；
（15）p:first-child 选择所有是其父元素第一个子元素的<p>元素；
（16）p:nth-child(2) 选择每一个是其父元素第二个子元素的<p>。也可用odd和even表示奇数和偶数；
（17）p:first-of-type 选择所有是其父元素第一个<p>子元素的<p>元素；
（18）p:nth-of-type(2) 选择每一个是其父元素第二个<p>元素的<p>元素
（19）p:lasst-child 选择是其父元素最后一个子元素的<p>元素；
（20）p:nth-last-child(2) 选择每一个从后往前数是其父元素第二个子元素的<p>元素；
（21）p:last-of-type 选择所有是其父元素最后一个<p>元素的<p>元素；
（22）p:nth-last-of-type(2) 选择每一个从后往前数是其父元素第二个<p>子元素的<p>元素；
last-child与last-of-type的区别，见： CSS3新增选择器之last-child与last-0f type的区别。
（23）tr:nth-child(odd) 选择表格中的奇数行。其他<li>等元素类推；
（24）tr:nth-child()even 选择表格中的偶数行。
2、伪元素
CSS的伪元素用于设置部分元素的样式，用于创建一些不在文档树中的元素，并未其添加样式。
CSS语法：
selector::pseudo-element{
property:value;
}
（1）p::after 在每一个<p>元素后插入内容；
（2）p::before 在每一个<p>元素前插入内容
（3）p::first-letter 选择每一个<p>元素的第一个字母。只能用于块级元素；
（4）p::first-line 选择每一个<p>元素的第一行；
四、提交作业
代码地址：https://github.com/zhoujie1986/IFE/tree/master/task2