仿天猫移动端页面
一.学习要点
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>
浙公网安备 33010602011771号