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. git本地项目连接私人远程仓库以及遇到的问题

    一.引言 1.最开始的时候,我本地项目连接的是github远程仓库,现在要转到公司的私人远程仓库. 2.我和大家说两个事: (1)本地项目连接github远程仓库, (2)本地项目连接私人远程仓库, ...

  2. cbv请求分析

    CBV源码分析 DRF中中所有视图都是基于CBV形式完成, 所以分析其cbv源码, 了解drf的基本请求流程就比较有必要了. urls.py """下面是一个通用的url ...

  3. 简单ORM的实现

    简单的orm实现 我们在使用各种框架的时候,关于数据库这方面的使用,框架给我们提供了很好的封装,这个就是orm 关系映射 orm的底层无非就是做了关系映射 数据库的表(table) --> 类( ...

  4. git 路上的拦路虎 了解一下

    我们提交代码现在大部分都在用git  管理代码,有时候会遇到一些问题 用git 会发现一些问题 之前报了一些错误,没有记录,这次记录一下,顺便写一下解决方式: 输输入git remote add or ...

  5. 在modelarts上部署backend为TensorFlow的keras模型

    最近老山在研究在modelarts上部署mask-rcnn,源代码提供的是keras模型.我们可以将keras转化成savedModel模型,在TensorFlow Serving上部署,可参考老山的 ...

  6. 移动前端不得不了解的HTML5 head 头标签 —— link 标签

    目录 link 标签 rss订阅 不推荐的link标签 favicon 图标 link 标签 说到 link 标签,估计大家的第一反应和我一样,就是引入外部CSS样式文件的,不错,这是 link 标签 ...

  7. Java修炼——冒泡排序

    核心思想: 1)如有一个数列有 N(5)个元素,则至多需要 N-1(4)趟循环 才能保证数列有序 2) 每一趟循环都从数列的第一个元素开始比较,依次比较 相邻的两个元素,比较到数列的最后 3) 如果前 ...

  8. Java修炼——手写服务器项目

    项目工程总览: 1.Dispatcher类(一个请求与响应就是一个Dispatcher) package com.bjsxt.server; import java.io.IOException; i ...

  9. ST MCU的UID

    ST MCU芯片中的绝大部分都内置一串96位唯一标识码[unique ID].时不时有人问起这个东西,尤其最近感,觉询问它的人甚是热闹.这里跟大家一起简单分享下. 上面说了ST MCU芯片中的绝大部分 ...

  10. linux需要了解的网络基础知识

    第1章 网络命令 1.1 用户模式下的命令 1.1.1 enable切换到特权模式 Router>enable Router# 特权模式 Router# Router# 1.2 特权模式下的命令 ...