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. 12-kubernetes Dashboard 认证及分级授权

    目录 部署 dashboard 查看 开放访问 配置dashboard用户 1. token 令牌认证 创建一个 serviceAccount dashboard-admin 绑定 clusterbi ...

  2. Vue项目功能插件

    项目功能插件 vue-router { path: '/', name: 'home', // 路由的重定向 redirect: '/home' } { // 一级路由, 在根组件中被渲染, 替换根组 ...

  3. Linux之find命令

    1.find命令的作用 主要用于操作系统文件.目录的查找. 2.find命令常用参数 -name #按文件名查找 -type #按文件类型查找:b/p/c/p/l/f -size #但文件大小查找,G ...

  4. VLAN实验4（在eNSP上利用单臂路由实现VLAN间路由）

    原理概述: 以太网中,通常会使用VLAN技术隔离二层广播域来减少广播的影响*并增强 网络的安全性和可管理性.其缺点足同时也严格地隔离了不同VLAN之间的任何二层流量,使分属于不同VLAN的用户 不能直 ...

  5. 性能达到原生 MySQL 七倍，华为云 Taurus 技术解读【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  6. luogu P5596 【XR-4】题

    题目背景 xht37 喜欢分块,以至于对一道不需要分块的题也要分块做. 题目描述 有一个长度为 nn 的序列,xht37 现在想分块维护它. PinkRabbit 要求他只准将序列分成 PRPR 种长 ...

  7. 前端跨域 nginx 反向代理

    1.下载ngnix稳定版   (http://nginx.org/en/download.html) 2.解压到你中意的目录. 3.将你的网页文件放到刚解压html文件目录下 4.打开conf  &g ...

  8. cmake 简介

    CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的 ...

  9. 适用于Java开发人员的SOLID设计原则简介

    看看这篇针对Java开发人员的SOLID设计原则简介.抽丝剥茧,细说架构那些事——[优锐课] 当你刚接触软件工程时,这些原理和设计模式不容易理解或习惯.我们都遇到了问题,很难理解SOLID + DP的 ...

  10. 关注图像采集视频传输之USB3.0 应用

    参考文献 百度文库 http://baike.baidu.com/link?url=82OyhoL1AsNaT35CvscmeZqHjlggtFw-Cez2qYwjLHNXGhXfv38pUlsIJB ...