15.2.XHTML+DIV+CSS

玄學醬發表於2018-01-10
HTMLCSS

為何使用表格排版是不明智的選擇？為什麼要選擇DIV+CSS？

首選我來說說表格排版，表格排版也是有好處的，一是排版速度快，二是相容性比CSS好。做為一般的小網站還是比較適合的，如果在大型網站使用表格就不太合適。 表格必須定義很多屬性如width=”100%” border=”0″ cellpadding=”0″ cellspacing=”0″，並且有時候tr標籤顯得多餘。

例 15.1. 表格排版範例

			
<!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>Table Example</title>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Logo</td>
    <td>Banner</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Home</td>
    <td>News</td>
    <td>Contact</td>
    <td>About</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>Top 10 </td>
      </tr>
      <tr>
        <td>xxxxxxxx</td>
      </tr>
      <tr>
        <td>xxxxxxxx</td>
      </tr>
      <tr>
        <td>xxxxxxxx</td>
      </tr>
      <tr>
        <td>xxxxxxxx</td>
      </tr>
    </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>Link </td>
        </tr>
        <tr>
          <td>xxxxxxxx</td>
        </tr>
        <tr>
          <td>xxxxxxxx</td>
        </tr>
        <tr>
          <td>xxxxxxxx</td>
        </tr>
        <tr>
          <td>xxxxxxxx</td>
        </tr>
      </table></td>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">Article Title </td>
      </tr>
      <tr>
        <td><p>Contect</p>
          <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
          <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
          <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
          <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p></td>
      </tr>
      <tr>
        <td>Feedback</td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">Copyright XXXX </td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

你可以對比上面看看div+css是如何規劃版面，並且css很多定義是可以重用的。

例 15.2. XHTML+DIV+CSS排版範例

			
<!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>hello world</title>
<style type="text/css">
<!--
body{
	width: 795px;
}
div1{
	border-color: #119EBA;
	border-width: 1px;
	border-style: solid;
	margin: 5px;
}
#header{
}
#logo, #banner{
	float:left;
	height: 75px;
}
#nav{
	clear:both;
}
#nav ul {
	list-style-type:none;
	margin: 0px;
	padding:0px;
}
#nav ul li{
	float:left;
	width: 100px;
}
#main{ clear:both;}
#main #left {
	float:left;
	width: 30%;
}
#main #right {
	float:right;
	width: 70%;
}
.box{}
.box h2 {
	margin: 0;
	padding: 0px;
}
.box a { display:block;}
#footer{ clear:both}
#footer #copyright {
	text-align:center;
}

.article {
	border-color: black;
	border-width: 1px;
	border-style: solid;
	margin: 5px;
	padding: 10px;
}
.article .article_title{
	font-size: 24px;
	font-weight:bold;
	text-align:center;
}
.article .article_content{ font-size:10px;}
-->
</style>
</head>

<body>

<div id="header">
	<div id="logo"> Logo </div>
	<div id="banner"> Banner </div>
</div>

<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="main">
	<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>
	<div id="right">
		<div class="article">
			<div class="article_title">
				Article Title
			</div>
			<div class="article_content">
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
				<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
			</div>
		</div>
	</div>
</div>

<div id="footer">
	<div id="copyright"> Copyright Neo Chan</div>
</div>

</body>
</html>

上面例子我們可以看到div與table相比所使用的標籤更少，無形中給網站減了肥。

CSS 的class,id 名稱定義規範：

  1. 一定要簡單，可讀例如header，footer

  2. 對於在頁面中不重複，自始至終只出現一次可定義為id，例如id=”header”，id=”footer”

  3. 對於在頁面中經常重複出現的，可定義為class，例如id=”article_block”，id=”news_block”

[注意] 注意

不要使用HTML屬性，儘量使用css。 herf,src,class,id等屬性除外。

下面是一個例子

			
<font color="red" size="12" face="Arial, Helvetica, sans-serif" >Hello workd</font>

你應該使用CSS實現,如果能使用CSS實現儘量不要多用一條HTML和屬性。

			
<style type="text/css">
.hello{
	color:red;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
</style>
<div id="hello">Hello workd</font>

原文出處：Netkiller 系列 手札
本文作者：陳景峰
轉載請與作者聯絡，同時請務必標明文章原始出處和作者資訊及本宣告。