淘宝商城实战

一、划分结构方法

内容，颜色块，间距，边框

二、font复合属性

字体大小，行高   font-family，

（蓝色为unicode编码，可以表示字体。将中文转变成编码，便于前后交互）

三、行高

根据font-size大小，进行相应的乘法计算

通常使用数字，使用其他容易出现问题（字体重叠）

四、字体

五、清除浮动

到时候使用直接加class“clearfix”就好

六、预定义class

到时候书写直接用class引用，方便书写

七、样式模块化

使用@规则，用@import代替link实现样式模块化

1.

2.

3.

4.

七、网站标题

在title中书写标题名字，图标用favicon.ico。

并且图标要放在根目录中，在用link

八、base标签

将网站连接到a超链接中（使得点击度娘跳转到该网站链接）

target“blank”在新网页中打开

用base加target可以使所有的a元素在新页面中打开

注意base标签一个页面只能出现一个

九、自定义字体

字体名称，字体文件，format可以省略，但最好不要省，便于浏览器识别

十、h标题

h1主标题

h2副标题

h3板块标题

h4板块内小标题

h5，h6板块内又嵌套板块时使用

十一、>子元素，[ ]里面是属性，$数字

十二、box-sizing：border-box可以自动计算设置了padding后盒模型的宽高，使其不会撑开盒模型

十三、以图换字

后再样式里面用背景图

十四、线性渐变与滤镜

linear-qradient

1.方向

2.开始颜色

3.结束颜色

filter

1.启始颜色

2.结束颜色

3.渐变方向（1水平方向左右，2垂直方向上下）

两者结合实现渐变

十五、用vertical-align来调整文字与图标是否垂直居中对齐

十六、透明

十七、calc函数

注意符号前后都必须有空格

十八、过渡

transition：过度内容，过渡时间

十九、将图片变成单元格形式，就可以利用其性质进行居中排列

二十、弹性盒模型

1.水平方向居中

2.垂直方向居中

二十一、表格

单元格头部用th，其他用td

一个单元格的格式（tr表示一行，td表示每一个单元格）

二十二、利用空格换行

好啦！本周的分享就结束啦！我们下周同一时间同一地点不见不散！！！