流式布局

作者: amanohina | 来源:发表于2020-11-12 11:27 被阅读0次

rem布局
Flutter 小部件流式布局、自动换行（Wrap、Flow）
Flutter 之流式布局（Wrap、Flow）
移动Web开发中的常见布局方式及一些常见问题
webApp 页面布局
day01-移动web开发－适配方案（理论）
Android FlowLayout 流式布局
Flutter（十）：Wrap
2021-09-22 GUI(布局)
移动Web开发

流式布局（百分比布局）

流式布局就是百分比布局，也称为非固定像素布局
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式

注意事项

制作过程中要设置最大和最小支持宽度
min-width：最小宽度（min-height就是最小高度）
max-width：最大宽度（max-height就是最大高度）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum=1.0,minimum=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <style>  
    body {
      min-width: 320px;
      max-width: 980px;
    } 
    section {
      width: 100%;
      height: 100px;
      background-color: pink;
    }
    section div {
      float: left;
      width: 50%;
      height: 100px;
      border: 10px solid #ff0;
      box-sizing: border-box;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <section>
    <div>1</div>
    <div>2</div>
  </section>
</body>
</html>

浏览器拉伸缩短后比例依旧是一半对分

流式布局实战（仿京东）

方案：单独制作移动页面方案
技术：流式布局

设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, 
initial-scale=1.0，
user-scalabe=no,
maximum=1.0,minimum=1.0">

    <link rel="stylesheet" href="css/normalize.css">

设置常用初始化样式

body {
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    background-color: white;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system,Helvetica,sans-serif;
}

设置特殊样式

* {
    -webkit-tap-highlight-color: transparent;
}
 input {
     -webkit-appearance: none;
 }
 img,a {
     -webkit-touch-callout: none;
 }

提示内容，跳转app栏目

由一个大盒子包裹了四个小盒子，分别是X键按钮，logo，打开京东app提示信息，立即打开按钮

 <div class="top_tips">
        <div><img src="images/close.png" alt=""></div>
        <div><img src="images/logo1.png" alt=""></div>
        <div>打开京东APP,购物更轻松</div>
        <div>立即打开</div>
    </div>

 .top_tips {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 45px;
     background-color: #333;
     line-height: 45px; 
     text-align: center;
     color: #ffffff;
 }
 .top_tips div:nth-child(1) {
    float: left;
    width: 8%;
 }
 .top_tips div:nth-child(1) img {
     width: 10px; 
     vertical-align: middle;
 }
 .top_tips div:nth-child(2) {
    float: left;
    width: 10%;
 } 
 .top_tips div:nth-child(2) img {
     width: 30px;
     vertical-align: middle;
 }
 .top_tips div:nth-child(3) {
    float: left;
    width: 57%;
 } .top_tips div:nth-child(4) {
    float: left;
    width: 25%;
    height: 45px;
    background-color: #f63515;
    color: white;
 }

使用结构伪类选择器进行匹配父元素下面的第n个子元素

搜索栏

可以轻松观察到search区域内，有一个左按键，搜索框，还有右按键
搜索框还有JD小logo以及一条竖线和一个输入框input

搭建框架

<header class="search_box">
        <div class="search_btn"><span></span></div>
        <div class="search">
            <span></span><!-- logo -->
            <i></i><!-- 竖线 -->
            <input type="search" placeholder="超薄本">
        </div>
        <div class="login">登录</div>
    </header>

搜索栏的大盒子肯定要设置一个position:fixed进行固定，两边的按钮进行定位：

.search_box {
     position: fixed;
     top: 45px;
     left: 0;
     width: 100%;
     height: 44px;
     background-color: pink;
 }
 .search_box .search_btn {
     position: absolute;
     left: 0;
     top: 0;
     width: 40px;
     height: 44px;
     /* background-color: palegreen; */
 }
 .search_box .search_btn span {
     display: block;
     width: 20px;
     height: 18px;
     margin: 14px 0 0 15px;
     background: url(../images/s-btn.png) no-repeat 0 0;
     background-size: 20px 18px;
 }
 .search_box .login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    /* background-color: palegreen; */
    line-height: 44px;
    color: #ffffff;
    text-align: center;
 }

