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中如何获取spring中配置的properties文件内容

    有2种方式: 一. 1.通过spring配置properties文件 [java]  <bean id="propertyConfigurer"      class=&qu ...

  2. 获取select 选中的option中自定义的名称的之

    <select style="width: 220px;height: 20px;margin: 0 0 0 20px;" id="invest_ticket&qu ...

  3. 007 Vlan config

    sw0(config)#vlan 2 sw0(config-vlan)#name Sales sw0(config-vlan)#vlan 3 sw0(config-vlan)#name Tech sw ...

  4. nlssort排序

    ALTER SESSION SET NLS_SORT=''; 排序影响整个会话 Oracle9i之前,中文是按照二进制编码进行排序的. 在oracle9i中新增了按照拼音.部首.笔画排序功能.设置NL ...

  5. android插件化-apkplug从宿主启动插件Activity-06

    插件是一个apk文件它存在自己的Activity界面和UI显示,本节将解说如何配置插件的启动Activity以及如何从宿主启动它. 一 配置插件apk的对外启动Activity (内部activity ...

  6. Xubuntu 计划从 19.04 版本开始停止提供 32 位安装镜像（XDE/LXQt的 Lubuntu 成为了目前唯一仍然提供 32 位安装镜像的 Ubuntu 桌面发行版）

    Ubuntu 17.10 以及其他许多 *buntu 衍生品都已在今年早些时候停止提供 32 位安装镜像.但其中有一个依然坚持提供适用于 i386 架构的镜像,它就是 Xubuntu,但现在 Xubu ...

  7. beego4---web项目结构

    app.conf appname = blog1 httpport = runmode = dev controllersmy package controllersmy //跟外面的包名一致 imp ...

  8. android 在代码中设置字体颜色 问题

    项目中需要在代码中控制字体颜色 之前是直接引用资源文件  但是不行 tv.setTextColor(R.color.textColor_black); 无效果   后来在网上找了资料发现 要从reso ...

  9. codeforces 245H Queries for Number of Palindromes RK Hash + dp

    H. Queries for Number of Palindromes time limit per test 5 seconds memory limit per test 256 megabyt ...

  10. 洛谷P1850 [noip2016]换教室——期望DP

    题目:https://www.luogu.org/problemnew/show/P1850 注释掉了一堆愚蠢,自己还是太嫩了... 首先要注意选或不选是取 min 而不是 /2 ,因为这里的选或不选 ...