1.1开发前的准备工作
1、配置开发环境（常用前端开发工具）
（1）sublime
（2）webstorm
（3）vscode
（4）hbuilder
（5）atom
2、建立项目文件夹（为了将与项目相关的文件放在一起，便于管理和以后的维护）
包括与项目相关的一些文件
（1）主页或是首页（index.html、default.html）
（2）css文件夹 （存放css文件）
公用样式css文件的常用命名：
[1] base.css
[2] global.css
（3）images文件夹 （用来放置网站中的所有的图片）
（4）js文件夹
（5）音频或是视频文件
3、样式初始化
我们的结构中的标签，都有默认的样式，在各个浏览器中的显示可能不尽相同。为了保证网站风格的统一，或是为了便于我们的开发或是维护，需要将所有的标签原来的样式清除，变成统一的样式风格，以便于我们的网站布局。
4、分析网站构成
做网站的时候，也有一个规范或是通例
（1）布局顺序一般从上到下、从左到右。
（2）在写页面的时候，一般优先考虑标准流的元素，其次才使用考虑浮动或是定位。
（3）在标准流元素中，宽高是最稳定的，其次才使用padding，最后margin（有上下边距合并，其他共享margin等问题）。
（4）标准流：
div、p等块级元素，独占一行。span、a、img、input等行内元素，可以一行显示多个，我们把这样的显示方式叫做标准流。Normal flow
（5）我们网站结构中任何标签，都可以开成是一个盒模型，都可以设置宽高，只是有的元素设置宽高，不起作用。
5、页面使用技术
（1）大页面基本上使用了懒加载显示。（每向下拉动一点，再依次向后台请求数据加载并渲染页面。）
1.2 Css样式书写位置
1、行内式
（1）直接卸载HTML标签内
<div style="width:400px;height: 300px;"></div>
2、内嵌式
（1）写在同页面的一对Style标签内
<style>
input{
outline-style: none;
}
.shortcut{
width:100px;
}
</style>
3、外链式
（1）从外部引入到当前的页面当中，真正的实现了结构与样式的相分离
<link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/index.css"/>
4、导入式@
1.3 网站的快捷图标
1、如何制作网站快捷图标
2、命名
favicon.ico（快捷图标）
--- 一般放项目文件夹的根目录下
.png)
-例：
3、引用：
（1）< link rel= "shortcut icon" href="favicon.ico" /> （2）< link rel= "shortcut icon" href="/favicon.ico" />
//如果favicon.ico在根目录下，一定不要加/
4、常用尺寸
一般16x16、32x32
1.4 项目文件夹的跟目录
1、打开项目文件夹的第一层，或是index.html所在的文件夹
1.5 火狐浏览器截图
（1）火狐浏览器页面截图功能，并可以保存完整页面图片到本地。
（如果没有：浏览器设置中-选附加组件-扩展-页面截图-安装）
.png)
.png)
1.6 通栏
.png)
一般类名起名： .shortcut（div样式）
通栏：常用一般报纸、杂志
通栏就是铺满整个屏幕，宽度100%，而面积不到整个页面的一半。
1.7 版心
因为我们屏幕设备的分辨率不一样，因此，显示网站的风格有可能不一样，为了提高用户的体验，将网站的显示的风格统一起来，因此需要给网站设置一个版心。
概念：
所谓版心就是页面的主要内容所在的区域，页面正中的位置。
/*公共类*/
.w {
/*版心 提取 */
width: 1210px;
margin: 0 auto;
}
1.8 FW 快捷键
1、 I ： 滴管工具，吸取颜色
2、 K ：切片工具，量取元素的宽度
3、 Z ：放大镜工具
4、 V ：移动工具
5、 A : 指针工具，选取
6、ctrl+ 滚轮放大 ： 浏览器放大
7、ctrl +0 ：浏览器恢复默认
FW：按住z，然后按住ctrl，鼠标选择需要放大的地方，放大看辅助线是否精确选中。
注意平时代码中，行高一定要加上px单位。
1.9 、小标签：一般起装饰作用
1、 I s em u del ins
--- 例：
.png)
<i><s>◇</s></i>
i 相当于相框， s 相当于i高度一半
（2）下拉框右侧的小三角形：
[1] 特殊符号，菱形。（使用溢出隐藏）
[2] ◇
/* i 的父元素 */
.shortcut_left{
position: relative;
}
.shortcut_left i{
width: 14px;
height: 7px;
/* 背景色用来调试查看元素位置 */
/*background: red;*/
/*display: inline-block;*/
position: absolute;
top:12px;
left: 65px;
/* 将溢出的部分隐藏 */
overflow: hidden;
}
.shortcut_left i s{
font: 400 14px/30px consolas;
position: absolute;
top: -14px;
left: 0;
}
1.10 Font 复合属性
Font-weight: bold, // 约等于700
Font-size/行高 //字体的大小/行高
Font-family //字体的样式
Font-style //字体风格
1.11 元素的实例化
给元素设置宽高之后，再给一个背景色或是边框，让此元素直观的显示出来，可以清晰的看出元素的状态和位置。
1.12 元素之间的转换
让行内元素设置宽高之后起作用：
1、转换成块级元素或是行内块元素。
2、让此元素拥有定位（绝对定位或是固定定位）。
3、浮动也可以让行内元素拥有宽高。
--- 例：
.png)
1.13 Webstorm 快捷键
1、ctrl+alt+l 代码格式化（让代码对齐）
2、ctrl+d 复制当前行的代码到下一行
3、ctrl+x 删除当前行
4、快速生成标签：
ul>li*9>a[herf=#]
+tab按键，快速生成：
<ul>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
<li><a href="" herf="#"></a></li>
</ul>
1.14 子绝父相
1、子元素是绝对定位的时候，父元素是一个相对定位，那么，父级元素是给子元素设置范围的作用。
2、如果三个元素之间的嵌套的话，就不一定非得是子绝父相，子绝父绝爷相。
3、定位，首先找离自己最近的父级元素进行的一个定位，如果父级元素没有定位的话，默认是以浏览器或是文档的左上角为准，如果父级元素有相对定位，或是绝对定位的时候，以父级元素的左上角为准。
1.15 权重的问题
标签 < 类 < ID < 行内 < !important
1 10 100 1000 无穷大
