| 知乎专栏 ｜ 多维度架构 |
页面结构从上到下依次是
header 主要包括导航，登录，Logo, Banner
body 网站主要内容，并且还可以分为左右两栏，左中右三栏。
footer 导航，版权
header,footer将显示在所有页面，一般很少改动。
<!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>Title</title>
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="banner"></div>
<div id="nav"></div>
</div>
<div id="page1">
<div class="left_nav"></div>
<div class="right"></div>
</div>
<div id="page2">
</div>
<div id="page3">
</div>
<div id="footer">
<div id="footer_nav"></div>
<div id="copyright"></div>
</div>
</body>
</html>
page1 打开首页看到的第一屏页面，page2，page3需要按翻页键
不要将 page1，page2，page3 放到一个DIV中
<table> <tr> <td>Home</td> <td>News</td> <td>About</td> <td>Contact</td> </tr> </table>
<div id="nav"> <ul> <li><a href="#"> Home </a></li> <li><a href="#"> News </a></li> <li><a href="#"> Person </a></li> <li><a href="#"> Group </a></li> <li><a href="#"> Network </a></li> </ul> </div>
<div id="left"> <div class="box"> <h2>title</h2> <a href="#"> link </a> <a href="#"> link </a> <a href="#"> link </a> </div> <div class="box"> <h2>title</h2> <a href="#"> link </a> <a href="#"> link </a> <a href="#"> link </a> </div> </div>
网站经常用一些方块规划版面。
一种是矩形方框
另一种是有标题，标题下方是矩形方框
现在流行的是标题栏有多个选项卡，标题下方是矩形方框，当选择不同标题时，矩形方框中的内容随之改变。
传统方法如下：
例 15.3. 例子
table block example
<table> <tr> <td> 内容 </td> </tr> </table>
div+css block example
<div class="simple_box"> 内容 </table>
例 15.4. 例子
table title block example
<table> <tr> <td>Top 10</td> </tr> <tr> <td> <table> <tr> <td>No.1</td> </tr> <tr> <td>No.2</td> </tr> <tr> <td>No.3</td> </tr> <tr> <td>No.n</td> </tr> </table> </td> </tr> </table>
div+css title block example
<div class="title_block"> <h2> Title <h2> <div> Content </div> </div>
使用dl标记实现
<dl class="title_block"> <dt>Title<dt> <dd> Content </dd> </dl>