html 布局
<!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;} <!--margin 范围-->
li {list-style:none;}
</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> <!--container-->
<!--使用 <table> 元素添加布局。-->
<table width="500" border="0">
<tr><!--表格的第一行-->
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top"> <!--表格的第二行--> <!--顶端对齐-->
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br /> <!--粗体-->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</td> <!--表格二行，第二列-->
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr> <!--表格的第三行--> <!-- background-color ，text-align-->
<!-- 第一和最后一行使用 colspan 属性来横跨两列-->
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
Main Title of Web Page
Main Title of Web Page |
|
Menu
|
Content goes here |
| Copyright W3School.com.cn | |
