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. 关于使用Java Mail发邮件的问题

    今天做东西的时候突然遇到需要发邮件的问题,然后就使用SMTP协议进行邮件的发送.用了一个工具类简化邮件发送的功能, 在这次试验中,我使用了自己的QQ邮箱进行发送邮件的发送者. public class ...

  2. 【BZOJ4001】【Luogu P3978】 [TJOI2015]概率论

    题目描述: Description: Input 输入一个正整数N,代表有根树的结点数 Output 输出这棵树期望的叶子节点数.要求误差小于1e-9 Sample Input 1 Sample Ou ...

  3. Thinkphp5——pathinfo的访问模式、路径访问模式

    tp5访问入口文件的时候是,访问public目录下的index.php,那么她真正访问的url到底是什么?如何去访问其他页面,实际上她默认使用的PATH_INFO模式进行访问. PATHINFO模式 ...

  4. 【立即报名】解码AI大杀器：华为云GPU+Tensorflow 容器实战

    导语: 人工智能的火热,带来了一波学习TensorFlow深度学习框架的热潮.聊深度学习免不了要用GPU,但目前GPU费用较高,对于个人学习者和创业公司来讲的话,按需配置的云GPU服务器是一个不错的选 ...

  5. jenkins的部署

    一.jenkins相关工具安装 基于tomcat安装iptables  -F setenforce  0 systemctl stop firewalld.service Jdk安装 wgt  htt ...

  6. uglify-js 和uglify-es

    uglify-js 它不支持压缩 es6,参考github的issue It seems like uglify-js does not support es6? uglify-js在压缩代码时,遇到 ...

  7. react-native测试安装

    !!!注意!!!:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost等几个第三方库编译.这些库在国内即便翻墙也很难下载成功,导致很多人无法运行iOS项目!!!中文网在论 ...

  8. 使用 nginx 实现虚拟主机

    当多个系统需要部署的时候,有系统访问很小,为了节省成本,就需要将多个系统部署到同一台服务器上,怎么在同一台服务器上,完成不同系统的部署和访问,就需要使用虚拟主机实现. 使用端口实现虚拟主机 配置 ng ...

  9. ZooKeeper初步

    ZooKeeper 简介: 顾名思义 zookeeper 就是动物园管理员,他是用来管 hadoop(大象).Hive(蜜蜂).pig(小猪)的管理员, Apache Hbase 和 Apache S ...

  10. [TimLinux] Linux LVM逻辑卷操作指南

    1. 新磁盘创建分区 $ fdisk /dev/newdisk n 创建分区 p 显示分区表 t 使用8e分区类型 d 删除已经存在的分区 w 将分区表写入并退出 q 不写入直接退出 如果使用整个磁盘 ...