你的位置:首页 > 网页设计

[网页设计]记录学习(前三天)京东页面各种注意点


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