整站搭建
准备元素
确定网站的结构：
将这个网站相关的文件都放在一个文本夹中
css:所有的css文件放在css文件夹中
js：所有的js文件都放在js文件夹中
index:网站的首页是index.html;
决定页面的开发方式：
从上到下依次编写：符合我们的认知。（选择）
从模块化的角度来分析：符合有经验的开发人员。
css的初始化：（css reset）
每个浏览器有自己不同解析标签的方式：为了能够让不同的浏览器显示的页面效果是一样的，我们需要清除浏览器的默认样式:
- {margin: 0; padding: 0;}//我们让你成为历史
==css的初始化：==
1.0清除标签的margin和padding:
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{
margin:0;
padding:0
}
2.0清除img的边框
img { border: 0};
3.0清除li标签之前的小点
ul,ol,li{list-style: none;}
4.0给页面设置一个统一的字体大小和颜色，还要设置body的背景颜色。
body {
font-size: 12px;
color: #434343;
font-family: "宋体";
background-color: “#ffffff”
}
5.0清除浮动
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
6.0a标签设置字体颜色，去掉下划线，以及a:hover
a {
color: #434343;
text-decoration: none;
}
a:hover {
color: green;
}
7.0设置浮动：
.fl {float: left;}
.fr {float: right;}
开始进行开发：
通栏：默认占浏览器的一整行。
版心：页面中用来存放内容的部分的固定宽度。
建站中常见问题
图文底边对其：
1.0如果文本与图片在同一行中，那么将来文字与图片的默认对齐方式是文字的基线对齐图片的底线。
vertical-align：设置文本与图片的对齐方式：
取值：
==middle==:将中线对齐
==vertical-align与display:inline-block一起使用效果最好。==
html中标签的嵌套规则：
行内元素：
块级元素：
标签之间是不能够随意嵌套的。
如果一定要嵌套，要满足下面几条：
1==.0行内元素只能包含行内元素
2.0块级元素可以包含所有的行内元素和部分块级元素。
3.0p标签，h标签都不能包含块级元素==
精灵图：
什么是精灵图：
就是将页面上一些较小的图片放在一张大图上。
为什么要有精灵图：
最早的时候网速十分有限，为了提升用户的体验我们会将一张大图分解成为多张小图来提高页面的打开速度。但是网速得到提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张小的图片放在一张大图上。从而==减轻服务器的压力==。而将多张小图放在一张大图上的操作就叫做精灵图，也可以叫做雪碧图，雪碧技术。==css sprite==.
精灵图的使用：
一张大的图片上有很多小的图片，那么如何将这个小的图片拿出来呢？
1.0如果我们需要的一张图片在精灵图，必须要了解这个图片的大小，以级在精灵图上的位置。
比如：我们要淘宝上面的阿里旺旺的图标，得到了宽高为60*60,得到图标所在的位置：0 * 133.
2.0在页面上将这个图片显示出来，在显示的时候一定要注意我们容器的大小一定要和这个图标的大小一样：
比如：我们要html页面上放了一个div，宽高为60*60
3.0将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移：
制作精灵图：
1.0精灵图必须==是一些小的图片==。
2.0精灵图的多个小图之间一定要==留有足够的间隙==
3.0精灵图的大小一定要大==于所有图片中最大的那个==
4.0完成精灵图以后一定要在精灵图的下方==留足够的空隙，方便将来再次添加其它的精灵图。==
5.0如果是页面上==一个像素的背景图片不要放在精灵图上面==
emmet语法：
emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
****html:****
********生成结构的快捷键********：
！+ tab,可以生成html的结构代码。
********生成****id****名和类名********
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
********生成同级元素：********
标签名+标签名+标签名 “+”tab
********生成子类标签********
标签名>子标签名>子标签名>子标签名+tab
********生成与子类标签的同级标签********
标签名>子标签名>子标签名>子标签名^^子标签名+tab
********带固定数量的标签****:****
ul>li*5+tab
********带有序号名称********
ul>li.abc$*3 + tab
********生成带有内容的标签：********
ul>li>a{item}*5
********生成带有属性的标签********
ul>li>a[href=”#”]
****css****
width:30px==>w30+tab