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. 精确选择识别png图片有像素的区域

    /** * * *---------------------------------------* * | ***精确选择识别png图片有像素的区域*** | * *----------------- ...

  2. NEST routing timeout scroll

    /// <summary> /// PUT /employee/employee/9e5e50da-7740-488e-bee2-b24951435691?routing=test_rou ...

  3. vue element-ui el-date-picker如何限制选择时间为当天之前

    <el-date-picker  v-model="firstdate"  :picker-options="pickerOptions0"  type= ...

  4. UCOSII软件定时器

    API函数 //创建 OS_TMR *OSTmrCreate (INT32U dly, INT32U period, INT8U opt, OS_TMR_CALLBACK callback, void ...

  5. 整合91平台接入的ANE

    来源:http://www.swfdiy.com/?p=1328 91平台接入的SDK只有objectC版和java版, 现在如果要在AIR里使用SDK,只能编写ANE整合进来. 91SDK = 几个 ...

  6. C# 利用特性(Attribute)实现通用实体类数据合法校验

    用过asp.net mvc 的都应该知道,在实体类上添加一些特性,可以实现后端实体的数据校验,这里简单实现一下 实现原理:利用反射获取实体的每一个属性,并通过属性获取属性上标注的特性,调用特性的Val ...

  7. linux后台运行、关闭、查看后台任务常用命令

    一.& 加在一个命令的最后,可以把这个命令放到后台执行,如: [root@bqh-01 ~]# watch -n 3 "sh 1.sh"  #每3s在后台执行一次1.sh脚 ...

  8. Elasticsearch 是什么

    Elasticsearch 是什么 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功 ...

  9. java8 lamb表达式对List排序

    场景一:List<Long> 或其他泛型,非对象 List<Long> ids = new ArrayList(); ids.add(100000001L); ids.add( ...

  10. c# BufferedStream 类