sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > <记录学习>京东页面最后一天HTML以及css遇到的问题

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

作者:xuhongji发布时间:2020-09-17分类:Html浏览:137评论:0


导读:遇到的问题及新的知识1.<>表示号2.rgba(0,0,0,透明度)opacity:0~1;3.js中会用到的代码4.a标签设置来绝对定位pos...
遇到的问题及新的知识

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


手机、数码、京东通信


>


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

  • 2>
    3>
    4>

  • 5>

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

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



    >;
    0
    我的购物车


    .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是包裹这一段的p


    欢迎 发表评论:

    Html排行
    «   2021年1月   »
    123
    45678910
    11121314151617
    18192021222324
    25262728293031
    标签列表
    网站分类
    文章归档
    最近发表
    推荐文章