流式布局(百分比布局)
一:基本概念
- 流式布局,就是百分比布局,也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
- max-width 最大宽度 (max-height 最大高度)
- min-width 最小宽度 (min-height 最小高度)
关于宽度的百分比计算
- 标准流的盒子宽度百分比是参考离其最近的行内块,块级标签的宽度
- 固定定位的盒子得宽度百分比是参考浏览器窗口来计算的
- 绝对定位的盒子的宽度百分比参考离其最近的有定位的上层标签的宽度
二:案例
京东模仿,其中用到了流式布局
css部分代码
*{
margin: 0;
padding: 0;
}
body{
height: 20000px;
width: 100%;
min-width: 320px;
max-width: 640px;
margin: auto;
font-size: 14px;
font-family: -apple-stystem,Helvetica,sans-serif;
color: black;
line-height: 1.5;
background-color: #DEE1E6;
}
/* 清除图片空隙 */
img{
vertical-align: top;
}
/* 顶部模块 */
.app{
height: 45px;
}
.app ul li{
float: left;
height: 45px;
list-style: none;
line-height: 45px;
text-align: center;
background-color: #333333;
color: #fff;
}
.app ul li:nth-child(1){
width: 8%;
}
.app ul li:nth-child(1) img{
width: 10px;
vertical-align: middle;
}
.app ul li:nth-child(2){
width: 10%;
}
.app ul li:nth-child(2) img{
width: 30px;
vertical-align: middle;
}
.app ul li:nth-child(3){
width: 57%;
}
.app ul li:nth-child(4){
width: 25%;
background-color: #F63515;
}
/* 搜索模块 */
.search-wrap{
width: 100%;
min-width: 320px;
max-width: 640px;
position: fixed;
overflow: hidden;
/* position: relative; */
height: 44px;
/* background-color: brown; */
}
.search-btn{
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
margin: 14px 0 0 15px;
background: url(../images/s-btn.png) no-repeat;
background-size:20px 18px ;
}
.search{
position: relative;
margin: 7px 50px;
height: 30px;
background-color: #fff;
border-radius: 15px;
}
.search .jd-icon{
position: absolute;
top: 8px;
left: 15px;
width: 40px;
height: 30px;
background: url(../images/jd.png) no-repeat;
background-size: 20px 15px;
}
.search .jd-icon::after{
position: absolute;
top: -3px;
right: 9px;
content: "|";
color: #DDDDDD;
}
.search-login{
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 44px;
text-align: center;
line-height: 44px;
color: white;
}
.sou{
position: absolute;
top: 9px;
left: 53px;
width: 18px;
height: 18px;
background: url(../images/jd-sprites.png) no-repeat -82px 0;
background-size: 200px 200px;
}
/* 主体内容模块 */
.slider img{
width: 100%;
}
/* 蔡康永模块 */
.brand{
border-radius: 15px 15px 0 0;
overflow: hidden;
}
.brand div{
float: left;
width: 33.33%;
}
.brand div img{
width: 100%;
}
/* 导航模块 */
.nav a{
float: left;
width: 20%;
text-align: center;
text-decoration: none;
color: black;
font-size: 12px;
}
.nav a img {
width: 50%;
margin: 0 auto;
}
.nav a p{
margin-bottom: 5px;
}
HTML部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>假冒京东</title>
<!-- 引入css初始化样式 -->
<link rel="stylesheet" href="./css/clear.css">
<!-- 引入css样式 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部模块 -->
<header class="app">
<ul>
<li>
<img src="images/close.png" alt="">
</li>
<li>
<img src="images/logo.png" alt="">
</li>
<li>
打开京东APP,购物更轻松
</li>
<li>
立即打开
</li>
</ul>
</header>
<!-- 搜索模块 -->
<div class="search-wrap">
<div class="search-btn">
</div>
<div class="search">
<div class="jd-icon"></div>
<div class="sou"></div>
</div>
<div class="search-login">
登录
</div>
</div>
<!-- 主体内容模块 -->
<div class="maincontent">
<div class="slider">
<img src="upload/banner.dpg" alt="">
</div>
</div>
<!-- 蔡康永模块 -->
<div class="brand">
<div class="pic1">
<a href="http://baidu.com"><img src="upload/pic1.dpg" alt=""></a>
</div>
<div class="pic2">
<a href="#"><img src="upload/pic2.dpg" alt=""></a>
</div>
<div class="pic3">
<a href="#"></a><img src="upload/pic3.dpg" alt=""></a>
</div>
</div>
<!-- 导航模块 -->
<div class="nav">
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
<a href="#">
<img src="upload/nav1.webp" alt="">
<p>京东超市</p>
</a>
</div>
</body>
</html>
- 运行截图
【叽叽歪歪】搜索框那块用到了固定定位,以后学了js会改成随着底下的内容移动到顶部,然后固定在顶部(听起来像粘性定位吧,但因为兼容性问题,所以用固定定位)