html5--项目实战-仿天猫（移动端页面）

最新推荐文章于 2023-12-25 20:57:39 发布

weixin_33738578

最新推荐文章于 2023-12-25 20:57:39 发布

阅读量4.5k

点赞数 4

文章标签：移动开发前端 javascript ViewUI

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。

小技巧