right:0就表示了靠右设置位置

搜索框的设置，肉眼可见的有三个需要设置的地方，小logo，竖线，放大镜图标，然后紧跟一个输入框
需要设置float浮动让他们保持在同一水平线上，量取京东logo的大小进行设置background-size，测取margin间距
使用伪类选择器进行竖线设置更加方便，给logo设置定位，伪类选择器的属性按照测量的数据进行书写就可
输入框要针对于search大盒子进行定位，宽度要百分百，为了让文字从图标后开始进行显示，要进行padding设置，为了避免覆盖，要让background-color设置为透明transparent，取消边框，border
设置放大镜时需要进行使用精灵图，这里特别提一下二倍图精灵图的做法

二倍图精灵图

在fireworks里把精灵图等比例缩放为原来的一半，比如原图是400x400，就可以替换为200x200
根据新的大小测量需要的图标的位置
代码里的background-size要写精灵图原来的宽度的一半

搜索框CSS代码

.search_box .search {
     height: 30px;
     margin: 7px 50px;
     background-color: white;
     border-radius: 15px;
     position: relative;
 }
 .search_box .search span {
     position: relative;
     float: left;
     width: 20px;
     height: 15px;
     margin: 8px 8px 0 15px;
    background: url(../images/logo2.png) no-repeat 0 0;
    background-size: 20px 15px;
 }
 .search_box .search span::after {
    position: absolute;
    right: -8px;
    content: "";
    width: 1px;
    height: 15px;
    background-color: #ccc;
 }
 .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;
 }
 .search_box .search input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    padding: 0 20px 0 78px;
    background-color: transparent;
    border: none;
 }

content主要内容与焦点图布局

制作大盒子的背景效果
使用一个类名为banner_bg的盒子进行设置

            <div class="banner_bg"></div>

 .banner .banner_bg {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 145px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    /* background-image: linear-gradient(to top,#f00,#0f0); */
    background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
    background-color: red;
}

解释一下相应的属性，给父盒子banner设顶position:relative后，使用定位技术，将bg盒子相对定位在left:-25%的位置，原因是宽度设置了150，两边都要展示弯曲弧度就要各分25%，由图可知，下边框左右弧度都往上提升了一下，所以设置为左右均为radius：100%

background-image属性

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image

函数值linear-gradient参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

