流式布局
流式布局
文章目录
前言
一、流式布局原理
二、二倍精灵图做法
三、渐变背景图
总结
前言
来学习流式布局啦，这里主要制作一个项目来融会贯通流式布局的用法和相关技术。
一、流式布局原理
将盒子的宽度设为百分比，很具屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
代码如下（示例）：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,user-scalable=no,maximum=1.0,minimum=1.0″>
<title>Document</title>
<style>
body {
min-width: 320px;
max-width: 980px;
}
section {
width: 100%;
height: 100px;
background-color: pink;
}
div {
float: left;
width: 50%;
height: 100px;
box-sizing: border-box;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div class=”box1″>
</div>
<div class=”box2″>
</div>
</section>
</body>
</html>
流式布局的优点：
当页面宽度发生变化时，页面布局会随着宽度的变化而变化。
适合移动端网页的制作。
二、二倍精灵图做法
将精灵图大小尺寸缩放为原来的一半，量取此时的坐标位置，background-size的像素值大小也要写原来精灵图的一半。
代码如下（示例）：
.search-box .search i {
float: left;
width: 18px;
height: 15px;
margin: 8px 0 0 15px;
background: url(../images/jd-sprites.png) no-repeat -82px 0;
background-size: 200px 200px;
三、渐变背景图
background-image：linear-gradient
代码如下（示例）：
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、*后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
总结
近几天学习了流动布局来制作移动端网页，具体项目内容就不全部写在这里了，每天坚持学习前端。
