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高级教程：Java并发性和多线程

    Java并发性和多线程: (中文,属于人工翻译,高质量):http://ifeve.com/java-concurrency-thread-directory/ (英文):http://tutoria ...

  2. SystemTap 学习笔记 - 安装篇

    https://segmentfault.com/a/1190000000671438 在安装前,需要知道下自己的系统环境,我的环境如下: uname -r 2.6.18-308.el5 Linux ...

  3. DTRACE简介之完结篇3

    https://blogs.oracle.com/swan/entry/dtrace%E7%AE%80%E4%BB%8B_3 DTRACE简介之完结篇 By samwan on 四月 13, 2007 ...

  4. 安装Nginx须要系统的辅助软件(linux)

    安装Nginx须要系统的辅助软件(linux): yum -y install make gcc gcc-c++ ncurses-devel yum -y install zlib zlib-deve ...

  5. js美化压缩工具Mark一下

    jscompress https://www.jscompress.cn/

  6. hive中使用正則表達式不当导致执行奇慢无比

    业务保障部有一个需求,须要用hive实时计算上一小时的数据.比方如今是12点,我须要计算11点的数据,并且必须在1小时之后执行出来.可是他们用hive实现的时候发现就单个map任务执行都超过了1小时, ...

  7. Linux下Gcc 的编译过程

    在linux下开发难免会用到gcc编译.GCC(GNU Compiler Collection.GNU编译器套装),是由 GNU 开发的编程语言编译器.它是GNU编译器套装以GPL许可证所发行的自由软 ...

  8. 将JSON对象转换成IList，好用linq

    JObject JToken JProperty IList<> 搞得头都大了,记而备忘: JObject json = ..... JToken[] jps = json["r ...

  9. Codeforces Round #320 (Div. 2) [Bayan Thanks-Round] B. Finding Team Member 排序

                                                                      B. Finding Team Member             ...

  10. HDU 5763Another Meaning

    Another Meaning Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...