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. 应该如何刷 LeetCode？

    LeetCode 做笔记 对于遇到的每个题目,事后都做上标记:普通题目,难题.好题.此外,每个题目都分为以下几个步骤做好详细的笔记: 1. 原题目 2. 自己的第一遍解法 3. 网上好的解法 4. 自 ...

  2. docker配置mysql主从与django实现读写分离

    一.搭建主从mysql环境 1 下载mysql镜像 docker pull mysql:5.7 2 运行刚下载的mysql镜像文件 # 运行该命令之前可以使用`docker images`是否下载成功 ...

  3. Day01-初识 Python

    1.CPU/内存/硬盘/操作系统 CPU :计算机的运算和处理中心,相当于人类的大脑. 内存 :暂时存储数据,临时加载数据应用程序. 硬盘 :长期存储数据. 操作系统:一个软件,连接计算机的硬件与所有 ...

  4. PHP按二维数组中的某个值重新排序数组 usort的使用方法

    $arr[0] = ['aa'=>123,'bb'=>'abc']; $arr[1] = ['aa'=>456,'bb'=>'dfe']; usort($arr,ss('aa' ...

  5. 图解leetcode —— 395. 至少有K个重复字符的最长子串

    前言: 每道题附带动态示意图,提供java.python两种语言答案,力求提供leetcode最优解. 描述: 找到给定字符串(由小写字符组成)中的最长子串 T , 要求 T 中的每一字符出现次数都不 ...

  6. Python微信公众号教程基础篇——收发文本消息

    1. 概述: 在本篇教程中,你将学会使用华为云弹性云服务器(以下简称 ECS)搭建微信公众号处理后台,使用Python语言编写对应的微信消息处理逻辑代码,接收从微信服务端转发过来的消息,并返回处理结果 ...

  7. gsoap使用

    一. 安装gsoap 下载地址:http://sourceforge.net/projects/gsoap2/files/ 解压安装:./configure --prefix=/usr/local/g ...

  8. react-native修改xcode项目名

    目录 1. 选中旧工程名,改为新的工程名 2. 依次选择黄色文件夹,修改名字,千万不要在Xcode外修改!!! 3. 点击Find,点击Find and Replace in Project... 4 ...

  9. ARTS-S mongo关闭与启动

    关闭 mongo admin --eval "db.shutdownServer()" 删除dbdata目录下的mongo.lock 启动 /usr/bin/mongod --db ...

  10. 新更新的OV7670 OV7725模块效果展示 OV7670 FPC版 30万像素 CMOS模块 兼容官哥方便 FPGA stm32f407 68013等使用

    原创OV7670,30W像素摄像头模块, 3) 光学尺寸1/6 ,像素面积3.6 μm x 3.6 μm,灵敏度1.3V/Lux-sec 4) 工作电压:3.3V 5) 接口定义为10*2的2.54间 ...