標籤：des style http color io 使用 ar java strong
這次是布局的練習。
分別是div布局和table布局
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;}<!--注意內樣式表的使用，要一一對應你要設定的屬性，-->
<!--clear，清除浮動，而針對左右邊元素，clear:both：本<div >行，只能有這一個元素，起到固定作用。-->
h1 {margin-bottom:0;}<!--外邊距是頁面中設定元素與另一個元素之間距離的屬性，如果想完全使用CSS布局代替傳統table布局，那就需要好好掌握外邊距的特性。Html中有些標籤帶有預設的margin屬性，比如<p>和<body>，在重新設定它們的值後就會覆蓋預設樣式。有上邊距，外邊距，左邊距，右邊距。長度可用厘米，像素，和百分比表示。--
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
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>
</body>
</html>
table布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>my design</title>
</head>
<body>
<table width="500" border="0">
<tr><td colspan="2" style="background-color:#3CF"> <h1>Main Title of Web Page</h1> </td></tr>
<tr valign="top"><td style="background-color:#0C6; width:100px;text-align:top;" >
<b>Menu</b><br /><!--b 代表字型為粗體-->
HTML<br />
CSS<br />
JavaScript
</td><
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
<!--valign 屬性規定儲存格中內容的垂直排列,text-align 屬性規定元素中的文本的水平對齊方式。這是相對於文本所在的架構裡--></tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;"><!--注意在表格結尾，要和首行對應的屬性colspan="2"-->
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
我表示覺得布局需要巧妙地構思，目前覺得很難，加油，再接再勵。
網頁設計之路（6）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
