HTML布局＿div布局

<!doctpye>

<html>

<head>

    <meta charset = 'utf-8'>

    <title>HTML布局</title>

    <meta name = 'keywords' content = 'HTML布局,div布局>

    <meta name = 'description' content = 'HTML布局div布局介绍'>

    <style>

        body{

            margin:0px;

        }

        #container{

            background-color:pink;

            width:100%;

            height:770px;

        }

        #heading{

            background-color:aqua;

            width:100%;

            height:10%;

        }

        #content_menu{

            background-color:aquamarine;

            width:30%;

            height:80%;

            float:left;

        }

        #content_body{

            background-color:blueviolet;

            width:70%;

            height:80%;

            float:left;

        }

        #footing{

            background-color:blue;

            width:100%;

            height:10%;

            clear:both;

        }

    </style>

</head>

<body>

    <div id = 'container' >

        <div id = 'heading'>头部</div>

        <div id = 'content_menu'>内容菜单</div>

        <div id = 'content_body'>内容主体</div>

        <div id = 'footing'>底部</div>

    </div>

</body>

</html>

2017-12-04HTML布局＿div布局的更多相关文章

  1. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

  2. 用table布局和div布局的区别

    table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...

  3. div 布局

    转:http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理 ...

  4. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  5. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

  6. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  7. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  8. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  9. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

随机推荐

  1. [转] ASPNET Core 中获取应用程序物理路径

    如果要得到传统的ASP.Net应用程序中的相对路径或虚拟路径对应的服务器物理路径,只需要使用使用Server.MapPath()方法来取得Asp.Net根目录的物理路径,如下所示: // Classi ...

  2. STM32F104VG (一)中断与外部中断

    一.基础知识 1.ARM的中断优先级分硬件优先级和软件优先级两种 当中软件优先级又由抢占优先级和响应优先级组成 2.中断的优先级採用编号小优先的原则. 3.普通情况: 1).假设设定了软件优先级.先看 ...

  3. 【智能路由器】让MT7620固件openwrt支持USB

    [智能路由器]系列文章连接 http://blog.csdn.net/u012819339/article/category/5803489 首先确定硬件有USB,这个得检查板子是否引出了usb口,一 ...

  4. 怎样用ccache加速cocos2d-x android版本号的编译

    下面步骤在MAC下測试通过: 首先是安装CCache, 能够用homebrew brew install --HEAD ccache 也能够用源代码安装 git clone https://githu ...

  5. openstack （5）-- 部署 Neutron 网络服务

    Neutron 概念: 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要创建.修改和删除网络,网络的连 ...

  6. nRF52832之硬件I2C

    这几天一直在折腾nRF52832的硬件I2C,到了今天最终出现了成果,在此也印证了那句话:"耕耘就有收获" 52832的硬件I2C尽管官方提供了demo,可是自己对I2C通信理解的 ...

  7. asp.net mvc 的 视图（view ）的模块化开发

    目前所在项目有一个视图,几个模块都涉及到,对应不同的开发人员,虽然有SVN在管理,但代码冲突时有发生.并且大家的代码挤于其中,逻辑比较容易混乱. 将不同部件独立出去,实有必要. 分离方式,我知道的有 ...

  8. beego2---入门

    package main //beego既可以建立web应用也可以建立api应用 //beego是一个gohttp服务器的高层封装, import ( _ "beego1/routers&q ...

  9. Android编译详解之lunch命令 【转】

    本文转载自: Android编译详解之lunch命令 (2012-10-08 10:27:55) 转载▼ 标签: it 分类: android内核剖析     Android的优势就在于其开源,手机和 ...

  10. c#调用oracle存储过程返回数据集

    c#调用oracle存储过程返回数据集 2008-12-20 10:59:57|  分类: net|字号 订阅   CREATE OR REPLACE PACKAGE pkg_tableTypeIS  ...