1、一列固定宽度且居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .nav,.banner,.main,.footer {

            width: 960px;

            height: 50px;

            border: 1px dashed rgb(22, 14, 14);

            margin: 0 auto;

        }

        .banner{

            height: 250px;

            margin: 10px auto;

        }

        .main {

            height: 300px;

            margin: 10px auto;

        }

    </style>

</head>

<body>

    <div class="nav"></div>

    <div class="banner"></div>

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

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

</body>

</html>

2、两列左窄右宽

<body>

    <div class="nav"></div>

    <div class="banner"></div>

    <div class="main">

        <div class="main-left"></div>

        <div class="main-right"></div>

    </div>

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

</body>
<style>

        .nav, .banner, .main, .footer {

            width: 960px;

            height: 50px;

            border: 1px dashed #000;

            margin: 0 auto;

        }

        .banner {

            height: 100px;

            margin: 10px auto;

        }

        .main {

            height: 300px;

            margin-bottom: 10px;

        }

        .main-left {

            width:240px;

            height: 300px;

            background: rgb(153, 27, 27);

            float: left;

        }

        .main-right {

            width: 720px;

            height: 300px;

            background: rgb(30, 32, 155);

            float: right;

        }

    </style>

3、通栏平均分布

<body>

    <div class="w">

        <div class="nav"></div>

    </div>

    <div class="main">

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

    </div>

    <div class="w">

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

    </div>

</body>
<style>

        *{

            padding:;

            margin:;

        }

        .w {

            height: 100px;

            background: rgb(231, 221, 221);

        }

        .nav{

            width: 960px;

            height: 100px;

            background: rgb(163, 138, 138);

            margin: 0 auto;

        }

        .main{

            width: 960px;

            height: 300px;

            background: rgb(122, 62, 62);

            margin: 10px auto;

        }

        .box1, .box2, .box3, .box4 {

            width: 232px;

            height: 300px;

            float: left;

            background: rgb(32, 24, 148);

        }

        .box2{

            background: rgb(173, 84, 84);

            margin: 0 10px;

        }

        .box3{

            background: rgb(49, 5, 5);

            margin-right: 10px;

        }

        .box4{

            float: right;

            background: rgb(42, 185, 23);

        }

        .footer{

            width: 960px;

            height: 100px;

            background: rgb(224, 126, 126);

            margin: 0 auto;

        }

    </style>

常见的div布局的更多相关文章

  1. 常见的div布局面试题

    题目1:如何让一个子元素在父元素里水平垂直居中? 方法1 .box{width:400px;height:400px;background:#ccc;position:relative;} .chil ...

  2. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  3. DIV布局之道一：DIV块的水平并排、垂直并排

    DIV布局网页元素的方式主要有三种:平铺(并排).嵌套.覆盖(遮挡).本文先讲解平铺(并排)方式. 1.垂直平铺(垂直排列) 请看如下代码 CSS部分: CSS Code复制内容到剪贴板 .lay1{ ...

  4. CSS常见的五大布局

    本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...

  5. 几种常见的CSS布局

    本文概要 本文将介绍如下几种常见的布局: 其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局.另外几种可以猛戳实现三栏布局的几种方法 一.单列布局 常见的单列布局有两种: header,co ...

  6. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  7. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  8. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  9. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

随机推荐

  1. Atcoder Grand Contest 036 D - Negative Cycle

    Atcoder Grand Contest 036 D - Negative Cycle 解题思路 在某些情况下,给一张图加或删一些边要使图合法的题目要考虑到最短路的差分约束系统.这一题看似和最短路没 ...

  2. 深度学习Tensorflow相关书籍推荐和PDF下载

    深度学习Tensorflow相关书籍推荐和PDF下载 baihualinxin关注 32018.03.28 10:46:16字数 481阅读 22,673 1.机器学习入门经典<统计学习方法&g ...

  3. SQL Server 索引优化——无用索引

    我们知道,合理的索引能大幅提升性能,但冗余的索引也会降低数据库性能.随着我们业务的发展,数据库的中的表.表结构.查询的内容都有可能发生变化.这样,有的索引就可能不再使用了,需要删除(因为维护索引即浪费 ...

  4. Centos 7系统在线安装docker

    在线安装docker 以下操作步骤均在root用户下操作 1. 检查内核是否符合要求 Docker 要求 Centos系统的内核版本高于 3.10 ,建议在Centos 7版本命令如下: uname ...

  5. (一) CentOS 7 进行 Docker CE 安装

    参考并感谢 官方文档: https://docs.docker.com/install/linux/docker-ce/centos/ 卸载旧版本 # 停止所有正在运行的容器 docker stop ...

  6. 【洛谷 P4052】 [JSOI2007]文本生成器（AC自动机，DP）

    题目链接 AC自动机上dp第一题嗷. 如果直接求可读文本的数量,显然要容斥,不好搞. 于是考虑求不可读文本的数量,再用\(26^m\)减去其即可. 建出AC自动机,如果一个节点为单词结尾或其fail链 ...

  7. 【JavaWEB SSH】jsp页面传值后台Controller 部分值绑定不上实体类

    //前端ajax代码 1 var oldpassword = $('#old_password').val(); var password = $('#L_pass').val(); var user ...

  8. Jenkins配置Publish Over SSH讲解说明

    原创 Jenkins配置Publish Over SSH讲解说明 2018-08-22 11:59:30 M.Blog 阅读数 3764更多 分类专栏: Jenkins   版权声明:本文为博主原创文 ...

  9. django admin日期变为可以修改

    Django - 日期.时间字段   阅读目录 DateTimeField.auto_now DateTimeField.auto_now_add admin中的日期时间字段 如何将创建时间设置为“默 ...

  10. 【JUC】8.CopyOnWriteArrayList源码分析

    CopyOnWriteArrayList 解决脏读问题:牺牲写的效率,提高读的效率 CopyOnWriteArrayList是一种读写分离的思想体现的ArrayList: 它将读写的操作对象分离开来: ...