蘇寧首頁

一、準備工作

• 蘇寧網站首頁的開發尺寸右320px、360px、375px、384px、400ox、414px、480px、540px、720px、750px等

• 分為15等份

• 預設html字型為50px

1.1 公共common.less檔案製作

• 根據rem+媒體查詢製作

1.2 用@import匯入less檔案

• less：@import “”

• css：@import url()

1.3 設定body樣式

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, STHeiTi, sans-serif;
  background: #F2F2F2;
}
 

二、蘇寧首頁主要內容

2.1 top-banner區域

• 結構：div > (a > img) + a

• 注意插入圖片跟背景圖片都要重新設定上rem對應的數值

• 公式: 設計圖大小rem / 設計圖分成15份每份的大小

2.2 header結構佈局

• 結構: div > (div > a * 3 > img) +

2.3 search部分

• 結構: div > a + i + form

• 點選並不是在文字框輸入，而是跳到另外一個頁面

2.4 banner部分

• 結構：div > div > ul > li > a > img

• 思想: 用三圖與left的方法進行佈局

2.5 nav部分

• 結構: div > a > img + p