淘宝静态页面编写时收获

1、小图标的引入

favicon.ico必须与index.html放在同一个文件内
link rel="icon" href="favicon.ico"

2、图标ico格式

可以在http://www.bitbug.net/中进行转化

3、设置基础路径，即默认链接地址

<base target="_blank">
herf和target中的一个

4、CSS部分的@规则

常用的@规则
@charset 设置样式表编码
@import 导入其他样式文件
@meida 媒体查询
@font-face 自定义字体

5、自定义图标

通常在阿里巴巴矢量图标库中下载引用

6、以图换字

background: url(../images/logo.png) center no-repeat;
text-indent: -9999px;
overflow: hidden;

先把图片设置为背景，然后将首行文本缩进就行了

7、怪异盒模型

7.1、标准盒模型
总宽度=border(左右)+width+padding(左右)
总高度=border(上下)+height+padding(上下)
7.2、IE盒模型(怪异盒模型)
总宽度=width;
总高度=height；

8、h标签的应用场景

h标签有6个
h1-h6
搜索时爬虫根据标签优先级优先搜索
title
h1主标题
h2做副标题
h3板块标题
h4板块内内容标题
9、浮动的小技巧
可以第一个向左浮动第二个向右浮动
第三个不浮动让他自己上去。然后居中就行了。

9、CSS3中的渐变

background-image: linear-gradient(to right,#ff9000,#ff5000);
线性渐变 三类参数 方向(默认方向为从上到下) 起始颜色 结束颜色filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000',endColorstr='#ffff5000', GradientType=1);
/* ie8支持的滤镜 */

10、CSS Sprites

就是一个竖直长条上排一排的小图标，通过Y轴定位来显示其中的某一个

background: #ffe4dc url(../images/ico.png) 0 -572px no-repeat;
/* 小图标的定位 第一个为X轴，第二个为Y轴*/

11、IE滤镜

background-color: rgba(0,0,0,0.3);
/*支持情况：IE9+ */
background-color: #000\9;
filter: alpha(opacity=30)
/*针对IE6.7.8的情况滤镜   */

12、CSS HACK

13、图片垂直居中对齐

12、图片格式webp

webp为HTML专门研发的一种图片格式，可以大大的减少图片的大小，同时不会降低图片的画质。

13、词换行

word-break:keep-all
空格换行

14、图片居中

15、CSS HACK

16.css和html的学习就告一段落，后续在对之前的笔记及进行整理与补充，接下来开始学习JS。
冲冲冲！！！