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. Java使用Memcached和Redis简单示例

    package xmq.study.memcached; import java.io.IOException; import java.net.InetSocketAddress; import n ...

  2. java监控工具jconsole

    jconsole可以监控本地和远程进程 jvisualvm

  3. android_handler(二)

    这篇记录 android 消息机制中.WorkThread 模拟向网络訪问数据,获得数据后,返回 message 发送给 MainThread ,并改动 TextView 的 text 的这种一个步骤 ...

  4. iOS_开发中遇到的那些问题_1

    [自编号:60][AutoLayout中,怎样让ImageView保持固定的宽高比?比如1:1] 先将imageViewframe手动写成:宽20,高20,再勾选Aspect Ratio加入宽高比约束 ...

  5. Django打造大型企业官网（六）

    4.9.根据轮播图个数修改小圆点数量 src/js/index.js function Banner() { this.bannerWidth = 798; } Banner.prototype.in ...

  6. OCP-1Z0-051-题目解析-第21题

    21. Examine the description of the EMP_DETAILS table given below:  name               NULL           ...

  7. 通俗理解LDA主题模型

    通俗理解LDA主题模型 0 前言 印象中,最開始听说"LDA"这个名词,是缘于rickjin在2013年3月写的一个LDA科普系列,叫LDA数学八卦,我当时一直想看来着,记得还打印 ...

  8. [软件分享]aboboo英语复读机 使用心得

    软件名称:aboboo www.aboboo.com 作用:英语复读,社区互动,丰富的材料,可以全方位锻炼听说能力. 技巧1:如何锻炼口语? 注册一个帐号,登陆后下载使用社区自带的课件,然后使用“随意 ...

  9. ios18---自定义控件3改进

    控制器: // XMGViewController.h #import <UIKit/UIKit.h> @interface XMGViewController : UIViewContr ...

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

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