一、网页布局思路
通过盒子模型，知道大部分html标签是一个盒子；
通过css浮动，定位，可以让每个盒子排列成网页；
一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法；
1、网页布局准则
多个块级元素纵向排列找标准流；
多个块级元素横向排列找浮动；
为了约束浮动元素的位置，网页布局一般采用：
1、先用标准流的父元素上下排列，之后内部子元素采用浮动左右排列；
2、一个盒子浮动了，他的兄弟元素也浮动；
3、浮动的盒子只会影响浮动盒子后面的标准流，不影响前面的；
1). 标准流
可以让盒子上下排列 或者 左右排列，垂直的块级盒子显示就用标准流布局；
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子， 多个块级盒子水平显示就用浮动布局；
3). 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。如果元素自由在某个盒子内移动就用定位布局；
2、层级
通过z-index属性可以用来设置元素的层级，表示盒子摆放的前后次序；
-
-
-
层级越高，越优先显示；
-
只有元素开启了定位，z-index属性才可以使用；
-
如果定位元素层级一样，则结构上 下面元素会盖住上面；
-
父元素的层级再高，也不会盖住子元素；
-
-
3、布局流程
为了提高网页制作的效率，布局时通常有以下的整体思路：
-
-
-
必须确定页面的版心（可视区），测量可知；
-
分析页面中的行模块，以及每个行模块中的列模块，页面布局的第一准则；
-
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则；
-
制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要，所以，先理清布局结构，在写代码尤为重要，需要积累；
-
然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
-
-
注意：去掉列表默认的样式
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }
4、常见布局技巧
巧妙利用一个技术更快更好的布局：
1、margin负值的运用
2、文字围绕浮动元素
3、行内块的巧妙运用
4、CSS三角强化
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）
<style>
ul li {
float: left;
list-style: none;
150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
position: relative;
border: 1px solid blue;
/* 如果li有定位，则利用z-index提高层级 */
z-index: 1;
}
</style>
案例：盒子居中
<style>
* {
margin: 0;
padding: 0;
}
.box {
300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
120px;
height: 60px;
margin-right: 5px;
}
.pic img {
100%
}
</style>
<body>
<div class="box">
<div class="pic">
<img src="" alt="">
</div>
</div>
</style>
二、CSS属性书写顺序
1、布局定位属性：display /position /float /clear /visibility /overflow
2、自身属性：width /height /margin /padding /border /background
3、文本属性：color /font /text-decoration /text-align /vertical-align /white-space /break-word
4、其他属性（CSS3）：content cursor /border-radius /box-shawdow /text-shadow /
background：linear-gradient...
.jdc {
display: block;
position: relative;
float: left;
100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial,"Helvetica Neue",Helvetica,san-serif;
color: #333;
background: rgba(0,0,0,.5);
border-radius: 10px;
}
三、CSS高级技巧
3.1、精灵图
1、由来：
一个网页中往往会应用很多小的背景图像作为修饰，当页面中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大的降低页面的加载速度；
2、目的：为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，提高了访问效率和用户体验，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧图）
3、核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要请求一次就可以了；
4、使用精灵图核心：
（1）精灵技术主要针对于背景图片，就是把多个小背景图片整合到一张大图片中，这个大图片也称为 sprites 精灵图 或者 雪碧图 ；
（2）移动背景图片位置， 主要借助于背景位置来实现---background-position ；移动的距离就是这个目标图片的 x 和 y 坐标，注意网页中的坐标有所不同 ；
（3）一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴往下是正值，同理。）
5、优点：
-
-
-
将多个图片整合为一个，浏览器只发送一次请求，就可以同时加载多个图片；提高了访问效率和用户体验；
-
减小了图片的总大小，提高请求的速度，增加了用户体验；
-
-
6、缺点：
-
-
-
图片文件还是比较大的。
-
图片本身放大和缩小会失真。
-
一旦图片制作完毕想要更换非常复杂。
-
-
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
3.2、字体图标
1、特点：字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
-
-
-
轻量级：一个字体图标要比一系列的图像都小，一但字体加载了，图标就会马上渲染出来，减少服务器请求；
-
灵活性：本质是文字，可以随意改变颜色，产生阴影，透明效果，旋转灯；
-
兼容性：几乎支持所有的浏览器；
-
-
注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化；
2、使用场景： 主要用于显示网页中通用、常用的一些小图标。
-
-
-
结构和样式比较简单的小图标，就用字体图标；
-
结构和样式复杂的小图片，就用精灵图；
-
-
3、字体图标的下载：
（1） icomoon 字库 http://icomoon.io 国外服务器，打开网速较慢。
（2）阿里 iconfont 字库 http://www.iconfont.cn/ 包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是，免费
（3）awesome图标
4、字体图标的引入：
（1）icomoon文件解压后，将fonts文件夹复制到页面根目录下；
（2）在 CSS 样式中全局声明字体： 把这些字体文件通过css（style.css）引入到我们页面中。 （注意字体文件路径的问题 ）
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
（3）html标签内添加小图标
span {
content:'';
font-family:"icomoon";/* 这里面的字体需和 @font-face 里面的一致 */
}
原来的文件夹不要删，可以追加字体图标，在select.json里，直接生成最新的字体图标；
四、CSS 初始化
京东初始化，从 * ｛margin:0;padding:0｝开始；
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容；
简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）
比如：
黑体 9ED14F53
宋体 5B8B4F53
微软雅黑 5FAE8F6F96C59ED1
五、品优购项目规划
假如需要设计一款网页，工作流程如下：
用户提需求——美工PS设置原型图和效果图——前端 利用代码链接 做成静态网页（代码链接）——后台工程师改为动态网页（JSP动态服务器代码）；
流程
-
-
-
品优购项目整体介绍 （制作首页、列表页、注册页三个页面） 电商类网站
-
品优购项目学习目的 （里面包含技术较多，能极大锻炼我们布局技术）
-
开发工具以及技术栈 （切图用ps， 代码用Vscode，测试用chrome， 大量使用HTML5+CSS3）
-
-
1、品优购项目搭建工作
1、 需要创建如下文件夹：
| 名称 | 说明 |
|---|---|
| 项目文件夹 | shoping |
| 样式类图片文件夹，不经常更换 | images |
| 样式文件夹 | css |
| 产品类图片文件夹，经常更换 | upload |
| 字体类文件夹 | fonts |
| 脚本文件夹 | js |
| 名称 | 说明 |
|---|---|
| 首页 | index.html |
| css初始化样式文件 | base.css |
| css公共样式文件 | common.css |
有些网站初始化的不太提倡 * { margin: 0; padding: 0; }
比如新浪：
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
2、模块化开发
所谓的模块化：将一个项目按照功能划分， 一个功能一个模块，互不影响 且重复使用；
代码也如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用;
这里最典型的应用就是 common.css 公共样式。写好一个样式，其余的页面用到这些相同的样式;
common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
3、网站 favicon 图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。 目前主要的浏览器都支持 favicon.ico 图标。
-
-
-
制作favicon图标
-
favicon图标放到网站根目录下
-
HTML页面引入favicon图标
-
-
1、制作favicon图标
（1）把品优购图标切成 png 图片。
（2）把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/
2、favicon图标放到网站根目录下
3、 HTML页面引入favicon图标
（1）在html 页面里面的 <head> </head>元素之间引入代码。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
4、网站 TDK 三大标签SEO优化
SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索 引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提 高网站的知名度。 页面必须有三个标签用来符合 SEO 优化。
有SEO专门人员，标签由我们写；
网站TDK三大标签SEO优化
1、title 网站标题
title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判 断点。
建议：网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
例如：
l 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
l 小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
2、description 网站说明
简要说明我们网站主要是做什么的。
我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网 作为…”、“电话：010…”之类语句。
例如：
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、 家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物 体验!" />
3、keywords 关键字
keywords 是页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式。
例如：
<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配 件,手表,存储卡,京东" />
对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备
网站的首页一般都是使用 index 命名，比如 index.html 或者 index.php 。
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。
4、LOGO SEO 优化
1、 logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2、 h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
3、为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。
l 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
l 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。
4、最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了
5、footer 底部制作
l footer 页面底部盒子通栏给一个高度和灰色的背景
l footer 里面有一个大的版心
l 版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思
l 版心里面包含 2 号盒子，mod_help 是帮助模块
l 版心里面包含 3 号盒子，mod_copyright 是版权模块
6、main 主体模块制作
以前书写的就是模块化中的公共部分。
main 主体模块是 index 里面专有的，注意需要新的样式文件 index.css 。
l main 盒子宽度为 980 像素，位置距离左边 220px (margin-left ) ，给高度就不用清除浮动
l main 里面包含左侧盒子，左浮动，focus 焦点图模块
l main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块
7、推荐模块制作
l 大盒子 recom 推荐模块 recommend
l 里面包含 2 个盒子， 浮动即可
l 1 号盒子 recom_hd
l 2 号盒子 recom_bd ，注意里面的小竖线
8、楼层区 floor 制作
注意这个 floor ，不要给高度，内容有多少，算多少
第一楼是家用电器模块： 里面包含两个盒子
l 1 号盒子 box_hd，给一个高度，有个下边框，里面分为左右 2 个盒子
l 2 号盒子 box_bd，不要给高度
① box_hd 模块
l 有高度可以不用清除浮动
l 左边 h3 ，盒子左浮动
l 右边 tab_list ，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做
② box_bd 模块
l 根据 tab 切换的原理， tab_content 里面包含 内容部分。 这个内容可以通过ul布局
l 分为 5 个大列，列的宽度不一致
9、品优购列表页制作
（1） 品优购列表页制作准备工作
1. 列表页面是新的页面，我们需要新建页面文件 list.html 。
2. 因为列表页的*头部*和*底部*基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
3. 头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。
4. 需要新的 list.css 样式文件，这是列表页专门的样式文件。
（2） 列表页 header 和 nav 修改
l 秒杀盒子 sk（ second kill ） 定位即可
l 1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
l 2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
（3） 列表页主体 sk _container
l 1 号盒子 sk _container 给宽度 1200，不要给高度
l 2 号盒子 sk_hd ，插入图片即可
l 3 号盒子 sk_bd ，里面包含很多的 ul 和 li
10、品优购注册页制作
（1） 注册页类名命名
注册页面： register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。
（2）注册页布局
（3）registerarea 布局