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. js 使用 "use strict"

    "use strict"是JavaScript中一个非常好的特性,而且非常容易使用. 使用方法 // file.js "use strict" function ...

  2. 浅谈Vue.js2.0某些概念

    Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统.   A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...

  3. vue-cli 3.0 安装

    一.安装vue-cli 脚手架命令 npm install -g vue-cli   适用于vue-cli 2.0 npm install -g @vue/cli 适用于vue-cli 3.0 卸载命 ...

  4. 解决internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'resolve'

    internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'resolve' 根据提示可以知道有依赖没有安装完 ...

  5. sql 注入风险

    目录 sql 注入风险 什么是sql注入呢? 查看sql注入风险 如何避免 sql 注入风险 pymysql 简单规避注入风险示列 sql 注入风险 什么是sql注入呢? 参考百度 查看sql注入风险 ...

  6. thinkPHP中session()方法用法详解

    本文实例讲述了thinkPHP中session()方法用法.分享给大家供大家参考,具体如下: 系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成. 用法 ? ...

  7. php ajax生成excel并下载

    目标:使用php,通过ajax请求的方式生成一个excel,然后下载. 思路:大致思路是发送一个ajax请求到后台,后台php处理后生成一个excel文件,然后把生成的文件放到一个临时目录,然后把文件 ...

  8. DataPipeline的增量数据支持回滚功能

    DataPipeline的增量数据支持回滚功能 第一步:数据任务有增量数据时,回滚按钮激活,允许用户使用该功能进行数据回滚. 第二步:点击回滚按钮,允许用户选择回滚时间或者回滚位置进行数据回滚.选择按 ...

  9. hybris backoffice创建product遇到的synchronization问题和解答

    我从product DSC-H20_MD clone了一个新的product,code为DSC-H20_MD1 因为它的状态有个红灯: 所以我点了这个sync按钮: 结果报这个错: 之后这个clone ...

  10. FastDFS+Nginx搭建Java分布式文件系统

    一.FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用FastDFS ...