<记录学习>京东页面最后一天HTML以及css遇到的问题
时间：2021-07-01 10:21:17
帮助过：14人阅读
遇到的问题及新的知识
1.<https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/>表示号2.rgba(0,0,0,透明度）https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/opacity:0~1；3.js中会用到的代码4.a标签设置来绝对定位position:absolute可以设置宽高，效果和display:block一样5.h标签有优化作用，写代码时可以加上如https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/手机、数码、京东通信
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/>https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/
6.写HTML是常用的一些标签写法写法
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/1>https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/2>
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/3>
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/4>https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/5>https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/
我认为写HTML结构最重要的是分清每个板块间的位置关系，然后每个板块里面的内容开始之前，就要想好里面的标签之间的写法，如判断是否要加ul,li,a标签里面是否有图片，a标签里的文字是否要添加其他样式等等。思路要清晰。
例子如图分析首先要一个大的div包裹，设置宽高和边框，然后由于有图片等，肯定会改变它们的位置关系，因此设置position:relative（子绝父相）；而且一定居中，设line-height。其次，里面内容分4大块，左边图片，中间文字，右边>号，上面不规则图形，然后图片和文字有链接，可以这样写HTMLhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/>；https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/我的购物车
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/.shoppinghttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/{
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/width:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/139px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/height:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/34px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/margin:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/25pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/65pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/background:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/#F9F9F9;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/border:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/1pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/solidhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/#DFDFDF;;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/line-height:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/34px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/position:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/relative;
}
.shopping-lhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/{
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/display:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/inline-block;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/width:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/17px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/height:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/13px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/background:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/url("../images/jd2015img.png")https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/no-repeathttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/-59px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/margin:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/8pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/20px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/vertical-align:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/middle;
}
.shopping-r{
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/margin-right:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/16px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/font-size:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/15px;
}
.shopping-t{
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/position:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/absolute;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/top:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/-6px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/right:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/7px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/border-radius:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/8pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/7pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/7pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/background:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/red;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/color:#fff;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/padding:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/0https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/3px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/font:400https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/11px/15pxhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/normal;
}
7.
右边地图往下移动来是因为左边列表部分的问题，我想到来2种解决办法
1.给包裹整个红色列表的加上一个高度，因为没有高度，默认来占据整个列表的高度，所以会占据页面的位置
2.既然上面是因为占据来位置，还可以上它托标，通过定位让它脱离标准流
列.xianmhttps://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/{
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/width:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/210px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/height:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/500px;
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/background:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/#C8162
https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/position:https://img.gxlcms.com//Uploads-s/new/2019-09-27-201927/absolute;
}这里xianm是包裹这一段的div
