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. Linux下启用IP转发功能（主要针对Ubuntu的使用）

    说明:以下的操作只要在Linux下都是通用的. Linux发行版默认情况下是不开启IP转发功能的.如果架设一个Linux路由或者VPN服务就需要开启该服务. 1.通过访问sysctl的内核ipv4.i ...

  2. JDBC驱动类型

    一下内容引用自http://wiki.jikexueyuan.com/project/jdbc/drive-types.html: 一.什么是JDBC驱动程序? JDBC驱动实现了JDBC API中定 ...

  3. Elasticsearch学习系列之mapping映射

    什么是映射 为了能够把日期字段处理成日期,把数字字段处理成数字,把字符串字段处理成全文本(Full-text)或精确(Exact-value)的字符串值,Elasticsearch需要知道每个字段里面 ...

  4. http://www.cnblogs.com/sprinkle/

    http://www.cnblogs.com/sprinkle/ http://www.cnblogs.com/sprinkle/

  5. REST API 安全设计

    REST API 安全设计 2017年04月27日 18:34:27 阅读数:1699   Rest API 的那些事儿 作者/ asterisk 在软件行业快速发展的今天,传统的软件授权已经不能足以 ...

  6. 标准ACL、扩展ACL和命名ACL的配置详解

    访问控制列表(ACL)是应用在路由器接口的指令列表(即规则).这些指令列表用来告诉路由器,那些数据包可以接受,那些数据包需要拒绝. 访问控制列表(ACL)的工作原理 ACL使用包过滤技术,在路由器上读 ...

  7. 查找olr备份路径

    使用:ocrdump -local <olr_dump_name> more <olr_dump_name> 来查找 [SYSTEM.OLR.BACKUP.LOC] 的相应键值 ...

  8. react-native redux 操作

    1.项目目录 2.redux (1)app/redux/action/action.js /** * 步骤一 * 行为 action */ // 定义行为名称 export const CHANGE_ ...

  9. 【Qt入门实践】Qt之哲学家问题（linux 多线程）

    转载请注明出处:http://blog.csdn.net/feng1790291543 linux多线程实现哲学家问题,依据哲学家吃饭.拿筷子.放下筷子...... watermark/2/text/ ...

  10. nginxserver报403 forbidden错误的解决的方法

     改动nginx.config文件内容: location / {             #root   html;             root   D:\java;            ...