学完除定位后的其他内容，后写出的作品。

模仿小米商城后的作品，没有做完（扣照片后麻烦就没继续做）

经典广告格式

1：大致内容+重点：

CSS包含选择器和属性，其中选择器和属性是组成CSS的大部分内容，同时选择器的选择（是让网页好看的第一步，选择器的选择很简单），属性是作用于网页内容变好看的直接原因。

CSS中的重点内容则是：浮动、盒子模型、定位。

2选择器：

选择器分为基础选择器和复合选择器。

其中基础选择器我之前写的有，这里不再多说。

复合选择器：

其中，链接伪类选择器和  ：focus伪类选择器都属于伪类选择器，而伪类选择器用于向某些选择器添加特殊的效果，其中，伪类选择器最大特点是用冒号（：）表示。

其中的颜色从白色变成黄色，鼠标放到该盒子时出现阴影都需要伪类选择器

1后代选择器:

.header h1 {

            display: block;

            width: 610px;

            height: 50px;

            color: #fff;

            padding-top: 10px;

            margin: 0 auto;

        }

后代选择器格式：元素1+空格+元素2（可以在添加其它元素）

该模式表示：选择元素1里面的所有元素2（元素2是元素1的后代元素，即元素1包含元素2）

如：<div> <p> </p> </div>，p即是div中的后代元素。

要谨记：

1：元素1和元素2中间用空格隔开

2：元素1是父级，元素2是子级，最终选择的是元素2

3：元素2要是元素1的后代

4：元素1和元素2可以是任意基础选择器

如：

.nav1 ul li a {

            color: #fff;

        }

2子选择器：

与后代选择器要区分开，格式：元素1+>+元素2（可以在添加其它元素）

要记好，与后代选择器相比空格换成了>符号，且只能选择作为某元素最近一级的子元素，其中包含清梦的 <p> </p>标签是div标签的子元素，包含星河的<p> </p>标签是div标签的孙子元素。

要谨记：

1：元素1和元素2中间用大于号（>）隔开

2：元素1是父级，元素2是子级，最终选择的是元素2

3：元素2必须是亲儿子元素才行，其他的元素都不行

3并集选择器：

并集选择器格式：元素1，元素2（可以在添加其它元素）

并集选择器个元素之间的逗号是英文的要谨记（逗号表示：和的意思），改选择器表明：为多组标签同时为他们定义相同的样式。

如：

.content1, .content2, .content3, .content4 {

            height: 510px;

            margin: 10px auto;

            margin-top: 20px;

        }

4链接伪类选择器：

格式：

a:link        (选择所有未被访问的链接)

a:visited （选择所有已被访问的链接）

a:hover   （选择鼠标指针位于其上的链接，即还没有点击选项，只把鼠标停留在其上面）

a:active   （选择活动链接（鼠标按下未弹起的链接））

其中的颜色从白色变成黄色，鼠标放到该盒子时出现阴影都需要伪类选择器

3属性：

属性很多，目前学的属性还不够，但可以做出一个静态的网页的大部分。

属性类型：font、text、background，其中font、text属性我之前写的有，这里的内容和之前的一样，看过的可以不看。

1字体属性：

简介：

font-family：设计字体系列的样式。

font-size：设计文字大小。

font-weight：控制字体粗细。

font-style：控制文本的风格。

font-family:后面跟字体的类型，该类型可以用汉字、英文等，但用英语是最合适的，英语的兼容性更好，其中font-family后面可以跟多种字体类型，但多种字体类型之间要用逗号（，）来隔开，并且这些字体类型都要写在引号中，这些字体类型尽量使用系统自带的字体，以确保用户在不同的浏览器中都能正常显示，  运行程序时电脑会先读取多种字体类型中的第一个，如果有则不在进行读取，此时电脑运行结果的字体类型就是此字体类型，否则电脑会继续执行此过程。

font-size:首先我们应该记住px（像素英语：pixel）是网页中最常用的单位，之后会经常见到，不同浏览器默认的文字大小是不一样的，比如说谷歌浏览器默认的文字大小是16px，在写程序时我们要尽量给定一个明确的大小，其中我们可以给程序中的body指定文字大小，就可以达到规定整个页面文字大小的作用 如：body{ font-size: 16px}，此时就达到上述所说的效果，但要注意标题标签的文字大小要单独定义。

font-weight:控制字体粗细，正常情况下会默认字体不是粗的，即是normal，如果想加粗的话就要在该样式后面加bold，其中bolder是特粗体，lighter是细体，但我们却不常用英语来规定该样式，我们常用数字400（后面不用跟单位）来表示默认字体，用数字700（不用跟单位）来表示粗体。

font-style:控制文本风格，正常情况下会默认字体是normal即标准字体样式（该默认值normal常用来使倾斜的字体不在倾斜），样式后面跟italic会显示的字体是斜体。

字体简写属性：

格式：font: font-style font-weight font-size/line-height font-family;

例：font: italic 700 16px/20px 'Microsoft yahei';

注：此顺序不可更改且每个顺序之间要用空格隔开，此处的行高会在下文讲解，不设置的属性可以不写（系统会自动取默认值）但必须要保留font-size和font-family属性否则font属性将不会起作用。

2文本属性：

color:控制颜色。

text-align:控制设置元素内文本内容的水平对齐方式。

text-decoration:控制文本修饰。

text-indent:通常是将段落的首行缩进。

line-height:可以控制文字行与行之间的距离。

color:控制颜色，根据使用的选择器不同，改变颜色的东西也会不同，注意：文本颜色的表示有3种形式，1：预定义的颜色值（一般用英语来表示），2：十六进制（如：#FF0000，最常用的形式），RGB代码（如rgb(255,0,0)等，这个形式不常用，其中rgb是红绿蓝的缩写）。

text-align:控制设置元素内文本内容的水平对齐方式（可以参考我之前写的HTML中的表格），该样式后面跟:left（左对齐，默认值）、right（右对齐）、center（居中对齐）。

text-decoration:规定添加文本的修饰，可以给文本添加下划线、删除线、上划线，该样式后面可以跟none（默认，没有装饰线）、underline（下划线，链接a标签会自带下划线）、overline（上划线，几乎不用）、line-through（不常用），在网址中链接下面不会自带下划线，因此我们可以利用标签选择器，使链接下下划线删去，如： a { text-decoration: none}。

text-indent:属性用来指定文本的第一行的缩进，通常是将段落的首行缩进（可以简单理解为写作文时的每段开头空2格，这2格即为缩进），该样式后面跟：数字+单位，如：text-indent:20px,注意：数字前使正号，则会向右缩进，数字前使负号，则会向左缩进，其中我们需要记住 em 单位，em使一个相对单位，如果当前文字大小是16px，那么1em就是16px，2em就是32px，即1个em就是一个目前的文字大小。

line-height:该属性常用于设置行间的距离，可以控制文字行与行之间的距离，其中该样式后面也是跟：数字+单位，但该单位目前我所学到的只有px，其中行间距包含：上间距、文本高度、下间距。

3背景属性：

介绍：

1 background-color：

2 background-image：

3 background-repeat：

4 background-attachment：

5 background-position：