一，常见圣杯布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            /* 圣杯布局 */

            body{

                margin: 0;

                padding: 0;

                display: flex;

                flex-direction: column;/* 灵活的项目将垂直显示，正如一个列一样 */

            }

            header{

                flex: 0 0 50px;

                background-color: aliceblue;

                align-items: center;

            }

            footer{

                flex: 0 0 200px;

                background-color: dimgray;

            }

            .content{

                display: flex;

                width: 70%;

                margin: 0 auto;

                background: beige;

                height: auto;

            }

            .square1{

                border: aqua 1px solid;width: 100px; height: 100px;/* 内容效果 */

            }

            .square2{

                border: aqua 1px solid;width: 700px; height: 100px;/* 内容效果 */

            }

            .parcel2{

                display: flex;

                flex-wrap: wrap;

            }

        </style>

    </head>

    <body>

        <!--

            页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

         -->

         <header><h1>阿呆云[-].COM</h1></header>

             <div class="content">

                <div class="parcel">

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                    <div class="square1" >方块1</div>

                </div>

                <div class="parcel2">

                    <div class="square2" >方块2</div>

                </div>

             </div>

         <footer></footer>

    </body>

</html>

效果图：

二，快资讯页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            body{

                display: flex;

                margin: 0;

                padding: 0;

                flex-wrap: wrap;

            }

            .box{

                display: flex;

                margin: 0 auto;

                width: 80%;

                height: 1000px;

                background: #696969;

            }

            .top{

                width: 100%;

                height: 50px;

                background: #00FFFF;

                text-align: center;

            }

            .left{

                width: 30%;

                background: #F5F5DC;

            }

        </style>

    </head>

    <body>

        <div class="top">导航栏</div>

        <div class="box">

            <div class="left">

                略缩内容

            </div>

            <div class="right">

                展开内容

            </div>

        </div>

    </body>

</html>

效果图：

flex常见布局的更多相关文章

  1. 几种常见布局的flex写法

    flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 ​flex基础知识点 flex-grow和flex-shrink相关计算 ...

  2. flex大法：一网打尽所有常见布局

    flex全称Flexible Box模型,顾名思义就是灵活的盒子,不过一般都叫弹性盒子,所有PC端及手机端现代浏览器都支持,所以不用担心它的兼容性,有了这玩意,妈妈再也不用担心我们的布局. 先简单介绍 ...

  3. flex弹性布局

    Flex 布局教程:语法篇  原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 作者:  ...

  4. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  5. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  6. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  7. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

  8. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  9. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

随机推荐

  1. 通过 Drone Rest API 获取构建记录日志

    Drone是一款CICD工具,提供rest API,简单介绍下如何使用API 获取构建日志. 获取token 登录进入drone,点头像,在菜单里选择token 复制token即可 API 介绍 Dr ...

  2. 图解leetcode —— 128. 最长连续序列

    前言: 每道题附带动态示意图,提供java.python两种语言答案,力求提供leetcode最优解. 描述: 给定一个未排序的整数数组,找出最长连续序列的长度. 要求算法的时间复杂度为 O(n). ...

  3. c++-内联函数和函数重载和默认参数和函数指针

    内联函数 C++ 内联函数是通常与类一起使用.如果一个函数是内联的,那么在编译时,编译器会把该函数的代码副本放置在每个调用该函数的地方. 对内联函数进行任何修改,都需要重新编译函数的所有客户端,因为编 ...

  4. 如何在windows下安装linux双系统

    首先是看这篇博客,讲得很详细,但是有一点小小的区别,这里把整个过程回顾一下. https://www.cnblogs.com/masbay/p/10745170.html 第一步,刻盘,将一个u盘刻录 ...

  5. Linux CPU占用率监控工具

    关键词:top.perf.sar.ksar.mpstat.uptime.vmstat.pidstat.time.cpustat.munin.htop.glances.atop.nmon.pcp-gui ...

  6. HTTP 400 与 SpringMVC的 HttpPutFormContentFilter、FormContentFilter

    前端发送了一个http PUT请求,如下, json_xml: {,},,}},,},,}},},}},,},{,}],,},,}},,,,},,}},},}},,},{,}],,},,}},,},{ ...

  7. 阿里巴巴Java开发手册正确学习姿势是怎样的？刷新代码规范认知

    很多人都知道,阿里巴巴在2017发布了<阿里巴巴Java开发手册>,前后推出了很多个版本,并在后续推出了与之配套的IDEA插件和书籍. 相信很多Java开发都或多或少看过这份手册,这份手册 ...

  8. js实现常见排序算法

    电脑配置 CPU:AMD X4 640 内存: 宏想 DDR3 1600MHz 8g 主板:华擎 980DE3/U3S3 R2.0 浏览器:chrome 79.0.3945.88(正式版本) (64 ...

  9. 系统 (一) Windows10安装Ubuntu子系统

    前言 本文将基于 Windows10专业版 安装 Ubuntu子系统 1.控制面板 -> 程序 -> 选择启用或关闭Windows功能 -> 勾上 适用Linux的Windwos子系 ...

  10. C# transfer local file to remote server based on File.Copy

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...