<記錄學習>(前三天)京東頁面各種注意點

WBOY
發布: 2016-09-07 12:58:06
原創
1374 人瀏覽過

培訓學校
第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; 15px;
    height: 8px;
    position: absolute;
    right:8px;
    top: 12px;
    overflow: hidden;
    }
    如果寫的字體後面和前面要留出圖碼以及 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 ;
    border-radius: 8px 7px 7px 0 ;
    background: red; ;
    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; : 305px;
    }




    a標籤經常包裹img(如果圖片點擊跳轉,這是一整張大圖,小圖或者要移動的圖片還是用b,i等),b,i標籤等作為小圖標和文字左右要加入的樣式,注意b,i設display; 同時a設定b,i等作為背景圖時,還可以在其中加上一段文字,方便網絡爬蟲優化

    京東 a> a{

    display: inline-block;

    width: 270px;
    height: 60px;
    background: url("../images/logo-201305.png");
    . -indent: -10000px;/*字遠離圖片*/
    }
    如果設定某一段頁面在其他頁面之上,用z-index,但是如果這段頁面浮動了,它必須設定positon:relative;因為它浮動會
    脫離標準,就設定不了z-index





  • 來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板