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. JDK1.8 动态代理机制及源码解析

    动态代理 a) jdk 动态代理 Proxy, 核心思想:通过实现被代理类的所有接口,生成一个字节码文件后构造一个代理对象,通过持有反射构造被代理类的一个实例,再通过invoke反射调用被代理类实例的 ...

  2. 日期和时间格式（ISO 8601）

    参考 ISO 8601 - Wikipedia ISO 8601 Date and time format

  3. 编译-构建Shell语法的语法树（parse tree）

    翻译自:Generating a parse tree from a shell grammar - DEV Community

  4. 练习1-20 编写程序detab,将输入中的制表符替换成适当数目的空格.

    1.问题描述 编写程序detab,将输入中的制表符替换成适当数目的空格,使空格充满到下一个制表符终止位的地方. 假设制表符终止位的位置是固定的, 换句话说每隔n列就会出现一个制表符终止位. 2.描述 ...

  5. Asp.Net Core 第02局：Program

    总目录 前言 本文介绍Program,它包含程序的入口Main方法.从这里开始... 环境 1.Visual Studio 2017 2.Asp.Net Core 2.2 开局 第一手:Program ...

  6. BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

    原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...

  7. P3375 【模板】KMP字符串匹配——kmp算法

    先上一波题目 https://www.luogu.org/problem/P3375 kmp模板 看了好久才想起来是个什么东西qwq #include<cstdio> #include&l ...

  8. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

  9. 解决 Failed to load class "org.slf4j.impl.StaticLoggerBinder"

    我们在使用日志记录网站或者应用时,有时候启动会出现这个告警: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder&q ...

  10. Django 模型层 ORM 操作

    运行环境 1. Django:2.1.3 version 2. PyMysql: 0.9.3 version 3. pip :19.0.3 version 4. python : 3.7 versio ...