一，常见圣杯布局

<!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. Apache—伪静态配置和使用

    https://jingyan.baidu.com/article/ae97a646a7419bbbfd461df7.html https://blog.csdn.net/weixin_4178205 ...

  2. js new Date 创建时间默认是8点

    起因 最近在写一个页面,需要用到时间控制.然后我通过new Date()传入日期字符串创建了一个对象,并与当前时间做时间戳比较,结果12点刚过,就出问题了.举个栗子 // 假设当前时间是2019年12 ...

  3. Spring Boot Request method DELETE not supported

    1: 开启HiddenHttpMethodFilter 最新版本的spring boot 默认不开启 restful 分割api @Bean @ConditionalOnMissingBean({Hi ...

  4. Jmeter常用的两大性能测试场景

    一.阶梯式场景 该场景主要应用在负载测试里面,通过设定一定的并发线程数,给定加压规则,遵循“缓起步,快结束”的原则,不断地增加并发用户来找到系统的性能瓶颈,进而有针对性的进行各方面的系统优化. 使用到 ...

  5. javascript数组拆分为三个一组

    首先构建原始数据. var arr = [ {name:'yanggb1',age:'15'}, {name:'yanggb2',age:'16'}, {name:'yanggb3',age:'17' ...

  6. Python中Pyyaml模块的使用

    一.YAML是什么 YAML是专门用来写配置文件的语言,远比JSON格式方便. YAML语言的设计目标,就是方便人类读写. YAML是一种比XML和JSON更轻的文件格式,也更简单更强大,它可以通过缩 ...

  7. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  8. EasyExcel示例（阿里巴巴）基于Maven

    首先感谢阿里巴巴提供了easyexcel工具类,github地址:https://github.com/alibaba/easyexcel 注意!!这里只是一个简单的示例,VC大法即可使用,对于复杂的 ...

  9. SQL语句性能调整原则

    一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用系统提交实际应用后,随着数据库中数据的增加,系统 ...

  10. September 08th, 2019. Sunday, Week 37th.

    A heavy drew refreshed the earth at night. 夜晚厚重的露水滋养着大地. From Leo Tolstoy. Today is the White Drew D ...