当前位置:Gxlcms > html代码 > <记录学习>(前三天)京东页面各种注意点

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

时间:2021-07-01 10:21:17 帮助过:56人阅读

培训学校
第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{}

    《编写页面笔记》
    <1>三角符号即;
    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
    <2>改变物体位置关系有三种display:inline-block;postion;float
    <3>写不规则形状图标可以使用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;
    }


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







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

    <5>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;/*字远离图片*/
    }
    <6>如果设置某一段页面在其他页面之上,用z-index,但是如果这段页面浮动了,它必须设置positon:relative;因为它浮动会
    脱离标准,就设置不了z-index

    人气教程排行