欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-11 10:09:53
...
遇到的问题及新的知识

1.< &gt表示号
2.rgba(0,0,0,透明度)
opacity:0~1;
3.js中会用到的代码
4.a标签设置来绝对定位position:absolute可以设置宽高,效果和display:block一样
5.h标签有优化作用,写代码时可以加上


6.写HTML是常用的一些标签写法写法
1>

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


  • 5>

    我认为写HTML结构最重要的是分清每个板块间的位置关系,然后每个板块里面的内容开始之前,就要想好里面的标签之间的写法,
    如判断是否要加ul,li,a标签里面是否有图片,a标签里的文字是否要添加其他样式等等。思路要清晰。

    例子如图
    分析首先要一个大的div包裹,设置宽高和边框,然后由于有图片等,肯定会改变它们的位置关系,
    因此设置position:relative(子绝父相);而且一定居中,设line-height。
    其次,里面内容分4大块,左边图片,中间文字,右边>号,上面不规则图形,然后图片和文字有链接,可以这样写HTML


    .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.<记录学习>京东页面最后一天HTML以及css遇到的问题右边地图往下移动来是因为左边列表部分的问题,我想到来2种解决办法
    1.给包裹整个红色列表的加上一个高度,因为没有高度,默认来占据整个列表的高度,所以会占据页面的位置
    2.既然上面是因为占据来位置,还可以上它托标,通过定位让它脱离标准流
    列.xianm {
    width: 210px;
    height: 500px;
    background: #C8162
    position: absolute;

    }
    这里xianm是包裹这一段的div<记录学习>京东页面最后一天HTML以及css遇到的问题