DIV------使用 <div> 元素的网页布局 

<!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

 

posted @ 2016-07-20 16:47  alsdf  阅读(339)  评论(0)    收藏  举报