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

培訓學校
第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