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. 【LEETCODE】49、数组分类，简单级别，题目：566，1089

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  2. 【C#】上机实验三

    实验1: 定义一个 TimePeiod 类 包含: hour , minute , second 实现时间的在 时分秒上的加法. using System; using System.Collecti ...

  3. quartz2.3.0（四）JobDataMap—带状态集合的定时器内置集合

    任务类 package org.quartz.examples.example4; import java.util.Date; import org.quartz.DisallowConcurren ...

  4. 方法1：使用Jenkins构建Docker镜像 --SpringCloud

    前提意义: SpringCloud微服务里包含多个文件夹,拉取仓库的所有代码,然后过根据选项参数使用maven编译打包指定目录的jar,然后再根据这个目录的Dockerfile文件制作Docker镜像 ...

  5. MVC-10HTML助手

    HTML帮助器用于修改HTML输出. HTML帮助器 通过MVC,HTML帮助器类似于传统的ASP.NET Web Form控件. 类似ASP.NET中的web form控件,HTML帮助器用于修改H ...

  6. 【转载】JVM结构、GC工作机制详解

    文章主要分为以下四个部分 JVM结构.内存分配.垃圾回收算法.垃圾收集器.下面我们一一来看. 一.JVM结构 根据<java虚拟机规范>规定,JVM的基本结构一般如下图所示: 从左图可知, ...

  7. python day7： time,datetime,sys,pickle,json模块

    目录 python day 7 1. time模块 2. datetime模块 2.1 date类 2.2 time类 2.3 datetime类 2.4 timedelta类 2.5 tzinfo时 ...

  8. 服务端php之文件上传

    知识点 echo $_SERVER['PHP_SELF']; 自动获取当前文件的路劲(即提交地址为当前页面) 当一个表单有文件域(即文件上传)的时候,method(提交方式)要设置post,这样更加安 ...

  9. 使用layui框架根据字段来设置tr行的背景色

    问题来源:最近在写公司项目时使用layui遇见的问题,老板要求根据td字段来设置整行tr的背景色. 解决:一开始数据比较少的时候只是直接在页面根据js动态判断字段然后来更改背景色,结果能够成功,但是后 ...

  10. python图片二值化提高识别率

    import cv2from PIL import Imagefrom pytesseract import pytesseractfrom PIL import ImageEnhanceimport ...