1、经典布局，上头下尾，两侧固定，中间自适应

效果图：

实现代码（普通）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style>

    .header{

        width:100%;

        height:30px;

        background-color:lightsalmon;

        text-align: center;

    }

    .footer{

        width:100%;

        height:30px;

        background-color:lightgreen;

        text-align: center;

    }

    .left{

        background-color:mediumaquamarine;

        margin-left:0%;

        width:10%;

    }

    .main{

        background-color:lightseagreen;

        width:80%;

    }

    .right{

        background-color:lightcyan;

        float:right;

        width:10%;

    }

    .left,.main,.right{

        height:100%;

        min-height:500px;

        display:inline-block;

        text-align: center;

    }

</style>

<body>

        <div class="header">头部</div>

            <div>

                <div class="left">左边

                </div><div class="main">中间

                </div><div class="right">右边</div>

            </div>

        <div class="footer">尾部</div>

</body>

</html>

2、用flex实现经典布局

应用默认的排序flex-direction:row及flex布局的默认效果代替了float,display:inline-block等效果

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style>

    .body{

        display:flex;

        flex-wrap: wrap;

    }

    .header{

        width:100%;

        height:30px;

        background-color:lightsalmon;

        text-align: center;

    }

    .footer{

        width:100%;

        height:30px;

        background-color:lightgreen;

        text-align: center;

    }

    .left{

        background-color:mediumaquamarine;

        width:10%;

    }

    .main{

        background-color:lightseagreen;

        width:80%;

    }

    .right{

        background-color:lightcyan;

        width:10%;

    }

    .left,.main,.right{

        min-height:500px;

        text-align: center;

    }

</style>

<body>

    <div class="body">

        <div class="header">头部</div>

        <div class="left">左边</div>

        <div class="main">中间</div>

        <div class="right">右边</div>

        <div class="footer">尾部</div>

    </div>

</body>

</html>

3、用网格实现经典布局

用grid-template-columns定义每个的列宽

用grid-column定义每一列从哪个网线开始，哪个网线截止

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<style>

    .body{

        display:grid;

        grid-template-columns: 1fr 5fr 1fr;

    }

    .header{

        height:30px;

        background-color:lightsalmon;

        text-align: center;

        grid-column: 1/4;

    }

    .footer{

        width:100%;

        height:30px;

        background-color:lightgreen;

        text-align: center;

        grid-column: 1/4;

    }

    .left{

        background-color:mediumaquamarine;

        grid-column: 1/2;

    }

    .main{

        background-color:lightseagreen;

        grid-column: 2/3;

    }

    .right{

        background-color:lightcyan;

        grid-column: 3/4;

    }

    .left,.main,.right{

        min-height:500px;

        text-align: center;

    }

</style>

<body>

    <div class="body">

        <div class="header">头部</div>

        <div class="left">左边</div>

        <div class="main">中间</div>

        <div class="right">右边</div>

        <div class="footer">尾部</div>

    </div>

</body>

</html>

关于css布局的记录(三) --布局实战的更多相关文章

  1. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  2. 关于css布局的记录(二) --网格布局

    网格布局 学习来自阮一峰老师的教程网格布局和网络上的一些资料的学习 1.定义: 顾名思义,网格布局是将页面按行(row)和列(column)划分成一个个网格来进行布局 使用方法:display:gri ...

  3. 关于css布局的记录(一) --table和flex布局

    1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...

  4. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  5. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  6. CSS实现经典的三栏布局

    实现效果: 左右栏定宽,中间栏自适应 (有时候是固定高度) 1 . 绝对定位布局:position + margin <div class="container"> & ...

  7. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  8. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  9. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

随机推荐

  1. 2. Python环境安装

    Centos 下环境安装 我们通过pyenv来管理python环境,更好的帮助开发者避免在环境上出现各种各样的问题 准备工作 安装之前,确保已经安装了git yum install git -y 安装 ...

  2. Chrome插件安装的3种方法，解决拖放不能安装的情况，并提供插件下载

    本文摘录于Chrome插件网站 方法一:拖放安装 下载插件的crx文件后,打开Chrome的扩展页面(chrome://extensions/或按Chrome菜单图标>更多工具>扩展程序) ...

  3. CSS给元素清除浮动影响的方法，--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. IJKPlayer如何支持https

    给ijkplayer安装支持https 首先使用如下终端命令安装yasm 第一: 1. curl http://www.tortall.NET/projects/yasm/releases/yasm- ...

  5. react-native StatusBar透明

    目录 一 react-native 自定义AppStatusBar 二 配置 android 一 react-native 自定义AppStatusBar 透明 StatusBar字体黑色, 否则是白 ...

  6. 大数据之Linux基本指令

    1:文件操作类指令 ls 是英文单词list 的简写, 其功能为列出目录的内容,是最常用的命令之一 -a all 显示指定目录下所有子目录与文件, 包含隐藏文件 -l 以列表方式显示文件的详细信息 - ...

  7. 60%的人不懂Python进程Process，你懂吗？

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:蒋狗    新手注意:如果你Python基础学的不够扎实,遇问题没人解答 ...

  8. 用tensorflow求偏导

    # coding:utf-8 from __future__ import absolute_import from __future__ import unicode_literals from _ ...

  9. 基于STM32F1 的BASIC解码实验 vb basic 液晶显示执行过程及结果

    基于STM32F1 的BASIC解码实验 1.basic程序以文件形式存储 2.程序文件存储在sd卡 3.解释结果显示在液晶屏上 主函数部分 int main(void){ u16 i,j; dela ...

  10. Linux-（2）Linux安装

    二.Linux 安装 2.1 物理机安装 使用相关镜像制作软件(软碟通等)制作U盘启动盘即可,按照正常的安装步骤安装即可,一般来说(迷你版本)有线网卡直接会有驱动,无线网卡的驱动需要自行编译或者查找. ...