仿京东页面（笔记）
初始化：
不用通配符：加载慢
outline-style:没有外面的绿边框
textarea {
resize:none; } //不可改变输入框
img {
vertical-align:middle;
} //去掉图片低侧默认的三像素
i,s,em //这些小标签没有语义化，写在一些小的地方，比较简便
{
font-style:normal; //去掉倾斜等
text-decoration: none; //去掉下划线和删除线
}
.w 版心
i em
u ins
s del
权限：
标签 1
.nav(类选择器) 10
# kkk（ID选择器） 100
<div height=100> 1000
！important 1/0
如果浏览器里面全部，或者大部分的字体是一样的话，可以在body里面设置：
导航栏
1.先写注释
2.子元素会继承父元素的行高
3.行高和高度一致的时候，文字居中
4.字体：400 normal
700 bold
5.无论是 写html还是css 都要注释开始和结束：
6.小三角：
①为什么用： 加载速度快
②注意子绝父相：
绝对的不一样 一个是.send 一个是.fore
所以分开写
③ <i>有高宽，<s>没有 他们都是相对于nav-send 定位
④ <i>定位左右和上下， <s>在<i>里面， <s>只要定位上下
7.写css的时候，引用的标签不要超过3个
8.<!-- -->标签不是在sublime里面的
9.
这里的竖线有很多方法做，其中包括以前用的边框，这里用的是创造一个<li class="shu">标签
10.字体可以继承
11.在<span>里面， 用背景插入购物车的精灵图（设置宽和高 ）
banner和search：
初始化那里写了版心，这里就多次调用就行了
1.[ctrl]+[shift]+[space] 直接跳到下一行
2. 父元素没有设置高，被子元素撑开
3.text-indent:-5000px; 设置背景，然后用这个将文字移除
4.为什么 search-input 那里要设置宽高
5.
这里有两处细节需要注意
6. a链接和文本输入框 鼠标放上去的话 都是会变化的
但是 button不是 ，所以用一个cursor: pointer 来实现这一变化
7.父元素用了text-align:center 子元素的文字会居中对齐
8. search-car
search-car 里面
1.text-align:center
2.line-height的设置 使得子元素的文本上下左右读对其
3.border
这里用了 精灵图，文字，还有背景的定位
border-radium: 7px 7px 7px 0; 使其变成圆角
宽高的一半（圆胖的） 50% 0.5em（字号的一半）
标准流的文字不会被浮动遮挡（半托表）
9.一个盒子中的盒子要么都浮动，要么都不浮动
清除浮动的目的是：清除子盒子浮动而父盒子高度为0造成的影响：
额外标签法 添加一个额外的div标签 然后css里面写上clear:both；
overfloat: hidden 一般不用，离开父元素的区域后会被隐藏
.clearfix:after{
centent:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
双伪类：
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
第一种会增加不必要的标签
第二种有可能会隐藏内容 原理是它触动了一个BFC（block formating context ）的一个独立的渲染区域
第三种 应该尽量使用
第四种 是第三种的改良，但是不严谨
shortcut部分
1.又高度会被撑破，没有高度会被撑开
2.浮动的元素无论是否在同一个盒子都会相互影响 不要让浮动的盒子超出父盒子
3.既可以用div套div，也可以ul(ol)套li，再或者dl(definition list),dt,dd
4.div:hover a {} 鼠标放在div上面，a连接变色
5.保存图片的方法： 审查元素，右键在新页面中打开，右键保存
6.吸色的话可以用火狐或者chrome的插件，或者截图后用firework
footer部分
1.缩小时候图片位置跟着动：
用定位 left:50% 然后将每张图片用margin-left: -604px -302px 302px
2.
这里设置字体大小后，通过line-height来取代padding
3.什么时候用padding不用margin?
1.需要使用背景图的时候
2.会出现外边距合并或者margin塌陷的时候用padding
3.行内元素上下只能设置padding不能设置margin 行内元素没有上下margin
4.需要点击的时候
5.看需求 多数情况下 都可以用
4.加版心.w 和 clearfix
5.
main部分：
main-slide：
一整张图片：
float
清除浮动
里面用子绝父相放进去 用了left:50%+ margin-left:-66px调整
其次，这里使用了一个border-radius：50% 将其变为圆角
添加了一个current的类（其实也是为了后面js做准备）
然后设置背景色为红色
注意一个问题：
行内元素设置行高的时候用font: 700 16px/32px microsoft-yahei可能会出问题 比如a，span
解决方法：
1.继承行高
2.分开写 line-height，color，font-size
这里可以用ul以及table，但是table通常里面只是放文字
重点：
1.利用margin-top：-1px和margin-right:-1px 消去重复的边界
2.一行显示4个框框的方法：
将li的父盒子宽度设置大于四个盒子的大小，然后四个li就能float进去，然后再在某个有边框的元素里面使用overfloat:hidden样式 （京东的网页就是这么干的）
精灵图复习：
原理
1.width:25px height:25px;
2.background: url(../images/fly.png) no-repeat;
利用级联样式表的层叠性：
把原来的i（通用）里面的background的url保持不变，然后写一个权重更高的去覆盖（i .main-news-top-icon2）里面的background-positon
a连接要变成块级元素才能设置宽高
today部分
这个会转的钟用的就是css3的内容
父盒子高度为0，子盒子不占位置（浮动了），下面的东西就会上来
解决方法：给盒子设置高度，或者清除浮动
抠图
注意覆盖的问题
代码复用性和函数抽象
width：200% 父盒子宽度的2倍
子盒子继承父盒子的属性（包括宽度）
margin里面有auto的时候，要有宽度
层级的问题：
标准流<浮动<定位（加一个position:relative）
不管是标准流和浮动流：后面的层级大于前面的
另外，
1.元素设置了position属性后，这个定位元素的z-index就会自动生效，此时它的z-index值就是默认的auto，也就是0。
2.层级不取小数
3.层级一样，后面的盒子比前面的盒子的层级高
4.浮动或者标准流的盒子，后面的盒子比前面的层级高
父盒子高度为零，子盒子不占位置
实现方法：
1.float
2.position
用z-index的时候，记得前面加position:relative