文章目錄
- 前言
- 一、京東移動端頁面
- 二、制作步驟
- 1.頁面整體框架
- 2.注意要點
- 總結
前言
在之前學了關于移動端的基礎知識，接下來我們就需要運用這些知識來進行實際應用，
上才藝！看案例！
一、京東移動端頁面
京東移動端的頁面基本就是如上圖
頁面有頂部的導航欄、搜索欄、主體欄里面分成三個部分進行設計，
二、制作步驟
1.頁面整體框架
代碼框架如圖展示：
2.注意要點
- 我們對于移動端頁面采用的是流式布局，代碼如下：
body {
width: 100%;
/* width：100%可以在320px-640px之間自由縮放 */
max-width: 640px;
min-width: 320px;
margin: 0 auto;
font-size: 14px;
font-family: -apple-system, 'Helvetica Neue', sans-serif;
color: #666;
line-height: 1.5;
background-color: #999;
height: 2000px;
}
- 對于頁面默認的一些效果我們需要清除，代碼如下：
/*點擊高亮我們需要清除清除 設定為transparent 完成透明*/
* {
-webkit-tap-highlight-color: transparent;
}
/*在移動端瀏覽器默認的外觀在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式*/
input {
-webkit-appearance: none;
}
/*禁用長按頁面時的彈出選單*/
img,
a {
-webkit-touch-callout: none;
}
- 頁面頂部的導航欄會在用戶往下翻的時候消失，而搜索欄會固定在頂部，所以我們就需要用到固定定位
代碼如下：
.search-wrap {
height: 44px;
position: fixed;
/* 用了固定定位的就要給寬度，再縮放頁面的時候也要給它最大最小寬度 */
width: 100%;
max-width: 640px;
min-width: 320px;
overflow: hidden;
/*由于中間有搜索欄會導致外邊距塌陷所以需要使用overflow*/
}
- 導航欄nav我們的搭建結構效果先是如下圖：
但是在制作中我們會出現外邊距塌陷問題所以我們需要給父盒子加一個overflo：hidden；
- 搜索欄中的放大鏡效果，是使用了精靈圖，在移動端使用精靈圖也需要二倍圖法則：
1.將整張圖都縮小兩倍
2.再測量坐標軸位置
3.精靈圖圖示也需要縮小為原來的一半
.sou {
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background: url(../images/jd-sprites.png) no-repeat -81px 0;
background-size: 200px ;
/*精靈圖中的放大鏡也縮小為原來的一半*/
}
- 當兩欄之間有空隙是因為圖片與圖片之間會有間隙，情況如下：
如下代碼解決：
img {
vertical-align: middle;
}
- 對于這個界面的設計，是可以點擊的三個鏈接的盒子，所以我們用3個div來裝鏈接
在HTML中結構搭建：
<div class="brand">
<div>
<a href="#">
<img src="upload/pic1.dpg" alt="">
</a>
</div>
<div>
<a href="#">
<img src="upload/pic2.dpg" alt="">
</a>
</div>
<div>
<a href="#">
<img src="upload/pic3.dpg" alt="">
</a>
</div>
</div>
在CSS中的代碼：
.brand {
border-radius: 10px 10px 0 0;
/* 盒子的圓角順序：左上角、右上角、左下角、右下角 */
overflow: hidden;
/* 將溢位盒子部分洗掉 */
}
.brand div {
float: left;
width: 33.333%;
}
.brand div img {
width: 100%;
}
總結
做完這個案例，我們不僅能將新知識運用到還能將舊知識復習一遍，所以，多做案例可以有效提升自己的打代碼能力！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/301315.html
標籤：其他
上一篇：Android開啟OTG功能/USB Host API功能
下一篇：Token在android的使用