任务目的
-
针对设计稿样式进行合理的HTML架构，包括以下但不限于：
* 掌握常用HTML标签的含义、用法- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化，合理地使用HTML标签来构建页面
-
掌握基本的CSS编码，包括以下但不限于：
* 了解CSS的定义、概念、发展简史- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述
- 基于第一个任务“零基础HTML编码”的代码，参考 ，在步骤一的代码基础上增加CSS样式代码的编写，示例图：
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
- 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
- HTML 及 CSS 代码结构清晰、规范
在线学习参考资料
零基础HTML及CSS编码（一）总结
一、相关CSS属性
1、 border-collapse属性
border-collapse属性设置表格的边框是折叠成一个还是像HTML标准样式一样分开显示。
属性值：
separate：边框分开。
collapse：在可能情况下边框折叠成一个单一的边框。
initial：设成默认值：separate。
inherit：从父元素继承。
2、 text-indent属性
text-indent属性指定在一个段落当中第一行的缩进值。
可以使用em。em与元素字体大小（font-size）有关，自适应字体大小，1em含义是当前字体尺寸的1倍，2em是当前字体尺寸的2倍。
例如：字体大小为12px，2em为24px。
3、 list-style属性
list-style属性可使用一个语句设置所有列表属性，可以设置的属性按顺序为：list-style-type, list-style-position, list-style-image，如果设置时这三个属性当中的某个属性未设置，则使用属性的默认值。
css 语法：
list-style: list-style-type list-style-position list-style-image|initial|inherit;
注意：HTML中可使用<ul>标签的type属性设置列表项目符号的类型，有：none（无），disc（实心圆，默认值），circle(空心圆)，square（实心方块）。
4、 box-shadow属性
box-shadow属性为一个元素添加一个或多个阴影。
css语法：
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
属性值：
none：无阴影，默认值。
h-shadow：必须填写。阴影的水平位置，可以为负值。
v-shadow：必须填写。阴影的垂直位置，可以为负值。
blur：可选，模糊距离。
spread：可选，阴影的尺寸，指阴影外延出去的总长度，可以为负值。
color：可选，阴影的颜色。
inset：可选，将阴影从外部阴影(outset)改为内部阴影。
initial：这为默认值。
inherit：继承父元素的属性值。
5、 position属性
position属性指定一个元素使用的位置的方法。
css语法：
position: static|absolute|fixed|relative|initial|inherit;
属性值：
static：默认值。元素以原文档流的方式呈现。
absolute：元素位置与它的第一个非static元素的位置相关，不在占用原文档流的位置。
fixed：元素位置与浏览器窗口相关。
relative：元素位置与它的正常位置相关，“left:20px;”表示在元素左侧位置上增加20像素。
initial：设为默认值。
inherit：继承它的父元素。
二、伪类（Pseudo-classes）和伪元素（Pseudo-elements）
1、 伪类
CSS的伪类用于设置元素的特殊状态，用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如，它可以用于：当鼠标在元素上时它的样式，访问过及未访问过超链接样式的不同，当元素获得鼠标焦点时的样式。
css语法：
selector:pseudo-class {
property:value;
}
CSS伪类：
（1） a:active 选择活跃链接。
（2） input:checked 选择每一个被选中的<input>元素。
（3） input:disabled 选择每一个无效的<input>元素。
（4） p:empty 选择每一个没有子元素的<p>元素。
（5） input:enabled 选择每一个已启用的<input>元素。
（6） p:first-child 选择每一个是其父元素第一个子元素的<p>元素。
（7） p:first-of-type 选择每一个使其父元素第一个<p>子元素的<p>元素。
（8） input:focus 选择获得焦点的<input>元素
（9） a:hover 选择鼠标在其上面的链接。
（10） input:in-range 选择<input>元素的值在制定范围的<input>元素。
（11） input:invalid 选择所有有无效值的<input>元素。
（12） p:lang(it) 选择所有以lang属性开头的<p>元素。
（13） p:last-child 选择是其父元素最后一个子元素的<p>元素。
（14） p:last-of-type 选择所以是其父元素最后一个<p>元素的<p>元素。
（15） a:link 选择所以未访问过的链接。
（16） :not(p) 选择所有不是<p>元素的元素。
（17） p:nth-child(2) 选择每一个是其父元素第二个子元素的<p>元素。
（18） p:nth-last-child(2) 选择每一个从后往前数是其父元素第二个子元素的<p>元素。
（19） p:nth-last-of-type(2) 选择每一个从后往前数是其父元素第二个<p>元素的<p>元素。
（20） p:nth-of-type(2) 选择每一个是其父元素第二个<p>元素的<p>元素。
（21） p:only-child 选择每一个是其父元素唯一元素的<p>元素。
（22） input:optional 选择没有“必须”属性的<input>元素。
（23） input:out-of-range 选择值在指定范围之外的<input>元素。
（24） input:read-only 选择只读属性的<input>元素。
（25） input:read-write 选择不是只读的<input>元素。
（26） input：required 选择有一个“required”属性的<input>元素。
（27） root 选择文档的根元素。
（28） #news:target 选择目前活跃的#news元素。
（29） Input:valid 选择所有有valid值的<input>元素。
（30） a:visited 选择所有被访问过的链接。
2、 伪元素
CSS的伪元素用于设置部分元素的样式，用于创建一些不在文档树中的元素，并为其添加样式。。例如：设置一个元素第一行或第一个字母的样式，在一个元素的内容前或后插入内容。
css语法：
selector::pseudo-element {
property:value;
}
注意：CSS3中，伪元素用“：：”，伪类用“：”。
CSS伪元素：
（1） p::after：在每一个<p>元素内容后插入些内容。
（2） p::before：在每一个<p>元素后插入些内容。
（3） p::first-letter：选择每一个<p>元素的第一个字母。
（4） p::first-line：选择每一个<p>元素的第一行。
（5） p::selection：选择用户已选择的元素的一部分。
三、遇到问题：如何修改placeholder属性
Placeholder属性指定一个简短的提示，说明输入的期望值（比如期望值或简短描述）,在用户输入值前显示。Placeholder属性可用于以下<input>类型：text，search，url，tel，email，password.
Placeholder内容默认为灰色，可使用::placeholder伪元素修改其样式，::placeholder伪元素代表元素的placeholder文本，用它可以修改placeholder文本的样式。
placeholder伪元素不是标准的微元素：
四、已提交作业
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/tree/master/任务二：零基础HTML及CSS编码（一）
Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务二：零基础HTML及CSS编码（一）/index.html