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. jmeter添加自定义扩展函数之MD5加密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  2. Oracle基础数据类型与运算符

    Oracle基础数据类型: 1. 字符型:字符串 char(最大2000), nchar(最大1000, 支持                           Unicode)--->固定长 ...

  3. python打开文件失败，报错'gbk' codec can't decode byte 0xbf in position 2: illegal multibyte sequence

    python3.7,python3.6都存在的问题: 读取的文件编码是utf-8 第1行是空行.#开头都可能会报这个错误: E:\count_packet>python string_count ...

  4. java中Comparator比较器顺序问题，源码分析

    提示: 分析过程是个人的一些理解,如有不对的地方,还请大家见谅,指出错误,共同学习. 源码分析过程中由于我写的注释比较啰嗦.比较多,导致文中源代码不清晰,还请一遍参照源代码,一遍参照本文进行阅读. 原 ...

  5. iOS 自己写的对话框中加入三个输入框

    -(void)dialog:(NSString*)title okTitle:(NSString*)okTitle placeholder:(NSString*)placeholder finish: ...

  6. BZOJ 4657 (网络流)

    题面 Nick最近在玩一款很好玩的游戏,游戏规则是这样的: 有一个n*m的地图,地图上的每一个位置要么是空地,要么是炮塔,要么是一些BETA狗,Nick需要操纵炮塔攻击BETA狗们. 攻击方法是:对于 ...

  7. c# 自定义控件之 ComboBox

    winform 自带的 combobox 无法支持根据输入文本匹配列表中的项目,需要使用自定义控件. public class MyCombobox : ComboBox { //初始化数据项 pri ...

  8. unity3D中的Input按键方法检测

    一,按键的按下抬起等识别方法 void Update () { ; ; if (Input.GetKeyDown (KeyCode.A)) { Debug.Log("A按下一次") ...

  9. HTML页面仿iphone数字角标

    做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...

  10. 2018-8-10-WPF-判断USB插拔

    title author date CreateTime categories WPF 判断USB插拔 lindexi 2018-08-10 19:16:53 +0800 2018-8-5 13:0: ...