前端页面编写必备（四）

1、页面的主要构成和编写

1、1 页面分析

1. 整体布局（三部分：head、content、foot），整个页面的主心骨就是div+css，为了布局和样式操作方便，使用背景色或者边框确定位置，在全部页面完成设置后，再删除这些设置。

2. 五个页面的共同部分，使用同一个css文件（共同样式设置）

3.在设置css时，通常都是使用类选择器class

4.辅助注释

 1、2 css重置

 网页链接：

https://meyerweb.com/eric/tools/css/reset/index.html

1、3  头部 

 1. 重点：div居中（外部设置div，定义宽度，设置margin：0 auto） 

 2.头部菜单内部文字使用无序列表+float：left 

 3.去掉列表前点：list-style：none；下划线/去掉：text-decoration：underline/none；  

 4.文字居中：div设置高度，文字line-height设置同样高度；

2、补充知识点

    1. box-sizing：border-box；/*实现下边框显示在盒子内*/

    2. vertical-align: top;/middle;/baseline;/bottom;/*实现图标和文字对齐*/

    3.  **：hover img{transform：scale(1.2)}+img{transition:all 500ms}/*实现图片放大*/

    4. text-shadow：1px 1px 2px black；文字阴影

   5.省略号

3、阿里图标（小人+微信+微博+qq等）

    （1）链接：http://www.iconfont.cn/

    （2）搜索目标-->添加入库-->添加项目-->font class->更新代码->复制代码-->html中link引入

        (3)具体图片使用步骤：

用link进行引入代码文件:

使用图标：（以下是代码例子）