流式布局

文章目录

  • 前言
  • 一、流式布局原理
  • 二、二倍精灵图做法
  • 三、渐变背景图
  • 总结


前言

来学习流式布局啦,这里主要制作一个项目来融会贯通流式布局的用法和相关技术。


一、流式布局原理

将盒子的宽度设为百分比,很具屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

代码如下(示例):

<!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">
            1
        </div>
        <div class="box2">
            2
        </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);

总结

近几天学习了流动布局来制作移动端网页,具体项目内容就不全部写在这里了,每天坚持学习前端。
流式布局_第1张图片

你可能感兴趣的:(移动端网页,前端学习,html,css)