<记录学习>(前三天)京东页面各种注意点

php中文网
发布: 2016-09-07 12:58:06
原创
1625人浏览过

培训学校
第1到3天
先学习html
现在流行的是html5,目前学习的是html5规范。
(给有基础一定的人学习)
前三天学习的是京东页面的编写,和以前写的不同,页面看上去和自己写的一样,但老师讲的还是有很多不同,更加详细和细节。
1.程序员的规范写法很重要,要方便别人的观看,因此注释十分重要。
《注意点》
2.页面的布局先要看好,分成几块,头部和尾部有很多通用的,可以写在一个css文件里。
3.在用户主要访问的地方,可以写的尽可能美观,如"|"号,首部标签之间可以用


  • 包裹,然后再在里面编写width,height,background,如

  • .dps{
    width: 1px;
    height: 12px;
    background-color: #ddd;
    margin-top: 9px;
    padding: 0
    }
    这里要注意,由于li可能有其他padding值,可能会继承,这里设了0。
    在尾部可以简化直接写|.
    4.以前写代码喜欢布局时喜欢设置height,但这样容易写死,开始写可以写height,但写完了注意去掉。
    如果浮动了,可以在一段代码整体布局的地方加上伪元素清除浮动。即.clearfix:after{}

    《编写页面笔记》
    三角符号即;
    i和s都要拖标,即加上postion:absolute;i设宽高,设overflow:hidden;s设font就行
    例.shortcut s{
    font:400 15px/12px consolas;
    position: absolute;
    top: -6px;
    right: 0;
    }
    .shortcut i{
    width: 15px;
    height: 8px;
    position: absolute;
    right:8px;
    top: 12px;
    overflow: hidden;
    }
    如果写的字体代码后面和前面要加上图片或三角以及其他,注意留出空间,如设置padding
    改变物体位置关系有三种display:inline-block;postion;float
    写不规则形状图标可以使用border-radius:0 0 0 0;为了不被写死,注意不要设宽,设padding
    如.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;
    }


    注意如果设置的代码随着页面的缩小随某个中间部分而改变,设置position







    .slogen .st{
    position: absolute;
    left: 50%;
    }
    .slogen .sl1{
    margin-left: -604px;
    }
    .slogen .sl2{
    margin-left: -304px;
    }
    .slogen .sl4{
    margin-left: 305px;
    }

    a标签经常包裹img(如果图片点击跳转,这是一整张大图,小图或者要移动的图片还是用b,i等),b,i标签等作为小图标和文字左右要添加的样式,注意b,i设display;
    同时a设置b,i等作为背景图时,还可以在其中加上一段文字,方便网络爬虫优化
    京东
    a{
    display: inline-block;
    width: 270px;
    height: 60px;
    background: url("../images/logo-201305.png");
    margin-top: 20px;
    text-indent: -10000px;/*字远离图片*/
    }
    如果设置某一段页面在其他页面之上,用z-index,但是如果这段页面浮动了,它必须设置positon:relative;因为它浮动会
    脱离标准,就设置不了z-index

  • 京东
    京东

    京东app是一款移动购物软件,具有商品搜索/浏览、评论查阅、商品购买、在线支付/货到付款、订单查询、物流跟踪、晒单/评价、返修退换货等功能,为您打造简单、快乐的生活体验。有需要的小伙伴快来保存下载体验吧!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号