仿天猫移动端页面

一.学习要点

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>