仿天貓移動端頁面

一.學習要點

1.綜合運用我們之前學過的知識來構建一個移動端的web頁面

2.了解分辨率有關的幾個基本概念

3.meta標簽viewport的使用

 

二.了解幾個基本概念

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

1.物理分辨率和邏輯分辨率，物理分辨率是硬件所支持的，邏輯分辨率是軟件可以達到的。

2.倍率與像素密度：以iPhone 5s為例，屏幕的分辨率是640*1136，倍率是2。瀏覽器會認為屏幕的分辨率是320*568，仍然是基准倍率的尺寸。所以在制作頁面時，只需要按照基准倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設計和開發頁面。

3.iPhone的屏幕尺寸各不相同，從市場占有率數據來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320*568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375*667。

4.都說Android碎片化嚴重，但它現在反而比IOS好處理。因為如今的Android屏幕邏輯像素已經趨於統一了：360*640，只是倍率不同。

5.手機端網頁沒有統一標准了，比較流行的做法是按照iPhone5的尺寸來設計，倍率2，邏輯像素320*568.倍率2的屏幕無論在IOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。

 

三.meta標簽viewport

1.width、height可以定義值，或者device-width | device-height 設備的寬高。

E: width=device-width ——寬度定義為設備寬度

2.initial-scale 初始縮放比例，即頁面第一次load的時候縮放比例。這是一個浮點值，是頁面大小的一個乘數。

E: 如果你設置初始縮放為“1.0”，那么，web頁面在展現的時候就會以target density分辨率的   　　1：1來展現。如果你設置為“2.0”，那么這個頁面就會放大為2倍。

3.maximum-scale：允許用戶縮放到的最大比例。

4.maximum-scale：允許用戶縮放到的最小比例。

5.user-scalable：用戶是否可以手動縮放，如果設置為yes則是允許用戶對其進行改變，反之為no，默認值是yes。

 

四.收獲

1.display:flex彈性盒子

2.overflow:hidden 超出隱藏

3.background可以同時添加兩張圖片，同時設置浮動和大小

background:url(../img/15.PNG),url(../img/2.PNG);
    background-repeat: no-repeat;
    background-size:20px,20px;
    background-position: left,right;

4.flex:1;設置？一個數字，規定項目將相對於其他靈活的項目進行擴展的量。

flex知識：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

5.border-radius:5px;設置圓角

6. :nthchild(n)：見css選擇器

7.背景顏色線性漸變

background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);

8.給字體加陰影

/*給字體加陰影 x y z*/
    text-shadow:0 1px 1px rgba(0,0,0,0.8);

 

五.代碼總

公共樣式style.css

/*公共部分*/
*{margin:0;padding:0;}
.html,body,.wrap{height:100%;height:100px;}
body{background:rgba(90,60,30,0.3);}
ul{list-style-type:none;}
a{text-decoration:none;color:white;}
a:active{text-decoration:underline;color:black;}

/*header部分*/
#header{background:rgba(120,30,30,0.6);width:100%;height:50px;display:flex;
    font-size:10px;color:white;}
.home{}
.ff{width:40px;height:50px;}
.f1{}
.f2{}
.f1p,.f2p{height:20px;width:25px;margin:8px 8px auto;}

.ss{
    flex:1;margin:10px 0px;height:30px;border-radius:5px;
    background:url(../img/15.PNG),url(../img/2.PNG);
    background-repeat: no-repeat;
    background-size:20px,20px;
    background-position: left,right;
}

header figcaption{
    text-align:center;
}

/*底部*/
#footer{
    width:100%;
    height:50px;
    background:rgba(90,60,30,1);
    position:fixed;
    bottom:0;
}

#footer_list .list_li{
    float:left;
    height:50px;
    line-height:50px;
    width:25%;
    font-size:10px;
    text-align:center;
}

/*最常見是通過javascript來控制它*/
#footer_list .list_li:nth-child(1){
    background:url(../img/9.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}
#footer_list .list_li:nth-child(1):active{
    background:url(../img/10.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}

#footer_list .list_li:nth-child(2){
    background:url(../img/5.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}
#footer_list .list_li:nth-child(2):active{
    background:url(../img/6.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}

#footer_list .list_li:nth-child(3){
    background:url(../img/3.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}
#footer_list .list_li:nth-child(3):active{
    background:url(../img/4.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}

#footer_list .list_li:nth-child(4){
    background:url(../img/13.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}
#footer_list .list_li:nth-child(4):active{
    background:url(../img/14.PNG);
    background-size:21px 17px;
    background-repeat:no-repeat;
    background-position:top center;
}

.home{}
.active{}
.follow{}
.active{}
.cart{}
.profile{}
.text{}

　　

仿天貓移動端頁面的頭部header

　　<header id="header" class="home">
        <figure class="f1 ff">
            <img src="img/1.PNG" alt="分類" class="f1p" width="50" height="50" >
            <figcaption>分 類</figcaption>
        </figure>
        <input type="text" name="ss" class="ss" placeholder="       搜索雙11，好貨馬上到手" >
        <figure class="f2 ff">
            <img src="img/sys.PNG" alt="掃一掃" class="f2p" width="50" height="50" >
            <figcaption>掃一掃</figcaption>
        </figure>
    </header>

　　

仿天貓移動端頁面的尾部footer

　　<footer id="footer">
        <!--<nav>-->
        <ul id="footer_list">
            <li class="list_li home active">
                <a href="index.html" class="text">天貓</a>
            </li>
            <li class="list_li follow" class="text">
                <a href="buy.html" class="text">關注</a></li>
            <li class="list_li cart" class="text">
                <a href="" class="text">購物車</a></li>
            <li class="list_li profile">
                <a href="" class="text">我</a>
            </li>
        </ul>
        <!--</nav>-->
    </footer>

　　

