移動端購物首頁頁面中搜索商品導航輪播圖設計

首先定義搜索功能和輪播圖的結構佈局，代碼如下：

然後在index.css文件中新增以下樣式定義：

除了使用rem為單位進行佈局外，搜索的3個部分使用左浮動的方式實現3div的同行展示。頁面的設計寬度為320px。字體大小為20px，通過計算，定義的屏幕寬度一致的容器則需要樣式屬性width寬度為16rem。所以搜索Logo、搜索文本框和搜索按鈕3個部分的寬度定義分別為1.7rem、12rem和2.3rem，加起來正與16rem相符。詳細的計算可以儘量避免佈局上的偏差。

商品分類導航和輪播圖容器使用了ul列表一樣，商品分類導航也使用ul類進行佈局定位：

增加商品分類導航樣式如下：

/*商品分類導航 start*/

.nav {

width: 100%;

height: 6.5rem;

background: #fff;

margin-top: 0rem;

margin-bottom: 0rem;

}

.nav ul {

width: 100%;

display: block;

float: left;

}

.nav ul li {

float: left;

width: 3.2rem;

height: 3.2rem;

background: #fff;

}

.nav ul li span {

font-size: 0.5rem;

text-align: center;

display: block;

margin: 0 auto;

}

.nav img {

width: 2.2rem;

display: block;

margin: .2rem auto;

}

/*商品分類導航 end*/