简单提一下，

 background-image: linear-gradient(0deg,#f1503b,#c82519 50%);

表示的是渐变轴为0度，从下往上，从颜色#f1503b开始到50%高度时是颜色#c82519

设置焦点图

 <ul>
                <li><a href="#" ><img src="images/banner01.dpg" alt=""></a></li>
                <li><a href="#" ><img src="images/banner01.dpg" alt=""></a></li>
                <li><a href="#" ><img src="images/banner01.dpg" alt=""></a></li>
                <li><a href="#" ><img src="images/banner01.dpg" alt=""></a></li>
            </ul>

有以下几个注意事项：
1.dpg文件是京东自主研发的图片，兼容jpeg，清晰度与webp几乎没有差距，可以节约用户百分之五十的流量来加载，兼容全平台浏览器
2.使用ul进行焦点图设置，这次不使用浮动属性，这次使用的是相对于父级元素ul的定位效果，方便也快捷
3.ul元素设置使用margin:0来清除掉间距避免图塌陷

.banner ul {
   list-style: none;
   position: relative;
   /* margin: 0; */
   /* width: 100%; */
}
.banner ul li {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 187px;
   padding: 44px 3.333% 0;
   box-sizing: border-box;
}
.banner ul li:nth-child(2) {
   left: 100%;
}
.banner ul li:nth-child(3) {
   left: 200%;
}
.banner ul li:nth-child(4) {
   left: 300%;
}
.banner ul li a { 
   display: block;
}
.banner ul li a img {
   display: block;
   width: 100%;
   border-radius: 10px;
}

优惠活动图部分

使用流式布局进行设置，三个图要拼成如图所示的一条线上一张大图的效果也就是要进行浮动，img元素转块，设置父元素a标签的width:100%，所以：

<div class="youhui">
            <a href="#"><img src="images/banner_bottom_01.dpg" alt=""></a>
            <a href="#"><img src="images/banner_bottom_02.dpg" alt=""></a>
            <a href="#"><img src="images/banner_bottom_03.dpg" alt=""></a>
        </div>

.youhui {
   width: 100%;
   overflow: hidden;
}
.youhui a {
   float: left;
   width: 33.333%;
}
.youhui a img {
   display: block;
   width: 100%;
}

导航部分

与我们上一次做静态网页一样，根据网站的设计图或者模仿网站的参数进行设置就行
使用a标签进行流式布局，每一个为20%，因为京东原网站具有滑动换导航的功能，我们模拟只需要设置一下相对定位，做两个导航一个在left：0一个在left：100%就可以了
一样的，a标签内部的img要转块，要设置边距，span标签要进行行高设置方便居中，还要设置好与图表的上间距。

 <div class="mail_nav">
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
            </div>
            <div class="mail_nav mail_nav_2">
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
                <a href="#"><img src="images/nav01.webp" alt=""><span>京东超市</span></a>
            </div>

/* 导航部分 */
nav {
   width: 100%;
   overflow: hidden;
   position: relative;
   height: 162px;
}
nav .mail_nav {
   width: 100%;
   overflow: hidden;
   position: absolute;
   left: 0;
   height: 100%;
}
nav .mail_nav_2 {
   left: 100%;
}
nav .mail_nav a {
   float: left;
   color: #666666;
   text-decoration: none;
   text-align: center;
   font-size: 12px;
   width: 20%;
}
nav .mail_nav a img {
   display: block;
   width: 40px;
   margin: 10px auto 0;
}
nav .mail_nav a span {
   display: block;
   height: 18px;
   line-height: 18px;
   margin-top: 6px;
}

新人专享部分

经典流式布局，各占百分之50，非常简单

  <div class="new">
            <a href="#"><img src="images/new1.dpg" alt=""></a>
            <a href="#"><img src="images/new2.dpg" alt=""></a>
        </div>

.new {
   margin: 10px;
   overflow: hidden;
}
.new a {
   float: left;
   width: 50%;
}
.new a img {
   display: block;
   width: 100%;
}

总结

流式布局非常实用于手机端网页，根据屏幕尺寸大小不同也可以进行等比例的缩放而不会影响到整体的布局美观
只适合于水平方向的布局，流式布局不适合于垂直方向的布局
初始设置一定要添加视口标签，且不能写错（翻过车）

rem布局
移动端布局有很多做法，例如流式布局，固定宽度，Media Queries响应式布局，rem。流式布局：在页面布局...
Flutter 小部件流式布局、自动换行（Wrap、Flow）
文章目录流式布局WrapFlow 流式布局流式布局在移动端是非常常见的，比如商品列表，瀑布流、标签页等等。使用...
Flutter 之流式布局（Wrap、Flow）
流式布局流式布局在移动端是非常常见的，比如商品列表，瀑布流、标签页等等Flutter 中提供了两种流式布局Wra...
移动Web开发中的常见布局方式及一些常见问题
一、流式布局 1.1 什么是流式布局流式布局就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩...
webApp 页面布局
1. 流式布局概念：流式布局是页面元素宽度按照屏幕分辨率进行适配调整，但是整体布局不变。设计方法：布局都是通...
day01-移动web开发－适配方案（理论）
流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局： viewport(视口)...
Android FlowLayout 流式布局
FlowLayout 流式布局 Android 流式布局控件，实现自动换行，操出范围可以滑动功能，未使用控件复用功...
Flutter（十）：Wrap
Wrap 组件实现流式布局
2021-09-22 GUI(布局)
流式布局，组件默认居中
移动Web开发
1.流式布局流式布局：就是百分比自适应布局，即非固定像素布局，内容向两侧填充，理解成流动的布局。特点：无法准确...