<!DOCTYPE html>

<html>

<head>

<style type="text/css">

div#container{width:500px;}

div#header {background-color:#99bbbb;}

div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}

div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}

div#footer {background-color:#99bbbb;clear:both;text-align:center;}

h1 {margin-bottom:0;}

h2 {margin-bottom:0;font-size:18px;}

ul {margin:0;}

li {list-style:none;}//注意：不是<li>

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>Main Title of Web Page</h1>

</div>

<div id="menu">

<h2>Menu</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

</div>

<div id="content">Content goes here</div>

<div id="footer">Copyright W3School.com.cn</div>

</div>

</body>

</html>

法二：利用<table>实现

　　　　即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

<!DOCTYPE html>

<html>

<body>

<table width="500px">

    <tr >

        <td colspan="2" style="background-color:#99bbbb;">//colspan 在td里定义,style里用：分隔，外边用空格分隔。

        <h1>Main Title of Web Page<h1>

        </td>

    </tr>

    <tr valign="top">//valign什么意思

    <td style="background-color:#ffff99;width:100px;text-align:top;">//style写在td里吗

    <b>Menu</b></br>

    HTML</br>

    CSS</br>

    JavaScript

    </td>

    <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">

    Content goer here

    </td>

    </tr>

    <tr>

    <td colspan="2" style="background-color:#99bbbb;text-align:center">

    Copyright W3School.com.cn

    </td>

    </tr>

</table>

</body>

</html>

参见：http://www.w3school.com.cn/html/html_layout.asp

DIV------使用 <div> 元素的网页布局的更多相关文章

  1. 利用DIV，实现简单的网页布局

    <html lang="en"><head> <meta charset="UTF-8"> <title>GIS ...

  2. 网页布局之Div

    div(division分区) 它是一个块标签,主要用来把网页中相关的内容组织到一起 你可以把网页的头部放到一个标签中,主体部分放到另一个标签中 使用class类名描述div内容 要想区分每个div, ...

  3. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  4. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  5. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  6. 浅谈table和DIV网页布局

    DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...

  7. [转]CSS网页布局：div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

  8. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  9. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

随机推荐

  1. WebApi学习总结系列第四篇（路由系统）

    由于工作的原因,断断续续终于看完了<ASP.NET Web API 2 框架揭秘>第二章关于WebApi的路由系统的知识. 路由系统是请求消息进入Asp.net WebApi的第一道屏障, ...

  2. java入门（与C++的不同之处）封装篇

    初学java,总是想将它与之前的C++做比较,看了慕客网的java入门视频,一直觉得在面向对象方面,它和C++有太多相同的地方,结果今天学到了两点不同之处,现在将它记录下来: 1.  java的访问修 ...

  3. 十六进制字符串转化为byte数组

    工作上有这样的需求之前找了好多都不行,好不容易有个可以的赶紧留下来. 原址:http://blog.163.com/roadwalker@126/blog/static/113561841201013 ...

  4. [BZOJ 1221] [HNOI2001] 软件开发 【费用流 || 三分】

    题目链接:BZOJ - 1221 题目分析 算法一:最小费用最大流 首先这是一道经典的网络流问题.每天建立两个节点,一个 i 表示使用毛巾,一个 i' 表示这天用过的毛巾. 然后 i 向 T 连 Ai ...

  5. [BZOJ 2440] [中山市选2011] 完全平方数 【二分 + 莫比乌斯函数】

    题目链接:BZOJ - 2440 题目分析 首先,通过打表之类的方法可以知道,答案不会超过 2 * k . 那么我们使用二分,对于一个二分的值 x ,求出 [1, x] 之间的可以送出的数有多少个. ...

  6. uva 10130 SuperSale

    一个01背包问题: 刚刚开始把题目看错了,以为物品的数目是有限的,然后让你求一个家庭里最多能够拿多个价值的东西: 这样一来的话,这个题目就有点意思了: 但是后来发现竟然是个简单的01背包问题 =  = ...

  7. Cxf soap协议改成1.2

    在和.net做联调的时候,报错: A SOAP 1.2 message is not valid when sent to a SOAP 1.1 only endpoint. 看来是soap协议不匹配 ...

  8. Remove highlight from document(Aspose Word 删除高亮)

    Thanks for your inquiry. You can do it using DocumentVisitor. Please try using the following code: / ...

  9. logstash 安装WARNING: SSLSocket#session= is not supported

    logstash官方提供的插件安装方法是: bin/plugin install logstash-output-webhdfs按照此方法,不出意料肯定会出现以下错误: [ec2-user@ip-xx ...

  10. RC滤波器

    1.一阶RC低通滤波器 RC低通滤波器的电路及其幅频.相频特性如下图所示,输入电压为ex,输出电压为ey 其中ζ=RC,截止频率f=1/2πRC. 2.一阶RC高通滤波器 其中ζ=RC,截止频率f=1 ...