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. Orcle定时生成表数据作业

    --建表 create table table41( id ) not null, --主键 col1 ), col2 ), col3 ), col4 int, col5 timestamp, col ...

  2. u启动为苹果笔记本重装win7系统教程

    准备更换系统的苹果笔记本一台!   上述需要准备的东西均准备好以后我们就开始今天的教程了!!   首先,将已经制作好启动盘的u启动u盘插入到苹果笔记本上的usb插口,然后开机!   由于苹果笔记本电脑 ...

  3. webpack 输出多个文件

    http://react-china.org/t/webpack/1870/2 webpack 文章 entry = { "button": "demo/button/i ...

  4. Logstash学习系列之基础介绍

    Logstash功能特性 能集中处理各种类型的数据 能标准化不同模式和格式的数据 能快速的扩展自定义日志的格式 它具有收集,分析和转发数据流的功能 Logstash运行参数 -f 指定配置文件 -e ...

  5. 【大数据处理架构】1.spark streaming

    1. spark 是什么? >Apache Spark 是一个类似hadoop的开源高速集群运算环境  与后者不同的是,spark更快(官方的说法是快近100倍).提供高层JAVA,Scala, ...

  6. redux 存值 及 取值 的操作

    项目目录 首先,一个基于React + Redux + React-Router的项目目录可以按照我下方的图片来构建: 其中assets目录用于存放项目的静态资源,如css/图片等,src目录则用于存 ...

  7. Sublime Text 2 编辑器实用技巧大全

    http://blog.163.com/lgh_2002/blog/static/440175262012429146486/

  8. pat(A) 1063. Set Similarity(STL)

    代码: #include<cstdio> #include<cstring> #include<set> using namespace std; set<i ...

  9. ASP.NET MVC Model之二模型绑定

    Asp.net mvc中的模型绑定,或许大家经常用,但是具体说他是怎么一回事,可能还是会有些陌生,那么,本文就带你理解模型绑定.为了理解模型绑定,本文会先给出其定义,然后对通过比,来得出使用模型绑定的 ...

  10. core.async中go的作用研究

    (defmacro go "Asynchronously executes the body, returning immediately to the calling thread. Ad ...