html布局

  1. 使用<div>元素布局
  2. 使用<table>元素布局

<div>元素布局

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>div布局</title>

    <link rel="stylesheet" type="text/css" href="mycss03.css">

</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>
<div id="container"> 设置div布局，给一个id为"container"；
接下去设置div头部、内容菜单、内容主体、底部；
<link rel="stylesheet" type="text/css" href="mycss03.css"> ，引入css样式。
body{

    margin: 0px;

}

div#container{

    width: 100%;

    height: 950px;

    background-color: green;

}

div#heading{

    width: 100%;

    height: 10%;

    background-color: red;

}

div#content_menu{

    width: 30%;

    height: 80%;

    background-color: yellow;

    float: left;

}

div#content_body{

    width: 70%;

    height: 80%;

    background-color: firebrick;

    float: left;

}

div#footing{

    width: 100%;

    height: 10%;

    background-color: black;

    clear: both;

}
在这里设置各个部位的宽、高、背景颜色。
body{ margin: 0px; }的作用是去空边，使背景能充满全屏；
float: left 的作用是加浮动，形成从左到右的排列方式；
clear: both 作用是清除浮动。运行之后可以看到效果，如图：

table元素布局
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>table布局</title>

</head>

<body marginheight="0px">

    <table width="100%" height="700px" style="background: green">

        <tr>

            <td colspan="2" width="100%" height="10%" style="background: yellow">头部</td>

        </tr>

        <tr>

            <td width="30%" height="80%" style="background: fixed;">

                <ol>

                    <li>苹果</li>

                    <li>香蕉</li>

                </ol>

            </td>

            <td width="70%" height="80%" style="background: magenta;">底部</td>

        </tr>

        <tr>

            <td colspan="2" width="100%" height="10%" style="background: honeydew">底部</td>

        </tr>

    </table>

</body>

</html>
 marginheight="0px" 去空边，填充全屏；
table width="100%" height="700px" style="background: green"> 设置table宽高及背景颜色；  
 <td colspan="2" width="100%" height="10%" style="background: yellow">头部</td> ，其中colspan="2"表示两个方格合并成一个，设置宽高及背景颜色；
第二个<tr></tr>为表格第二行，有两列；第三个<tr></tr>为表格第三行,同样合并两个方格，只有一列。
如此布局运行之后得出的结果为下图：

本站文章为宝宝巴士 SD.Team原创，转载务必在明显处注明：（作者官方网站：宝宝巴士)

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4754342.html

html5学习之路_003的更多相关文章

  1. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.

  2. html5学习之路_001

    安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...

  3. html5学习之路_007

    CSS概述 CSS指层叠样式表 CSS样式表极大地提高了工作效率 CSS基础语法 selector { property:value } 例:hi {color:red; font-size:14px ...

  4. html5学习之路_006

    表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. html5学习之路_005

    PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...

  6. html5学习之路_004

    HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...

  7. html5学习之路_002

    html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...

  8. 8年，从2D到3D，我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. springboot 学习之路 8 (整合websocket(1))

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

随机推荐

  1. csp-j2019游记

    我一pj蒟蒻这点水平还来写游记? 算了,毕竟是第一次,记录一下吧 noip->csp 话说我跟竞赛是不是天生八字不合啊...... 小学的时候学小奥,等我开始报名比赛,当时似乎所有竞赛都被叫停了 ...

  2. vue 之 slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,父组件决定插槽显示或不显示以及怎样显示,子组件决定 ...

  3. Linux目录、文件的管理

    centos目录结构 ls / 查看根目录下有哪些文件或者目录 bin 可执行文件的目录 sbin 存放root用户可执行文件目录 etc 配置文件 boot 引导文件 home 普通用户宿主目录 l ...

  4. webpack搭建环境步骤

    一.初始化 1.创建文件夹 2.npm init  -y 二.安装webpack 和webpack-cli 1.yarn add webpack webpack-cli@3.3.10 -D (这里指定 ...

  5. metasploit payload运行原理浅析

    背景 最近在做一些msf相关的事情,今天听到免杀相关的,去查询了下相关资料. 第一个不能错过的就是cobalt strike作者早年写的metasploit-loader项目了,我看了项目源码,找了一 ...

  6. python重试次数装饰器

    目录 重试次数装饰器 重试次数装饰器 前言, 最近在使用tornado框架写Restful API时遇到很多的问题. 有框架的问题, 有异步的问题. 虽然tornado 被公认为当前python语言最 ...

  7. 白话马尔科夫链蒙特卡罗方法(MCMC)

    前言 你清茶园不是人待的地方! 里面的个个都是人才,说话又好听--就是我太菜了啥也听不懂,这次期中还考的贼**烂,太让人郁闷了. 最近课上讲这个马尔科夫链蒙特卡罗方法,我也学得一塌糊涂.这时我猛然想起 ...

  8. iOS中的几种锁的总结，三种开启多线程的方式（GCD、NSOperation、NSThread）

    学习内容 欢迎关注我的iOS学习总结--每天学一点iOS:https://github.com/practiceqian/one-day-one-iOS-summary OC中的几种锁 为什么要引入锁 ...

  9. 深入理解JS中的对象（二）：new 的工作原理

    目录 序言 不同返回值的构造函数 深入 new 调用函数原理 总结 参考 1.序言 在 深入理解JS中的对象(一):原型.原型链和构造函数 中,我们分析了JS中是否一切皆对象以及对象的原型.原型链和构 ...

  10. [hdu1506 Largest Rectangle in a Histogram]笛卡尔树

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=1506 如图,求最大的矩形面积 思路: 笛卡尔树:笛卡尔树是一棵二叉树,树的每个节点有两个值,一个为key, ...