Home | 简体中文 | 繁体中文 | 杂文 | Github | 知乎专栏 | 51CTO学院 | CSDN程序员研修院 | OSChina 博客 | 腾讯云社区 | 阿里云栖社区 | Facebook | Linkedin | Youtube | 打赏(Donations) | About
知乎专栏多维度架构

15.3. 页面结构设计

页面结构从上到下依次是

header,footer将显示在所有页面,一般很少改动。

15.3.1. Home page (首页)

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

15.3.2. 导航烂

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

15.3.3. Left Bar

				
	<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.4. 区块设计 Block

网站经常用一些方块规划版面。

  • 一种是矩形方框

  • 另一种是有标题,标题下方是矩形方框

  • 现在流行的是标题栏有多个选项卡,标题下方是矩形方框,当选择不同标题时,矩形方框中的内容随之改变。

传统方法如下:

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