<记录学习>（前三天)京东页面各种注意点

培训学校
第1到3天
先学习HTML
现在流行的是HTML5，目前学习的是HTML5规范。
（给有基础一定的人学习）
前三天学习的是京东页面的编写，和以前写的不同，页面看上去和自己写的一样，但老师讲的还是有很多不同，更加详细和细节。
1.程序员的规范写法很重要，要方便别人的观看，因此注释十分重要。
《注意点》
2.页面的布局先要看好，分成几块，头部和尾部有很多通用的，可以写在一个css文件里。
3.在用户主要访问的地方，可以写的尽可能美观，如"|"号，首部标签之间可以用<li></li>
包裹，然后再在里面编写width,height,background,如
<li class="dps"></li>；
.dps{
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px;
padding: 0
}
这里要注意，由于li可能有其他padding值，可能会继承，这里设了0。
在尾部可以简化直接写|.
4.以前写代码喜欢布局时喜欢设置height,但这样容易写死，开始写可以写height，但写完了注意去掉。
如果浮动了，可以在一段代码整体布局的地方加上伪元素清除浮动。即.clearfix:after{}

《编写页面笔记》
<1>三角符号即；<i><s>◇</s></i>
i和s都要拖标，即加上postion:absolute；i设宽高，设overflow:hidden;s设font就行
例.shortcut s{
font:400 15px/12px consolas;
position: absolute;
top: -6px;
right: 0;
}
.shortcut i{
width: 15px;
height: 8px;
position: absolute;
right:8px;
top: 12px;
overflow: hidden;
}
如果写的字体代码后面和前面要加上图片或三角以及其他，注意留出空间，如设置padding
<2>改变物体位置关系有三种display:inline-block；postion;float
<3>写不规则形状图标可以使用border-radius:0 0 0 0；为了不被写死，注意不要设宽，设padding
如.shopping-t{
position: absolute;
top: -6px;
right: 7px;
border-radius: 8px 7px 7px 0 ;
background: red;
color:#fff;
padding: 0 3px;
font:400 11px/15px normal;
}

<4>注意如果设置的代码随着页面的缩小随某个中间部分而改变，设置position

如<div class="slogen">
<span class="st sl1"><img src="data:images/service_items_1.png" alt=""/></span>
<span class="st sl2"><img src="data:images/service_items_2.png" alt=""/></span>
<span class="st sl3"><img src="data:images/service_items_3.png" alt=""/></span>
<span class="st sl4"><img src="data:images/service_items_4.png" alt=""/></span>
</div>
.slogen .st{
position: absolute;
left: 50%;
}
.slogen .sl1{
margin-left: -604px;
}
.slogen .sl2{
margin-left: -304px;
}
.slogen .sl4{
margin-left: 305px;
}

<5>a标签经常包裹img(如果图片点击跳转,这是一整张大图，小图或者要移动的图片还是用b,i等)，b,i标签等作为小图标和文字左右要添加的样式，注意b,i设display；
同时a设置b,i等作为背景图时，还可以在其中加上一段文字，方便网络爬虫优化
如<a href="#">京东</a>
a{
display: inline-block;
width: 270px;
height: 60px;
background: url("../images/logo-201305.png");
margin-top: 20px;
text-indent: -10000px;/*字远离图片*/
}
<6>如果设置某一段页面在其他页面之上，用z-index，但是如果这段页面浮动了，它必须设置positon：relative；因为它浮动会
脱离标准，就设置不了z-index