首页 > 代码库 > 网页设计之路（6）
网页设计之路（6）
这次是布局的练习。
分别是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）