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. Android GIS开发系列-- 入门季（13）Gdal简单写个shp文件

    Gdal是用来读写栅格与矢量数据的,在Gdal官网,可以下载相关的资源进行平台的编译.其实Arcgis底层也是用Gdal来读取shp文件的,那在Android中可以直接读写shp文件吗,是可以的.这里 ...

  2. SD卡 驱动层测速

    init_timer(&timer1); timer1.function = test_time; timer1.data = ; timer1.expires = jiffies + mse ...

  3. TQ2440 学习笔记—— 1、Windows平台下开发工具安装与环境建立

    板子:广州天嵌公司的TQ2440,处理器为三星的S3C2440 1.开发工具的安装与环境建立 系统:win7  64位 SecureCRT软件:该软件能够取代Windows中的超级终端,是个非常好的串 ...

  4. 嵌入式开发之cmos---前端采集aptina cmos

    http://wenku.baidu.com/link?url=NFl5ye1-o5GNMVGmxBmot1v1HQBOZRA2xo7__sgxxLnpHqodpqtfIW_pf4QNGRX4u8n8 ...

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

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

  6. ATM网络

    ATM是Asynchronous Transfer Mode(ATM)异步传输模式的缩写,是实现B-ISDN的业务的核心技术之一.ATM是以信元为基础的一种分组交换和复用技术

  7. bzoj1776

    点分治/贪心 对于点分治的理解不够深刻...点分治能统计树上每个点对的信息,那么这里就是统计同种颜色点对之间的最大距离,自然可以用点分 然后点分,每次统计最大距离,但是略微卡常... 还有一种贪心的方 ...

  8. Could not find modernizr-2.6.2 in any of the sources GitLab: API is not accessible

    Could not find modernizr-2.6.2 in any of the sources GitLab: API is not accessible bundle exec rake ...

  9. Android下载资源

    下面提供了源码下载地址,供有兴趣的朋友下载, android音乐播放器源码   由于本人才疏学浅,有很多地方不够完善,希望大家指证. 免费下载地址在 http://linux.linuxidc.com ...

  10. Vue.js 项目接口管理

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 本文使用vue-cli生成的项目举例. 第一步.在src目录下新建一个文件夹http,在http目录下建 ...