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. 微信H5页面前端开发，大多数人都会遇到的几个兼容性坑

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input ...

  2. Linux sftp命令

    sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的网络的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 ...

  3. QSDK与OPENWRT区别

    QSDK与OPENWRT区别 来源 https://www.jianshu.com/p/178ae18b2570 QSDK是一种在openwrt的基础上,加入了高通atheros芯片相关资料的一种环境 ...

  4. 学了python能干什么

    学了python能做些什么 1.WEB开发 Python拥有很多免费数据函数库.免费web网页模板系统.以及与web服务器进行交互的库,可以实现web开发,搭建web框架,目前比较有名气的Python ...

  5. whois

    import 'dart:io'; import 'dart:convert'; main()async{ List a = ['1.cn','2.cn','3.cn','4.cn','5.cn',' ...

  6. 怎么对ZYNQ的FCLK做时钟组约束

    前言 对于包含PS和PL的设计,两者的数据交互PL必然会用到PS端的时钟. 对于FCLK(PS端时钟输入到PL端)的约束,此时钟的基础约束已在IP中产生.以下想约束其异步时钟的时钟组特性. 注意事项: ...

  7. day34-python之进程调用

    1.信号量 import threading,time class myThread(threading.Thread): def run(self): if semaphore.acquire(): ...

  8. [LeetCode] 64. 最小路径和 ☆☆☆(动态规划)

    描述 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入:[  [1,3,1], [1,5,1 ...

  9. 【MySQL】SQL语句基础

    一.操作数据库 1.1 创建数据库 1.2 查看数据库 1.3 修改数据库 1.4 删除数据库 1.5 选择数据库 二.操作表 2.1 创建表 2.2 查看表 2.3 修改表 2.4 删除表 三.操作 ...

  10. c#中关于textbox换行

    要让一个Windows Form的TextBox显示多行文本就得把它的Multiline属性设置为true. 这个大家都知道,可是当你要在代码中为Text属性设置多行文本[的时候可能会遇到点麻烦:) ...