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. Appium运行报错：No Chromedriver found that can automate Chrome '39.0.0'

    运行appium切换webview时候遇到报错:’No Chromedriver found that can automate Chrome 'xx.xx.xx' 此报错是因为Appium在运行过程 ...

  2. 《Spring Cloud构建微服务架构》系列博文示例

    SpringCloud-Learning   源码下载地址:http://download.csdn.net/detail/k21325/9650968     本项目内容为Spring Cloud教 ...

  3. Harbor安装(docker-compose) -- 企业级Registry仓库

    根据Harbor官方描述: Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docker Distri ...

  4. angularjs的select使用及默认选中

    1 ng-model="standardCourse.showHours"代替name 2 ng-selected = "1"代替selected=" ...

  5. 九. jenkins用户权限管理

    由于jenkins默认的权限管理体系不支持用户组和角色的配置,所以需要使用第三方插件来支持角色的配置: Role-based Authorization Strategy 1.先安装插件,如下: 2. ...

  6. Bash Shell中命令行选项/参数处理

    0.引言 写程序的时候经常要处理命令行参数,本文描述在Bash下的命令行处理方式. 选项与参数: 如下一个命令行: ./test.sh -f config.conf -v --prefix=/home ...

  7. 发布delphi程序（build with runtime package）要带哪些文件？

    Delphi提供两种方式来编译你的程序:使用包或者是单独的exe 使用包,你可以使用如下方法设置: 项目选项(菜单project->options->Packages页), 在Runtim ...

  8. win10下cmd备注

    要复制cmd里的字符串,右键选标记,选中待复制的字符串,ctrl+c 复制,ctrl+v粘贴内容(或者右键选择复制).这项操作支持复制cmd里的内容到其他地方,如txt里 win10之前cmd不支持c ...

  9. nginx的配置系统

    nginx的配置系统由一个主配置文件和其他一些辅助的配置文件构成.这些配置文件均是纯文本文件,全部位于nginx安装目录下的conf目录下. 配置文件中以#开始的行,或者是前面有若干空格或者TAB,然 ...

  10. QTP与QC整合

    QC-QTP整合 在本节中,我们将学习如何将QTP和QC整合.通过整合,在QTP自动化脚本可以直接从Quality Center执行.建立连接,第一个步骤是安装所需的加载项.我们将了解如何通过采取样品 ...