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

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

程序员文章站 2022-03-25 23:50:42
...
培训学校
第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