index.html的樣式index.css

/*線性漸變*/
.title{
    background-image:linear-gradient(to bottom,#DAAAAA,#E87373 80%,#DAAAAA);
    height:30px;
    line-height:30px;
}

.sp{
    width:50%;
    float:left;
    margin-top:0.5em;
    margin-bottom:0.5em;
    background:#a9a9a9;
    text-align:center;  }

.sp img{ height: 160px;}

.main{
    /*主流瀏覽器的寬度*/
    width:320px;
    color:black;
    background:#eee;
 }

　　

index.html的全部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿天貓</title>
    <meta name="viewport" content="minimum-scale=1.0,
    user-scalable=no,width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
    <header id="header" class="home">
        <figure class="f1 ff">
            <img src="img/1.PNG" alt="分類" class="f1p" width="50" height="50" >
            <figcaption>分 類</figcaption>
        </figure>
        <input type="text" name="ss" class="ss" placeholder="       搜索雙11，好貨馬上到手" >
        <figure class="f2 ff">
            <img src="img/sys.PNG" alt="掃一掃" class="f2p" width="50" height="50" >
            <figcaption>掃一掃</figcaption>
        </figure>
    </header>

    <section class="main">
        <h3 class="title">行業精選</h3>
        <figure class="sp sp1">
            <img src="img/24.PNG" alt="">
            <figcaption>女裝<br>最新款式</figcaption>
        </figure>

        <figure class="sp sp1">
            <img src="img/25.PNG" alt="">
            <figcaption>運動<br>愛運動</figcaption>
        </figure>

        <figure class="sp sp1">
            <img src="img/24.PNG" alt="">
            <figcaption>女裝<br>搶秋冬新款</figcaption>
        </figure>

        <figure class="sp sp1">
            <img src="img/25.PNG" alt="">
            <figcaption>男裝<br>潮男搭配</figcaption>
        </figure>

        <figure class="sp sp1">
            <img src="img/24.PNG" alt="">
            <figcaption>箱包<br>包你滿意</figcaption>
        </figure>

        <figure class="sp sp1">
            <img src="img/25.PNG" alt="">
            <figcaption>男鞋<br>英倫休閑季</figcaption>
        </figure>
    </section>

    <footer id="footer">
        <!--<nav>-->
        <ul id="footer_list">
            <li class="list_li home active">
                <a href="index.html" class="text">天貓</a>
            </li>
            <li class="list_li follow" class="text">
                <a href="buy.html" class="text">關注</a></li>
            <li class="list_li cart" class="text">
                <a href="" class="text">購物車</a></li>
            <li class="list_li profile">
                <a href="" class="text">我</a>
            </li>
        </ul>
        <!--</nav>-->
    </footer>
</body>
</html>

　　

buy,html的樣式buy.css

.main{}

.cart-top{
    height:25px;
    line-height:25px;
    background-image: linear-gradient(to bottom,#FFF0F5,#FF7F50 80%,#D2691E);
    padding:8px;
    font-size:14px;
    font-weight:bold;
    color:#eee;
    /*給字體加陰影 x y z*/
    text-shadow:0 1px 1px rgba(0,0,0,0.8);
    border-bottom:1px solid #FF7F50;
    border-radius:3px 3px 0 0;
}

.cart-f1{
    display:inline-block;
    font-size:14px;
}
.cart-f2{
    float:right;
}

/*購物車我物品列表樣式*/
.cart-item{
    line-height:25px;
    padding:10px 10px 10px 15px;
    background-image: linear-gradient(to bottom,#FFC0CB,#fff0f5);

    font-weight: 600;

    /*③overflow*/
    overflow:hidden;

    /*①彈性盒子*/
    /*display:flex;*/

    /*②浮動不好*/
    /*float:left;*/
}
.pic{
    /*③*/
    float:left;
    margin-buttom:5px;
    margin-right:5px;
}
.des{
    /*③*/
    float:left;
    color:#eee;
    text-shadow:0 1px 1px rgba(0,0,0,0.8);
}
.price{
    float:right;
    color:#eee;
    text-shadow:0 1px 1px rgba(0,0,0,0.8);
}

/*購物車總計樣式*/
.sum{
    line-height:32px;
    padding:10px 10px 10px 15px;
    font-weight:bold;
    background-image:linear-gradient(to bottom,#D3D3D3,#E0FFFF);
}

/*購物車按鈕樣式*/
.cart-button{
    line-height:29px;
    padding:0 25px;
    color:white;
    border-radius:4px;
    background-image:linear-gradient(to bottom,#B0C4DE,#87CEFA);
    float: right;
    /*margin-left:120px;*/
}

　　

buy.html的主體

<!--主體部分-->
<section class="main">
    <div class="cart-top">
        <h2 class="cart-f1">購物車</h2>
        <img src="img/guanzhu/2.PNG" alt="">
        <div class="cart-f2">已選兩件</div>
    </div>
    
    <ul>
        <!--用li標簽方便js-->
        <li class="cart-item">
            <span class="pic">
                <img src="img/guanzhu/1.PNG" alt="">
            </span>
            <span class="des">
                迷你移動電源<br>卡通大白充電寶
            </span>
            <span class="price">
                ￥149.00
            </span>
        </li>
    </ul>
    <ul>
        <li class="cart-item">
            <span class="pic">
                <img src="img/guanzhu/1.PNG" alt="">
            </span>
            <span class="des">
                迷你移動電源<br>卡通大白充電寶
            </span>
            <span class="price">
                ￥149.00
            </span>
        </li>
        <li class="sum">
            共計￥298
            <input type="button" class="cart-button" value="結算">
        </li>
    </ul>
</section>