1.div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        #container{
            width: 100%;
            height: 950px;
            background-color: darkgray;
        }
        #heading{
            width: 100%;
            height: 10%;
            background-color: antiquewhite;
        }
        #content_menu{
            width: 30%;
            height: 80%;
            background-color: cadetblue;
            float: left;
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: darksalmon;
            float: left;
        }
        #footing{
            width: 100%;
            height: 10%;
            background-color: cornflowerblue;
            clear: left;
        }
    </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>

2.table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="background-color: darkgray">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: rebeccapurple">
            </td>
        </tr>
        <tr>
            <td width="30%" height="80%" style="background-color: blue"></td>
            <td width="70%" height="80%" style="background-color: gold"></td>
        </tr>
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: aquamarine"></td>
        </tr>
    </table>
</body>
</html>

html布局的更多相关文章

  1. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  2. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  3. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  4. 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  6. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  7. Android如何制作漂亮的自适布局的键盘

    最近做了个自定义键盘,但面对不同分辨率的机型其中数字键盘不能根据界面大小自已铺满,但又不能每种机型都做一套吧,所以要做成自适应,那这里主讲思路. 这里最上面的titlebar高度固定,下面输入的金额高 ...

  8. 页面布局class常见命名规范

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

  9. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  10. CSS3新特性应用之结构与布局

    一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...

随机推荐

  1. JasperReport使用心得

    1. JasperReport 报表文件视图化生成工具iReport. iReport做为一个生成JasperReport的视图工具,和我们是使用的大多数报表创建工具没有太大的差别,都是拖控件,搭出报 ...

  2. OpenGL ES 2.0 卷绕和背面剪裁

    基本知识 背面剪裁是指渲染管线在对构成立体物体的三角形图元进行绘制时,仅当摄像机观察点位于三角形正面的情况下才绘制三角形. OpenGL ES中规定若三角形中的3个顶点的卷绕顺序是逆时针则摄像机观察其 ...

  3. OpenGL ES 2.0 符点精度

    片元着色器中使用符点相关类型的变量时与顶点着色器中有所不同,在顶点着色器中直接声明使用即可,而在片元着色器中必须指定精度. lowp 低 mediump 中 highp 高 指定整个着色器中符点相关类 ...

  4. SMA2SATA、PCIe2SATA转换模块(也有叫：Sata Test Fixtures)

    SMA2SATA.PCIe2SATA测试夹具(Sata Test Fixtures) 去年制作SMA2SATA.PCIe2SATA适配器的过程早就想写出来,但一直没有时间,今天星期六有个空儿,简单整理 ...

  5. Python一路走来 - 模块

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  6. 畅通工程再续--hdu1875

    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  7. Monkey and Banana（HDU 1069 动态规划）

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  8. 【好程序员笔记分享】——URL解码与编码

    -iOS培训,iOS学习-------型技术博客.期待与您交流!------------ 1.url编码 ios中http请求遇到汉字的时候,需要转化成UTF-8,用到的方法是: NSString * ...

  9. N年之后，只记得三井寿！而我们程序猿们也要加油珍惜时间！

    [感觉程序员看一篇励志文章效果大于6篇技术文章,3份源码下载.....所以上此文] [说明:本文不少段落是摘自别人文章,因为本人写程序的文笔有限,怕感动不了大家,所以摘取了不错的部分] 前段时间重新看 ...

  10. 配置wamp环境使得在命令行下也能执行socket扩展

    首先在apache中开启socket扩展 php环境安装目录\bin\apache\apache2.2.17\bin\php.ini 去掉前面的';'   extension=php_sockets. ...