一，常见圣杯布局

<!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. B站上传字幕问题解决

    博客:blog.shinelee.me | 博客园 | CSDN B站上传字幕时,如果srt文件中出现如下空行,则会报错,仅上传了空行前的部分 于是写了个python脚本,如下: import pys ...

  2. JS---封装getScroll函数 & 案例：固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

  3. What to wear today需求分析文档

    成员: 身份 姓名 分工 组长 陶清然 负责文档编写.ppt,测试 组员 张娜 负责前端 组员 代丽芳 负责后台 组员 江雪 负责数据库 组员 伊穆兰 负责后台 小组成员在本次迭代中的贡献: 姓名 贡 ...

  4. VNC连接CentOS7远程桌面

    1.在centos7安装图形化 先安装图形用户接口X Window System,再安装GNOME桌面. [root@centos7 ~]# yum groupinstall -y "X W ...

  5. PKUWC 2020 游记

    由于 CSP 的暴力分太高,我来了这里. 我将告诉大家,我在暴力分不高时是个怎样的 sb 选手. Day -17 又停课啦. 旁边坐着 pb,每天刷题特别猛,然后就凸显了我有多颓. 怎么想打开个猫国都 ...

  6. 最后的记忆——Spring BeanFactory

    本文尝试分析一下Spring 的BeanFactory 体系的 接口设计,尝试理解为什么这么做,为什么接口这么设计.为什么这么去实现,为什么需要有这个方法,为什么 这样命名?接口.类.方法的 大致用途 ...

  7. ELK 安装部署小计

    ELK的安装部署已经是第N次了! 其实也很简单,这里记下来,以免忘记. #elasticsearch安装部署 wget https://artifacts.elastic.co/downloads/e ...

  8. C++做四则运算的MFC计算器（二）栈转换和计算后缀表达式

    上篇写了MFC界面搭建,这篇就写实现计算.涉及到数据结构,对新手很不友好. 虽然是MFC程序,但是能灵活地分离后台代码,自行构建控制台程序. 上篇文章链接:C++做四则运算的MFC计算器(一)MFC界 ...

  9. 精通awk系列(7)：awk读取行的细节

    回到: Linux系列文章 Shell系列文章 Awk系列文章 详细分析awk如何读取文件 awk读取输入文件时,每次读取一条记录(record)(默认情况下按行读取,所以此时记录就是行).每读取一条 ...

  10. Java中的日期与时间

    日期与时间 最常用的几个类,Date.DateFormat.Calendar.Locale Date 1.无参构造方法 //根据当前系统默认的毫秒值创建时间对象 public Date() { thi ...