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

标签：

遇到的问题及新的知识

1.&lt; &gt表示< >号
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=" " /></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">&gt；</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("../images/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.右边地图往下移动来是因为左边列表部分的问题，我想到来2种解决办法
1.给包裹整个红色列表的加上一个高度，因为没有高度，默认来占据整个列表的高度，所以会占据页面的位置
2.既然上面是因为占据来位置，还可以上它托标，通过定位让它脱离标准流
列.xianm {
width: 210px;
height: 500px;
background: #C8162
position: absolute;

}
这里xianm是包裹这一段的div

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

标签：

原文地址：http://www.cnblogs.com/yipeng1992-111/p/5858119.html