目录
1 初识流式布局
流式布局也叫百分比布局，我们在布局时不适用固定的像素值，我们下面布局一个看一下
我像要在页面中放两个盒子，高度一个300px，另一个200px。宽度一个为30%，另一个为70%
- 移动端布局高度无所谓，主要是宽度
这样你无论用什么像素的手机显示的样子都是类似的
把手机转过来也是一样
为了让盒子内的内容正常显示，我们会通过设置最大(小)宽度，最大(小)高度对盒子的大小进行限制
- max-width 最大宽度
- max-height 最大高度
- min-width 最小宽度
- min-height 最小高度
一般只对宽度进行约束，最小宽度一般设置为320px，最大宽度一般设置为640px，这个也得具体情况具体分析
为了更好的理解流式布局，我们在下面模拟京东移动版的首页
2 模拟京东移动版首页
我们要注意的一点是，做页面不用苛求完美，经过比较苛刻的条件测试，即使是很多专业的人一起做的界面也是会崩掉的，如果感觉影响很大再进行调整即可
京东移动端地址为 多快好省，购物上京东！ ，在制作页面的时候我会把京东两个字省略掉，相关的商品也会随便找一些东西替代，由于京东的首页会经常改变，我展示一下我当前的样子
下面是模拟的样子
我们的目的是看一下流式布局的样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="css/initialization.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<span id="meau"></span>
<div id="search">
<span id="magnifier"></span>
<input type="search" value="电脑主机i7">
</div>
<a href="#">登陆</a>
</header>
<section id="rotation_pic_background"></section>
<section class="rotation_pic">
<img src="upload/rotation_pic/1.png" alt="">
</section>
<section class="some_function">
<a href="#"><img src="images/some_function/supermarket.png" alt=""><span>超市</span></a>
<a href="#"><img src="images/some_function/electric_appliance.png" alt=""><span>数码电器</span></a>
<a href="#"><img src="images/some_function/new_goods.png" alt=""><span>新百货</span></a>
<a href="#"><img src="images/some_function/fresh_vegetables.png" alt=""><span>生鲜</span></a>
<a href="#"><img src="images/some_function/arrive_home.png" alt=""><span>送到家</span></a>
<a href="#"><img src="images/some_function/recharge_phone.png" alt=""><span>充值缴费</span></a>
<a href="#"><img src="images/some_function/nearby_good_shop.png" alt=""><span>附近好店</span></a>
<a href="#"><img src="images/some_function/take_ticket.png" alt=""><span>领券</span></a>
<a href="#"><img src="images/some_function/red_packet.png" alt=""><span>领金贴</span></a>
<a href="#"><img src="images/some_function/VIP.png" alt=""><span>PLUS会员</span></a>
</section>
<section class="seckill">
<div id="seckill_header">
<span>秒杀</span>
<span id="when">14</span>
<span ><img src="images/seckill/seckill_time.png"></span>
<span id="hour" class="time_span">00</span>
<span id="minute" class="time_span">00</span>
<span id="second" class="time_span">00</span>
<span>爆款轮番秒</span>
</div>
<div id="seckill_content">
<div>
<img src="upload/seckill/1.png" alt="">
<span>￥888</span>
</div>
<div>
<img src="upload/seckill/1.png" alt="">
<span>￥888</span>
</div>
<div>
<img src="upload/seckill/1.png" alt="">
<span>￥888</span>
</div>
<div>
<img src="upload/seckill/1.png" alt="">
<span>￥888</span>
</div>
<div>
<img src="upload/seckill/1.png" alt="">
<span>￥888</span>
</div>
<div>
<img src="upload/seckill/1.png" alt="">
<span>￥888</span>
</div>
</div>
</section>
<section class="two_list_commodity">
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
<div class="commodity">
<img src="upload/two_list_commodity/1.png" alt="">
<p>愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者流的话</p>
<span class="price">￥888</span><br>
<span class="remark">1000+评论</span>
<button>看相似</button>
</div>
</section>
</body>
</html>CSS
@font-face {
font-family: 'icomoon';
src: url('../fonts/fonts/icomoon.eot?209gaw');
src: url('../fonts/fonts/icomoon.eot?209gaw#iefix') format('embedded-opentype'),
url('../fonts/fonts/icomoon.ttf?209gaw') format('truetype'),
url('../fonts/fonts/icomoon.woff?209gaw') format('woff'),
url('../fonts/fonts/icomoon.svg?209gaw#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
body {
height:3000px;
background-color:rgb(246,246,246);
}
/* 头部 */
header {
min-width:320px;
max-width:640px;
position:fixed;
width:100%;
height:50px;
background-color:rgb(200,37,25);
margin-top:-50px;
z-index:999;
}
header #search {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:70%;
height:30px;
}
header input {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
height:30px;
line-height:30px;
border-radius:15px;
text-indent:12%;
color:rgb(117,117,117);
border-color:transparent;
}
header a {
position:absolute;
top:50%;
transform:translate(0,-50%);
right:5%;
color:rgb(247,247,247)
}
header #search #magnifier::before {
content:'\e986';
font-family:'icomoon';
color:rgb(147,147,147);
font-size:14px;
}
header #search #magnifier {
position:absolute;
top:50%;
transform:translate(0,-50%);
left:5%;
height:18px;
z-index:999;
}
header #meau {
position:absolute;
top:50%;
transform:translate(0,-50%);
left:4%;
height:45px;
z-index:999;
}
header #meau::before {
content:'\e9bd';
font-family:'icomoon';
color:rgb(247,247,247);
font-size:30px;
}
/* 轮播图后面的红色背景 */
#rotation_pic_background {
width:100%;
height:90px;
background-color:rgb(200,37,25);
margin-top:50px;
border-radius:0 0 70% 70%;
}
/* 轮播图 */
.rotation_pic {
position:relative;
left:50%;
transform:translate(-50%,0);
width:90%;
height:150px;
margin-top:-90px;
}
.rotation_pic img {
width:100%;
height:100%;
border-radius:10px;
z-index:999;
}
/* 十个功能 */
.some_function {
position:relative;
width:100%;
height:175px;
margin-top:10px;
}
.some_function a {
display:inline-block;
width:19%;
height:50%;
text-align:center;
}
.some_function a img {
width:100%;
height:75%;
}
/* 秒杀 */
.seckill {
position:relative;
left:50%;
transform:translate(-50%,0);
width:95%;
height:130px;
background:white;
border-radius:15px;
}
/*秒杀头部*/
.seckill #seckill_header {
position:relative;
width:100%;
background:url('../images/seckill/seckill_background.png') no-repeat;
background-size:contain;
height:20px;
}
.seckill span {
display:inline-block;
text-align:center;
line-height:20px;
}
.seckill span:nth-child(1) {
font-size:14px;
color:black;
width:10%;
}
.seckill #when {
color:red;
width:10%
}
.seckill span:nth-child(3) {
width:20px;;
}
.seckill span:nth-child(3) img {
width:100%;
height:100%;
}
.seckill .time_span {
width:20px;
background-color:rgb(252,58,40);
border-radius:5px;
line-height:20px;
color:white;
}
.seckill span:nth-child(7) {
position:absolute;
right:20px;
color:red;
}
.seckill span:nth-child(7)::after {
position:absolute;
right:-15px;;
content:'\ea42';
font-family:'icomoon';
color:rgb(252,58,40);
font-size:10px;
}
/*秒杀内容部分*/
.seckill #seckill_content {
margin-top:10px;
width:100%;
}
.seckill #seckill_content div {
display:inline-block;
width:15.8%;
}
.seckill #seckill_content div img {
width:100%;
max-height:78px;
}
.seckill #seckill_content div span {
display:inline-block;
width:100%;
text-align:center;
color:rgb(252,58,40);
}
/* 两列商品 */
.two_list_commodity {
position:relative;
width:95%;
left:50%;
transform:translate(-50%,0);
}
.two_list_commodity .commodity {
float:left;
position:relative;
overflow:hidden;
margin-top:10px;
width:48%;
border-radius:15px;
background-color:#f7f7f7;
margin:1%;
}
.two_list_commodity .commodity img {
width:100%;
}
.two_list_commodity .commodity p {
width:100%;
height:60px;
font-size:19px;
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.two_list_commodity .commodity .price {
color:rgb(252,58,40);
font-size:20px;
}
.two_list_commodity .commodity button {
position:absolute;
right:5px;
bottom:5px;
border-radius:5px;
border:1px transparent solid;
}
我们发现在样式中多用百分比代表尺寸，这样我们的绝大部分移动端都能适配
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
