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. flutter中的路由跳转

    在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...

  2. C++ string.replace的使用

    //下面是一个检查一个字符串中是否有'.'的函数,该函数将找到的'.'转化为'_'. inline void checkName(string& name) { std::; while (s ...

  3. SQLserver查询作业、视图、函数、存储过程中的关键字

    一.查询视图.函数.存储过程中的关键字 SELECT a.name,a.[type],b.[definition] FROM sys.all_objects a,sys.sql_modules b W ...

  4. 2019 牛客暑期多校 第二场 H Second Large Rectangle (单调栈）

    题目:https://ac.nowcoder.com/acm/contest/882/H 题意:一个大的01矩阵,然后现在要求第二大的全一矩阵是多少 思路:在这里我们首先学习一下另一个东西,怎么求直方 ...

  5. bug 自定义的json2bean的bug

    bug 在json2bean中如果不进行转换  if(bean instanceof HttpLogin){,将调用的市父类的Json2Meß 此并非最好的解决办法,应该用官方的json.toobje ...

  6. vector代替数组

    vector代替数组 1.声明一个int向量以替代一维的数组:vector <int> a;(等于声明了一个int数组a[],大小没有指定,可以动态的向里面添加删除). 2.用vector ...

  7. delphi vlc 安装bug 处理编译错误＂0＂ is an invalid value for the ＂DebugInformation＂ parameter of the ＂DCC＂

    处理编译错误＂0＂ is an invalid value for the ＂DebugInformation＂ parameter of the ＂DCC＂ [摘要:http://blog.csdn ...

  8. javascript获取网页宽高，屏幕宽高，屏幕分辨率等

    ​ <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...

  9. Https socket 连接

    介: 本文主要介绍了网络安全通讯协议 SSL/TLS 和 Java 中关于安全通讯的实现部分.并通过一个简单的样例程序实现,来展示如何在 Java 平台上正确建立安全通讯. 在人类建立了通信系统之后, ...

  10. 解决“每次打开office2010的word都会出现配置进度框”问题

       在win7中安装完office2010后.打开 *.doc文件时,总会弹出"配置进度框"问题,解决例如以下:  1)点击"開始"-->"执 ...