快捷搜索:

<记录学习>京东页面最后一天HTML以及css遇到的问

相遇的标题及新的知识

1.< >表示< >号
2.rgba(0,0,0,透明度)
opacity:0~1;
3.<a href="javascript:void(0);">js中会用到的代码
4.a标签设置来相对定位position:absolute能够设置宽高,效果和display:block一样
5.h标签有优化职能,写代码时方可增多
如 <div class="cate-item">
<h3><a href="#">手提式有线电话机、数码、京东通讯</a></h3>
<i>></i>
</div>
6.写HTML是常用的局地标签写法写法
1> <li><a href="#"></li></a>
2><a href="#"><img src=" " alt=""/></a>
3><a href="#"><i class=" "></i></a>
4> <li><a href="#"><i class=" "></i><span></span></a></li>
5><div> <h3><a href="#"></a></h3> <i></i> </div>

本身觉着写HTML结构最注重的是分清每一种板块间的职位关系,然后每一种板块里面包车型地铁原委开头以前,就要想好内部的标签之间的写法,
如判别是还是不是要加ul,li,a标签里面是还是不是有图表,a标签里的文字是或不是要增加别的样式等等。思路要明晰。

事比如图
解析首先要一个大的div包裹,设置宽高和边框,然后由于有图表等,断定会变动它们的职务关系,
故而设置position:relative(子绝父相);而且一定居中,设line-height。
说不上,里面内容分4大块,侧边图片,中间文字,左边>号,上面不准绳图形,然后图片和文字有链接,能够如此写HTML
<div class="shopping fr">
<a href="#"><i class="shopping-l"></i></a>
<i class="shopping-r fr">>;</i>
<i class="shopping-t">0</i>
<a href="#">作者的购物车</a>
</div>
.shopping {
width: 139px;
height: 34px;
margin: 25px 65px 0 0 ;
background: #F9F9F9;
border: 1px solid #DFDFDF;;
line-height: 34px;
position: relative;
}
.shopping-l {
display: inline-block;
width: 17px;
height: 13px;
background: url("..jd2015img.png") no-repeat 0 -59px;
margin: 0 8px 0 20px;
vertical-align: middle;
}
.shopping-r{
margin-right: 16px;
font-size: 15px;
}
.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;
}
7.图片 1左边地图往下移动来是因为左侧列表部分的标题,笔者想到来2种消除办法
1.给包裹整个土黑列表的丰富壹在那之中度,因为从没惊人,暗许来攻下整个列表的高度,所以会占有页面包车型大巴任务
2.既然上边是因为占用来地点,还足以上它托标,通过牢固让它退出标准流
列.xianm {
width: 210px;
height: 500px;
background: #C8162
position: absolute;

}
此处xianm是包装这一段的div图片 2

本文由加拿大28走势图发布于数码,转载请注明出处:<记录学习>京东页面最后一天HTML以及css遇到的问

您可能还会对下面的文章感兴趣: