html5--項目實戰-仿天貓（移動端頁面）

總結：

1、標准搜索欄的做法：這里是彈性布局，放大鏡和小話筒是background img

2、手機尾部導航做法：這是一個個 li 標簽，每個li標簽占%25

3、手機尾部導航固定方法：相對定位外加距離底部為0

position: fixed;
bottom: 0;

4、標題欄做法：浮動布局，一部分左浮動，一部分右浮動

5、背景漸變效果：效果很好

background-image: linear-gradient(to bottom,#B0C4DE, #87CEFA);

6、文字陰影效果：淺色文字加深度陰影

text-shadow: 0 1px 1px rgba(0,0,0,0.8);

實例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>仿天貓</title>
 6     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0"/>
 7     <link rel="stylesheet" type="text/css" href="./css/index.css"/>
 8     <link rel="stylesheet" type="text/css" href="./css/gg.css"/>
 9 </head>
10 <body>
11      <header id="header" class="home">  
12          <figure class="fl ff">
13            <img src="image/fl.png" alt="分類" class="flp">
14            <figcaption>分&nbsp類</figcaption>
15         </figure>
16         <input type="text" class="ss" name="ss" placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp搜索雙11，好貨馬上到手">
17         <figure class="fr ff">
18            <img src="image/sys.png" alt="掃一掃" class="frp">
19            <figcaption>掃一掃</figcaption>   
20         </figure>    
21         
22 
23      </header>
24 
25      <section class="main">
26         <h3 class="title">行業精選</h3>
27             <figure class="sp sp1">
28                 <img src="image/index_img_i1.png" alt="">
29                 <figcaption>
30                    女裝<br>最新款式
31                 </figcaption>
32             </figure> 
33             <figure class="sp sp1">
34                 <img src="image/index_img_i9.png" alt="">
35                 <figcaption>
36                    運動<br>愛運動
37                 </figcaption>
38             </figure> 
39              <figure class="sp sp1">
40                 <img src="image/index_img_i3.png" alt="">
41                 <figcaption>
42                    女鞋<br>搶秋冬新款
43                 </figcaption>
44             </figure>
45             <figure class="sp sp1">
46                 <img src="image/index_img_i4.png" alt="">
47                 <figcaption>
48                    男裝<br>潮男搭配
49                 </figcaption>
50             </figure> 
51             <figure class="sp sp1">
52                 <img src="image/index_img_i5.png" alt="">
53                 <figcaption>
54                    箱包<br>包你滿意
55                 </figcaption>
56             </figure> 
57             <figure class="sp sp1">
58                 <img src="image/index_img_i6.png" alt="">
59                 <figcaption>
60                    男鞋<br>英倫休閑季
61                 </figcaption>
62             </figure> 
63      </section>
64 
65      <footer id="footer">
66      <!--     <nav> -->
67              <ul id="footer_list">
68             <li class="list_li home active">
69                 <a href="index.html" class="text">天貓</a>
70             </li>
71             <li class="list_li follow" >
72                 <a href="" class="text">關注</a>
73             </li>
74             <li class="list_li cart">
75                 <a href="buy.html" class="text">購物車</a>
76             </li>
77             <li class="list_li profile">
78                 <a href="" class="text">我</a>
79             </li>
80         </ul>
81     <!--      </nav> -->
82      </footer>
83 </body>
84 </html>

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>仿天貓</title>
 6     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0"/>
 7     <link rel="stylesheet" type="text/css" href="./css/buy.css"/>
 8     <link rel="stylesheet" type="text/css" href="./css/gg.css"/>
 9 </head>
10 <body>
11 <!--      <header id="header" class="home">  
12          <figure class="fl ff">
13            <img src="image/fl.png" alt="分類" class="flp">
14            <figcaption>分&nbsp類</figcaption>
15         </figure>
16         <input type="text" class="ss" name="ss" placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp搜索雙11，好貨馬上到手">
17         <figure class="fr ff">
18            <img src="image/sys.png" alt="掃一掃" class="frp">
19            <figcaption>掃一掃</figcaption>   
20         </figure>    
21      </header> -->
22 
23      <section class="main">
24         <div class="cart-top">
25             <h2 class="cart-fl">購物車</h2>
26             <img src="image/tm2.png" alt="" width="60">
27             <div class="cart-fr">已選2件</div>
28         </div>
29         <ul>
30             <li class="cart-item">
31                 <span class="pic">
32                     <img src="image/dbcd.jpg" alt="">
33                 </span>
34                 
35                 <span class="des">
36                    迷你移動電源<br>卡通大白充電寶 
37                 </span>
38                 <span class="price">
39                      ¥ 149.00
40                 </span>
41             </li>
42             <li class="cart-item">
43                 <span class="pic">
44                     <img src="image/dbcd.jpg" alt="">
45                 </span>
46                 <span class="des">
47                    迷你移動電源<br>卡通大白充電寶 
48                 </span>
49                 <span class="price">
50                      ¥ 149.00
51                 </span>
52             </li>
53             <li class="sum">
54                 共計¥298
55                 <input type="button" class="cart-button" value="結算">
56             </li>
57         </ul>
58      </section>
59 
60      <footer id="footer">
61      <!--     <nav> -->
62              <ul id="footer_list">
63             <li class="list_li home active">
64                 <a href="index.html" class="text">天貓</a>
65             </li>
66             <li class="list_li follow" >
67                 <a href="" class="text">關注</a>
68             </li>
69             <li class="list_li cart">
70                 <a href="buy.html" class="text">購物車</a>
71             </li>
72             <li class="list_li profile">
73                 <a href="" class="text">我</a>
74             </li>
75         </ul>
76     <!--      </nav> -->
77      </footer>
78 </body>
79 </html>

buy.html

  1 /*公共部分*/
  2 *{
  3     margin: 0;
  4     padding: 0;
  5 }
  6 .html,body,.wrap{
  7     height: 100%;
  8     width: 100%;
  9 }
 10 
 11 body{
 12     background: rgba(90,60,30,0.3);
 13 }
 14 
 15 ul{
 16     list-style-type: none;
 17 }
 18 
 19 a{
 20     text-decoration: none;
 21     color: #fff;
 22 }
 23 
 24 a:active{
 25     text-decoration: underline;
 26     color: #000;
 27 }
 28 /*header部分*/
 29 header{
 30     background:rgba(120,30,30,0.6);
 31     width: 100%;
 32     height: 50px;
 33     display: flex;
 34     font-size: 10px;
 35     color: #fff;
 36 }
 37 
 38 .ff{
 39     width: 40px;
 40     height: 50px;
 41 }
 42 
 43 .frp,.flp{
 44     height: 20px;
 45     width: 25px;
 46     margin: 8px 8px auto;
 47 }
 48 
 49 .ss{
 50     flex: 1;
 51     margin: 10px 0;
 52     height:30px;
 53     border-radius: 5px;
 54     background-image:url(../image/search.png), url(../image/ht.png); 
 55     background-size:20px,20px;
 56     background-repeat: no-repeat;
 57     background-position:left,right;
 58 }
 59 
 60 header figcaption{
 61     text-align: center;
 62 }
 63 /*footer部分*/
 64 footer{
 65     width: 100%;
 66     height: 50px;
 67     background:rgba(90,60,30,1); 
 68     position: fixed;
 69     bottom: 0;
 70 }
 71 
 72 #footer_list .list_li{
 73     float: left;
 74     height: 50px;
 75     line-height: 50px;
 76     width: 25%;
 77     font-size: 10px;
 78     text-align: center;
 79 }
 80 
 81 #footer_list .list_li:nth-child(1){
 82     background: url(../image/icon_tab_home_nomal.png) no-repeat;
 83     background-size: 22px 21px;
 84     background-position: top;
 85 }
 86 
 87 #footer_list .list_li:nth-child(1):active{
 88     background: url(../image/icon_tab_home_selected.png) no-repeat;
 89     background-size: 22px 21px;
 90     background-position: top;
 91 }
 92 
 93 #footer_list .list_li:nth-child(2){
 94     background: url(../image/icon_tab_featured_normal.png) no-repeat;
 95     background-size: 22px 21px;
 96     background-position: top;
 97 }
 98 
 99 #footer_list .list_li:nth-child(2):active{
100     background: url(../image/icon_tab_featured_selected.png) no-repeat;
101     background-size: 22px 21px;
102     background-position: top;
103 }
104 
105 #footer_list .list_li:nth-child(3){
106     background: url(../image/icon_tab_cart_normal.png) no-repeat;
107     background-size: 22px 21px;
108     background-position: top;
109 }
110 
111 #footer_list .list_li:nth-child(3):active{
112     background: url(../image/icon_tab_cart_selected.png) no-repeat;
113     background-size: 22px 21px;
114     background-position: top;
115 }
116 
117 #footer_list .list_li:nth-child(4){
118     background: url(../image/bottombtn0201.png) no-repeat;
119     background-size: 22px 21px;
120     background-position: top;
121 }
122 
123 #footer_list .list_li:nth-child(4):active{
124     background: url(../image/bottombtn0202.png) no-repeat;
125     background-size: 22px 21px;
126     background-position: top;
127 }

gg.css

 1 .title{
 2     background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);
 3      height: 30px;
 4     line-height: 30px;
 5 }
 6 
 7 .main{
 8     width: 320px;
 9     color:  #000;
10     background: #eee;
11 }
12 
13 .sp{
14      width: 50%;
15      float: left;
16      margin-top: 0.5em;
17      margin-bottom: 0.5em;
18      background: #a9a9a9; 
19      text-align: center;  
20 }

index.css

 1 .cart-top{
 2     height: 25px;
 3     line-height: 25px;
 4     background-image:
 5     linear-gradient(to bottom,#FFF0F5,#FF7F50 80%,#D2691E);
 6     padding: 8px;
 7     font-size: 14px;
 8     font-weight: bold;
 9     color: #eee;
10     text-shadow: 0 1px 1px rgba(0,0,0,0.8);
11     border-bottom: 1px solid #FF7F50;
12     border-radius: 3px 3px 0 0;
13 }
14 
15 .cart-fl{
16     display: inline-block;
17     font-size: 14px;
18 }
19 .cart-fr{
20     float: right;
21 }
22 /******購物車物品列表樣式********/
23 .cart-item{
24     line-height: 25px;
25     padding: 10px 10px 10px 15px;
26     font-weight: bold;
27     background-image: linear-gradient(to bottom,#FFC0CB,#FFF0F5);
28     overflow: hidden;
29 }
30 .pic{
31     float: left;
32     margin-bottom:5px;
33     margin-right:5px;
34 }
35 
36 .des{
37     float: left;
38     color: #eee;
39     text-shadow: 0 1px 1px rgba(0,0,0,0.8);
40 }
41 
42 .price{
43     float: right;
44     color: #eee;
45     text-shadow: 0 1px 1px rgba(0,0,0,0.8);
46 }
47 /*購物車總計樣式*/
48 .sum{
49     line-height: 32px;
50     padding: 10px 10px 10px 15px;
51     font-weight: bold;
52     background-image: linear-gradient(to bottom,#D3D3D3,#E0FFFF);
53 }
54 
55 /*購物車按鈕樣式*/
56 .cart-button{
57     float: right;
58 /*margin-left: 120px;*/
59     line-height: 29px;
60     padding: 0 25px;
61     color: white;
62     border-radius: 4px;
63     background-image: linear-gradient(to bottom,#B0C4DE, #87CEFA);
64 }

buy.css

學習要點

綜合運用我們之前學過的知識來構建一個移動端的web頁面。
了解測試工具
了解分別率有關的幾個基本概念
meta標簽viewport的使用
固定底部導航的辦法
css代碼的分離

了解幾個基本概念

物理分辨率、邏輯分辨率、倍率與像素密度

物理分辨率和邏輯分辨率，物理分辨率是硬件所支持的，邏輯分辨率是軟件可以達到的。
倍率與像素密度：以iPhone 5s為例，屏幕的分辨率是640x1136，倍率是2。瀏覽器會認為屏幕的分辨率是320x568，仍然是基准倍率的尺寸。所以在制作頁面時，只需要按照基准倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設計和開發頁面。
iPhone的屏幕尺寸各不相同，從市場占有率數據來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320x568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375x667。
都說Android碎片化嚴重，但它現在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經趨於統一了：360x640，只是倍率不同。
手機端網頁沒有統一標准了，比較流行的做法是按照iPhone5的尺寸來設計。倍率2，邏輯像素320x568。倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。

meta標簽viewport的使用

width、height 可以定義值，或者 device-width | device-height 設備的寬高。
如width=device-width：寬度定義為設備寬度
initial-scale 初始縮放比例，即頁面第一次 load 的時候縮放比例。這是一個浮點值，是頁面大小的一個乘數。例如，如果你設置初始縮放為“1.0”，那么，web頁面在展現的時候就會以target density分辨率的1:1來展現。如果你設置為“2.0”，那么這個頁面就會放大為2倍。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放，如果設置為yes則是允許用戶對其進行改變，反之為no。默認值是yes。

小技巧

清除浮動的技巧：消除子元素浮動對父元素背景/邊框/不能被子元素撐開的方法：

建議將LOGO放在h1標簽里面，方便搜索引擎抓取關鍵字。同時一個頁面只建議使用一個h1標簽。
父元素結尾處增加一空元素 div；並清除其浮動。缺點：如果布局復雜需要增加許多空標簽
在父元素定義overflow:hidden（瀏覽器會自動檢查浮動區域的高度，注.不必理會原理，知道用法即可。缺點：超出部分會被隱藏
利用偽類：after 父元素內容后增加空元素，並清除浮動。

將代碼重用部分比如header footer分離出來，其他需要的文件重復引用即可
圖片自適應:將圖片設為"display: block;max-width:100%"

未完，待續...........

代碼優化

優化代碼使更加符合HTML5大綱算法.步驟如下

查看頁面目錄結構，逐項修改有問題部分。
1. nav中添加標題並將它隱藏。

小技巧

當width為100%時。可用用min-width來規定一個最小寬度，防止縮放時變形，尤其是背景圖片。
將定位和外邊距結合讓圖片以中心點居中。
用opcity設置半透明遮罩層。
inline-block可以使用text-align 居中；
可以給background同時設置半透明漸變和背景圖片，來增加背景圖片的模糊度來突出背景上的文字。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 仿天貓移動端頁面 html5--項目實戰-仿360囧圖移動端h5直播項目|html5直播實戰開發|h5仿陌陌仿天貓淘寶的ShopNC好商城原生Android 客戶端源碼項目模仿天貓實戰【SSM版】——項目起步【項目實戰】天貓重復購買預測數據探索【項目實戰】天貓重復購買預測特征工程移動端html頁面優化釘釘h5項目實戰|仿釘釘聊天|h5移動端釘釘案例移動端通過攜帶token訪問html頁面