使用工具：vscode,ps cs6,iconfont图标（）,ico图标转换（）
涉及语言：HTML,CSS
效果图：
步骤：
（1）新建images,css,fonts,js文件来存放对应代码
（2）将涉及图片放在images文件夹
（3）将normalize.css放在css文件夹
normalize.css有下面这几个目的：
- 保护有用的浏览器默认样式而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档来
（4）新建首页的网页index.html
（5）引入iconfont图片，生成iconfont.css
（5）新建base.css,完成首页的基础部分样式
（6）新建index.css,完成首页的核心部分样式
完整代码将存放在
完成要点
（1）确定版心
也就是确定网页主要内容的大体范围，在base.css生成公共类便于引用
该案例版心：
具体代码为：生成一个宽度为1190px，居中对齐的公共类
.w{
width: 1190px;
margin: 0 auto;
}
（2）取消默认样式
属性为具体说明时会才用默认样式，例，ul，li自带边距。会在写的过程中产生影响，正确做法是取消默认样式
不建议用
*{
padding：0；
margin：0；
}
因为该选择器的优先权重最小为（0,0,1），很容易被覆盖而不产生效果。
推荐在base.css中具体说明
该案例所涉及的为
ul,h1,input,p,button,h5,dt,dd,dl,span
{
padding: 0;
margin: 0;
}
input,button{
/* 取消默认边框 */
border: 0;
/* 取消轮廓边框*/
outline: none;
}
ul{
list-style: none;
}
/* 取消下划线 和基本样式*/
a{
text-decoration: none;
color: #999;
font-size: 12px;
}
（3）图片的基线对齐方式
img{
/* display: block; */
/* 图片会基线对齐，会存在小间隙，方法一，display:block 但有可能会掉下来*/
vertical-align: top;
/* 方法二，改变基线对齐方式，解决图片底侧有空白间隙问题 ,不能和display: block同在，因为是行内块元素*/
}
（4）文字的居中对齐
text-align:center;//水平居中
line-height:xxpx;//垂直居中，XX为对应的高度
（5）块级元素的居中对齐
采用定位的方法来避免计算和为防以后数据改变后要查询计算
父元素{
position:relative（主要）/absolute;
}
居中元素（子元素）{
//垂直居中
position:absolute;
top:50%;//为父高度
transform: translateY(-50%);//为自身高度
//水平居中
margin:0 auto;
}
（6）装饰用的 | 写法
1<span>|</span>
将其视为字体进行样式修改
2<div></div>
生成具体的类来实现
div{
height:10px;
width:1px;
background:#ccc;//因为本身里面没有字体元素,所以color无效
}
3设置为边框一侧（常用于多li处）
li{
border-right:1px solid #ccc;
}
（7）混乱布局
在XX范围内里面布局不是常规形式，一般用定位来布局
（8）阴影样式
在logo处有向上的阴影
box-shadow: 2px -10px 10px rgba(0, 0, 0, .3);//水平偏移，垂直偏移，阴影模糊程度，背景色
向上为-px，正常向下为+px
（9）关于a的大小和排列问题
在案例中a作为链接是以不同的形式伴随出现,如li，img，div等
因为a为行内元素，width和height不起作用。
所以关于a的大小修改方法为
1 display：block；
将a变成块级元素，因为会变成块级元素，所以多个a不会像以前一样水平排列，而会独占一行垂直排列
2 dissplay:inline-block;
将a变成行内块元素，同时具有行内和块级元素特性，即是可以对大小进行改变又能在同一行显示
（10）提升引擎搜索优化
例:在logo的链接处本身为一图片，但为提高搜索引擎权重，使logo包在<h1>内
<div class="logo">
<h1>
<!-- 提高权重,有利于搜索引擎优化 -->
<a href="#"></a>
</h1>
</div>
（11）版心内三列水平布局
1：
div1，div2，div3{
float:left;
}
然后用padding或margin来使它们之间产生空隙。但之间距离要精确计算，避免超过父宽度后面盒子被挤下去。或者最后盒子右边留有空隙，使父盒子看起来变短
2：
div1，div2{
float:left;
}
div3{
float:right;
}
使一二盒子向左浮动，三盒子向右浮动，只需计算第一条空隙，免除上面的烦恼。
（12）盒子内二列水平布局
1：使2个子盒子分别向左，向右浮动
2：使2个子盒子向左浮动，计算他们之间空隙
3：特殊情况特殊方法
在案例登录处：
左边图片，右边文字
/* 京东写法 *不左右浮动，只给文字盒子，图片采用定位*/
<div class="login-t">
Hi，欢迎来到京东！ <br/>
<!-- 有省略·效果 -->
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#" class="user-info"><img src="images/images/no_login.jpg" alt="" ></a>
</div>
生成一个盒子刚好包裹文字
//文字部分，这里作为父盒子让图片定位
.login-t{
width: 95px;
height: 60px;
line-height: 20px;
font-size: 12px;
white-space: nowrap;
/* 强制一行显示 */
overflow: hidden;
/* 超出隐藏 */
text-overflow: ellipsis;
/* 省略号 */
color: #666;
padding-left: 60px;
/* 这里把文字挤过来 */
position: relative;
}
//图片部分
.user-info{
position: absolute;
width: 50px;
height: 50px;
left: 0;
top: 0;
background: url("../images/images/sprite_userinfo@1x.png") no-repeat -70px 0;
/* 如果在父使用border-radius,而在子有显示的话，外加overflow:hidden */
}
（13）文字超出省略且具有省略号
white-space: nowrap;
/* 强制一行显示 */
overflow: hidden;
/* 超出隐藏 */
text-overflow: ellipsis;
/* 省略号 */
（14）精灵图
多个图标集合在一张图,提高搜索效率
//第一个图标
.expand a{
display: block;
margin: 0 auto;
margin-top: 30px;
width: 24px;
height: 24px;
background:url("../images/images/sprite_fs@1x.png") no-repeat 0 0 ;
}
//后续图标
.expand .a2{
background-position: -44px 0;
}
//只需改变精灵图里面的定位位置即可
（15）不在版心内的不固定位置，随页面移动一起移动
在本案例中为左侧广告栏随三列的第一列一起移动
在第一列内新建div来容纳广告栏图片，然后对齐采用定位方式
（16）图片出现的动画效果
在本案例中有移动到广告栏后其右侧出现图片
可以采用图片display:none;然后广告栏hover后图片display:block;
但该效果在一瞬间完成，不是很美观
使用css3的动画效果来改变
.ad:hover .ad-r{
width: 990px;//图片最终宽度
}
.ad-r{
position: absolute;
top: 0;
left: 250px;
z-index: 2;//防止被盖住
width: 0;
height: 480px;//为防止其按比例大小出现而不是从左到右出现，先设置好高端
/* 这个图片做动画,所以给它过渡效果 */
transition: all 0.8s;
}
（17）清除浮动带来的影响
1 子盒子浮动
父盒子{
overflow：hidden；
}
只要是父元素即可,不强求最最近的父元素
2 新建伪类元素
xx:after{
clear:both;
}
3 一般父盒子不给高度，让里面的子盒子撑开，所以不清楚浮动会有影响，
清除浮动是为了解决子有浮动而父没有高度造成的变异，给父亲高度即可不用清除浮动。
父盒子{
height:xx;
}
（18）转义字符的fontweight好像无效（待确定）
（19）加了绝对定位，浮动，固定定位的行内元素，直接给高度，不用转换
（20）盒子宽度计算
width为内容宽度，不是实际宽度
box-sizing:border-box;
使width:变成实际宽度包含padding,concent,border,不用担心给了padding,border撑开盒子宽度
（21）去掉最右边li右边边框
1 设置好ul宽度,使li排列异常隐藏
ul{
overflow：hidden;
}
2 倍数li去边框
expand li:nth-of-type(4n){
border-right: 0;
}
（23）ico图标获得方法
在对应官网网址后加上favicon.icon
如京东
下载该图片后到
对图片进行转换。
注意该图片后缀为ico是正确的，且要将它放在根目录而不是images文件夹内
记得在index.html中进行引用
（24）iconfont图标获得方法
打开
选择需要的图标进行下载
将iconfont.css放入css文件夹内，下载包其余文件放在fonts文件夹内
记得index.css内进行引用
其中除此方法外还有在线引用官网链接不用卸载,但是需要在服务器上进行,
在本地进行引用只会出现小方块。
有错误欢迎指出