HTML CSS + DIV实现排版布局

1.网页可以看成是由一个一个“盒子”组成，如图：

由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
的盒子，这些"盒子"中放置着各种内容，页面就是由这些"盒子"拼凑起来

  • 案例布局分析：

单列布局案例：

代码如下：
<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>单列布局</title>

    </head>

    <style>

        body{

            margin:0;

        }

        .box{

            width:960px;

            margin:0 auto;

        }

        .box .header{

            height:120px;

            border:1px solid #f00;

            line-height:120px;

        }

        .box .main{

            height:300px;

            border:1px solid #0f0;

            line-height:300px;

        }

        .box .footer{

            height:100px;

            border:1px solid #00f;

            line-height:100px;

        }

        div{

            text-align:center;

        }

    </style>

    <body>

        <div class="box">

            <div class="header">头部</div>

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

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

        </div>

    </body>

</html>
运行结果：

双列布局案例：

代码如下：
<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>双列布局</title>

    </head>

    <style>

        body{

        margin:0;

        }

        .box{

            width:80%;

            margin:0 auto;

            overflow:hidden;

        }

        .box .left{

            width:30%;

            height:400px;

            background-color:#0f0;

            float:left;

        }

        .box .right{

            width:70%;

            height:400px;

            background-color:#f00;

            float:left;

        }

    </style>

    <body>

        <div class="box">

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

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

        </div>

    </body>

</html>
运行结果如下图：

三列布局案例：

代码如下：
<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>三列布局</title>

    </head>

    <style>

    body{

        margin:0;

    }

    .box{

        width:960px;

        margin:0 auto;

        position:relative;

    }

    .box .left{

        width:200px;

        height:400px;

        background-color:#0f0;

        position:absolute;

    }

    .box .center{

        height:400px;

        background-color:#00f;

        margin:0 300px 0 200px;

    }

    .box .right{

        width:300px;

        height:400px;

        background-color:#f00;

        position:absolute;

        right:0;

        top:0;

    }

    </style>

    <body>

        <div class="box">

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

            <div class="center"></div>

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

        </div>

    </body>

</html>
运行结果如下图：

混合布局案例：

代码如下：
<!doctype html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>混合布局</title>

    </head>

    <style>

    body{

        margin:0;

    }

    .box{

        width:960px;

        margin:0 auto;

    }

    .header{

        height:120px;

        background-color:#ddd;

    }

    .main{

        height:400px;

        background-color:#f00;

        position:relative;

    }

    .main .left{

        width:200px;

        height:400px;

        position:absolute;

        left:0;

        top:0;

        background-color:#0fccaa;

    }

    .main .center{

        height:400px;

        margin:0 305px 0 205px;

        background-color:#123456;

    }

    .main .right{

        width:300px;

        height:400px;

        position:absolute;

        right:0;

        top:0;

        background-color:#ff0;

    }

    .footer{

        height:80px;

        background-color:#ddd;

    }

    </style>

    <body>

        <div class="box">

            <div class="header"></div>

            <div class="main">

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

                <div class="center"></div>

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

            </div>

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

        </div>

    </body>

</html>
运行结果如下图：

总结：

排版布局需要掌握的知识

  • div 相关属性
  • float 浮动属性
  • position 定位属性
  • clear 清除浮动的应用

HTML CSS + DIV实现排版布局的更多相关文章

  1. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  2. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  3. 【转载】CSS + DIV 实现局部布局

    HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    ...

  4. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  6. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  7. HTML CSS + DIV实现整体布局 part2

    9.盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解,如图:     从上往下看,层次关系如下: 第1层:盒子的边框(border),     第2层:元素的内容(content).内边 ...

  8. [置顶] CSS+DIV总结

         HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...

  9. [技术博客]采用Bootstrap框架进行排版布局

    [技术博客]采用Bootstrap框架进行排版布局 网页的前端框架有很多很多种,比如Bootstrap.Vue.Angular等等,在最开始其实并没有考虑到框架这回事,开始阅读往届代码时发现其部分采用 ...

随机推荐

  1. Codeforces 510C （拓扑排序）

    原题:http://codeforces.com/problemset/problem/510/C C. Fox And Names time limit per test:2 seconds mem ...

  2. 累加器A与ACC区别

    累加器写成A或ACC在51汇编语言指令中是有区别的. ACC在汇编后的机器码必有一个字节的操作数,即累加器的字节地址E0H,A在汇编后则隐含在指令操作码中.所以在指令中A不能用ACC来替代,而对A的特 ...

  3. flask 实现简易图书管理

    """ 1.配置数据库 a.导入 SQLalchemy库 b.创建db对象,并配置参数 c.创建数据库 2.添加书和作者的模型 a.模型集成db.Model b.__ta ...

  4. ACM中java的使用 (转)

    ACM中java的使用 这里指的java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. 1. 输入: 格式为:Scanner ...

  5. sql查询某个时间内的数据

    hour) 七天之前的数据 SELECT * FROM commodity_order where create_time <= (now()-INTERVAL 7 DAY) order by ...

  6. C++中的异常处理（下）

    1,catch 语句块中可以抛出异常: 1,示意图: 2,func() 在 try 语句块中,说明它有可能抛出异常,抛出的异常有可能是整型或其它类型: 3,catch 语句块处理方式是将异常重新抛出去 ...

  7. Model-View-ViewModel (MVVM) Explained 转摘自：http://www.wintellect.com/blogs/jlikness/model-view-viewmodel-mvvm-explained

    The purpose of this post is to provide an introduction to the Model-View-ViewModel (MVVM) pattern. W ...

  8. canvas---从基础到实战

    canvas是H5新增的一个元素,可以用来描绘各种你想描绘的东西. canvas本身没有绘制能力,你可以把它当做一个容器,需要我们用脚本,也就是js来给他灌满水. 兼容性 1. IE9版本以上.Fir ...

  9. InnoDB不支持contains等

    并非所有引擎都支持全文本搜索MySQL.与所有其他的DBMS一样,MySQL具有一个具体管理和处理数据的内部引擎.在你使用CREATE TABLE语句时,该引擎具体创建表,而在你使用SELECT语句或 ...

  10. #Ubuntu16.0.4 LTS 安装RabbitMQ

    1.ubuntu下安装配置rabbitmq-server服务器环境:ubuntu16.0.4(向下兼容14.0.4)软件版本:RabbitMQ 3.7.5 .Erlang 20.1.7参考文档:htt ...