好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

培训学校
第1到3天
先学习HTML
现在流行的是HTML5,目前学习的是HTML5规范。
(给有基础一定的人学习)
前三天学习的是京东页面的编写,和以前写的不同,页面看上去和自己写的一样,但老师讲的还是有很多不同,更加详细和细节。
1.程序员的规范写法很重要,要方便别人的观看,因此注释十分重要。
《注意点》
2.页面的布局先要看好,分成几块,头部和尾部有很多通用的,可以写在一个css文件里。
3.在用户主要访问的地方,可以写的尽可能美观,如"|"号,首部标签之间可以用
包裹,然后再在里面编写width,height,background,如

.dps{
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px;
padding: 0
}
这里要注意,由于li可能有其他padding值,可能会继承,这里设了0。
在尾部可以简化直接写|.
4.以前写代码喜欢布局时喜欢设置height,但这样容易写死,开始写可以写height,但写完了注意去掉。
如果浮动了,可以在一段代码整体布局的地方加上伪元素清除浮动。即.clearfix:after{}

《编写页面笔记》
三角符号即; ◇
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
改变物体位置关系有三种display:inline-block;postion;float
写不规则形状图标可以使用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;
}


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






查看更多关于<记录学习>(前三天)京东页面各种注意点的详细内容...

  阅读:34次