html 布局

来源:互联网 发布:js 禁用input select 编辑:程序博客网 时间:2024/05/01 23:28

<title>使用 <div>元素的网页布局</title>

</head>

<body>


<div id="container" style="width:500px">


<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0">标题</h1>

</div>


<div id="menu" stytle="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b>

<br/>白菜

<br/>萝卜

<br/>辣椒

JavaScript 

</div>


<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

今年青菜的价钱不高。

</div>


<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 

版权所有

</div>


</div>


</body>

</html>




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>使用table的网页布局</title>

</head>

<body>


<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#FFA500;">

<h1>网页标题</h1>

</td>

</tr>


<tr>

<td style="background-color:#FFD700;width:100px;vertical-align:top;">

<b>菜单</b>

<br/>白菜

<br/>萝卜

<br/>青菜

JavaScript

</td>

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

今天的青菜的价格不高

</td>

</tr>


<tr>

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

版权所有

</td>

</tr>


</table>




</body>

</html>

原创粉丝点击