5-1.html
<html>
<head>
<title>背景顏色</title>
<style>
<!--
body{
background-color:#5b8a00; /* 設置頁面背景顏色 */
margin:0px;
padding:0px;
color:#c4f762; /* 設置頁面文字顏色 */
}
p{
font-size:15px; /* 正文文字大小 */
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{ /* 首字放大 */
font-size:80px;
font-family:黑體;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="mainroad.jpg" style="float:right;">
<span>春</span>
<p>季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨着冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物甦醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地向繁殖地進發。許多動物在這段時間裏發情，因此中國也將春季稱爲“萬物復甦”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。</p>
<p>對農民來說，春季是播種許多農作物的季節。在春季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨着冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物甦醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地向繁殖地進發。許多動物在這段時間裏發情，因此中國也將春季稱爲“萬物復甦”的季節。</p>
</body>
</html>
<head>
<title>背景顏色</title>
<style>
<!--
body{
background-color:#5b8a00; /* 設置頁面背景顏色 */
margin:0px;
padding:0px;
color:#c4f762; /* 設置頁面文字顏色 */
}
p{
font-size:15px; /* 正文文字大小 */
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{ /* 首字放大 */
font-size:80px;
font-family:黑體;
float:left;
padding-right:5px;
padding-left:10px;
padding-top:8px;
}
-->
</style>
</head>
<body>
<img src="mainroad.jpg" style="float:right;">
<span>春</span>
<p>季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨着冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物甦醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地向繁殖地進發。許多動物在這段時間裏發情，因此中國也將春季稱爲“萬物復甦”的季節。春季氣溫和生物界的變化對人的心理和生理也有影響。</p>
<p>對農民來說，春季是播種許多農作物的季節。在春季，地球的北半球開始傾向太陽，受到越來越多的太陽光直射，因而氣溫開始升高。隨着冰雪消融，河流水位上漲。春季植物開始發芽生長，許多鮮花開放。冬眠的動物甦醒，許多以卵過冬的動物孵化，鳥類開始遷徙，離開越冬地向繁殖地進發。許多動物在這段時間裏發情，因此中國也將春季稱爲“萬物復甦”的季節。</p>
</body>
</html>
<html>
<head>
<title>利用背景顏色分塊</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5; /* 頁面背景色 */
}
.topbanner{
background-color:#fbc9ba; /* 頂端banner的背景色 */
}
.leftbanner{
width:22%; height:330px;
vertical-align:top;
background-color:#6d1700; /* 左側導航條的背景色 */
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首頁<br><br>分類討論
<br><br>談天說地<br><br>精華區
<br><br>我的信箱<br><br>休閒娛樂
<br><br>立即註冊<br><br>離開本站
</td>
<td class="mainpart">正文內容...</td>
</tr>
</table>
</body>
</html>
<head>
<title>利用背景顏色分塊</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#ffebe5; /* 頁面背景色 */
}
.topbanner{
background-color:#fbc9ba; /* 頂端banner的背景色 */
}
.leftbanner{
width:22%; height:330px;
vertical-align:top;
background-color:#6d1700; /* 左側導航條的背景色 */
color:#FFFFFF;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbanner">
<br><br>首頁<br><br>分類討論
<br><br>談天說地<br><br>精華區
<br><br>我的信箱<br><br>休閒娛樂
<br><br>立即註冊<br><br>離開本站
</td>
<td class="mainpart">正文內容...</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>背景圖片</title>
<style>
<!--
body{
background-image:url(03.jpg); /* 頁面背景圖片 */
}
-->
</style>
</head>
<body>
</body>
</html>
<head>
<title>背景圖片</title>
<style>
<!--
body{
background-image:url(03.jpg); /* 頁面背景圖片 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>背景圖片、背景顏色同時</title>
<style>
<!--
body{
background-image:url(03.gif); /* 頁面背景圖片 */
background-color:#FFFF00; /* 頁面背景顏色 */
}
-->
</style>
</head>
<body>
</body>
</html>
<head>
<title>背景圖片、背景顏色同時</title>
<style>
<!--
body{
background-image:url(03.gif); /* 頁面背景圖片 */
background-color:#FFFF00; /* 頁面背景顏色 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>背景重複</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg1.jpg); /* 背景圖片 */
background-repeat:repeat-y; /* 垂直方向重複 */
background-color:#0066FF; /* 背景顏色 */
}
-->
</style>
</head>
<body>
</body>
</html>
<head>
<title>背景重複</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg1.jpg); /* 背景圖片 */
background-repeat:repeat-y; /* 垂直方向重複 */
background-color:#0066FF; /* 背景顏色 */
}
-->
</style>
</head>
<body>
</body>
</html>
<html>
<head>
<title>背景水平重複</title>
<style>
<!--
body{
padding:0px;
margin:0px;
}
.topbanner{
background-image:url(bg2.jpg); /* 背景圖片 */
background-repeat:repeat-x; /* 水平方向重複 */
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td class="topbanner"><img src="banner2.jpg" border="0"></td>
<!-- 配上banner圖片 -->
</tr>
</table>
</body>
</html>
<head>
<title>背景水平重複</title>
<style>
<!--
body{
padding:0px;
margin:0px;
}
.topbanner{
background-image:url(bg2.jpg); /* 背景圖片 */
background-repeat:repeat-x; /* 水平方向重複 */
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td class="topbanner"><img src="banner2.jpg" border="0"></td>
<!-- 配上banner圖片 -->
</tr>
</table>
</body>
</html>
<html>
<head>
<title>背景不重複</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg3.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
}
-->
</style>
</head>
<body>
<div style="padding-left:60px; padding-top:100px;">
小兔子</div>
</body>
</html>
<head>
<title>背景不重複</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg3.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
}
-->
</style>
</head>
<body>
<div style="padding-left:60px; padding-top:100px;">
小兔子</div>
</body>
</html>
<html>
<head>
<title>背景的位置</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg4.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
background-position:bottom right; /* 背景位置，右下 */
background-color:#eeeee8;
}
span{ /* 首字放大 */
font-size:70px;
float:left;
font-family:黑體;
font-weight:bold;
}
p{
margin:0px; font-size:14px;
padding-top:10px;
padding-left:6px; padding-right:8px;
}
-->
</style>
</head>
<body>
<p><span>雪</span>是大氣固態降水中的一種最廣泛、最普遍、最主要的形式。大氣固態降水是多種多樣的，除了美麗的雪花以外，還包括能造成很大危害的冰雹，還有我們不經常見到的雪霰和冰粒。</p>
<p>由於天空中氣象條件和生長環境的差異，造成了形形色色的大氣固態降水。這些大氣固態降水的叫法因地而異，因人而異，名目繁多，極不統一。爲了方便起見，國際水文協會所屬的國際雪冰委員會，在徵求各國專家意見的基礎上，於1949年召開了一個專門性的國際會議，會上通過了關於大氣固態降水簡明分類的提案。這個簡明分類，把大氣固態降水分爲十種：雪片、星形雪花、柱狀雪晶、針狀雪晶、多枝狀雪晶、軸狀雪晶、不規則雪晶、霰、冰粒和雹。前面的七種統稱爲雪。</p>
<p>
立冬 太陽位於黃經225°，11月7～8日交節<br>
小雪 太陽位於黃經240°，11月22～23日交節<br>
大雪 太陽位於黃經255°，12月6～8日交節<br>
冬至 太陽位於黃經270°，12月21～23日交節<br>
小寒 太陽位於黃經285°，1月5～7日交節<br>
大寒 太陽位於黃經300°，1月20～21日交節</p>
</body>
</html>
<head>
<title>背景的位置</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-image:url(bg4.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
background-position:bottom right; /* 背景位置，右下 */
background-color:#eeeee8;
}
span{ /* 首字放大 */
font-size:70px;
float:left;
font-family:黑體;
font-weight:bold;
}
p{
margin:0px; font-size:14px;
padding-top:10px;
padding-left:6px; padding-right:8px;
}
-->
</style>
</head>
<body>
<p><span>雪</span>是大氣固態降水中的一種最廣泛、最普遍、最主要的形式。大氣固態降水是多種多樣的，除了美麗的雪花以外，還包括能造成很大危害的冰雹，還有我們不經常見到的雪霰和冰粒。</p>
<p>由於天空中氣象條件和生長環境的差異，造成了形形色色的大氣固態降水。這些大氣固態降水的叫法因地而異，因人而異，名目繁多，極不統一。爲了方便起見，國際水文協會所屬的國際雪冰委員會，在徵求各國專家意見的基礎上，於1949年召開了一個專門性的國際會議，會上通過了關於大氣固態降水簡明分類的提案。這個簡明分類，把大氣固態降水分爲十種：雪片、星形雪花、柱狀雪晶、針狀雪晶、多枝狀雪晶、軸狀雪晶、不規則雪晶、霰、冰粒和雹。前面的七種統稱爲雪。</p>
<p>
立冬 太陽位於黃經225°，11月7～8日交節<br>
小雪 太陽位於黃經240°，11月22～23日交節<br>
大雪 太陽位於黃經255°，12月6～8日交節<br>
冬至 太陽位於黃經270°，12月21～23日交節<br>
小寒 太陽位於黃經285°，1月5～7日交節<br>
大寒 太陽位於黃經300°，1月20～21日交節</p>
</body>
</html>
<html>
<head>
<title>背景的位置</title>
<style>
<!--
body{
padding:0px; margin:0px;
background-image:url(bg5.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
/*background-position:30% 70%; /* 背景位置，百分比 */
background-position:300px 25px; /* 背景位置，具體數值 */
}
p{
padding:10px; margin:5px;
line-height:1.5em;
}
-->
</style>
</head>
<body>
<p>CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。CSS是1996年由W3C審覈通過，並且推薦使用的。簡單的說CSS的引入就是爲了使得HTML能夠更好的適應頁面的美工設計。它以HTML爲基礎，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</p>
</body>
</html>
<head>
<title>背景的位置</title>
<style>
<!--
body{
padding:0px; margin:0px;
background-image:url(bg5.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
/*background-position:30% 70%; /* 背景位置，百分比 */
background-position:300px 25px; /* 背景位置，具體數值 */
}
p{
padding:10px; margin:5px;
line-height:1.5em;
}
-->
</style>
</head>
<body>
<p>CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。CSS是1996年由W3C審覈通過，並且推薦使用的。簡單的說CSS的引入就是爲了使得HTML能夠更好的適應頁面的美工設計。它以HTML爲基礎，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</p>
</body>
</html>
<html>
<head>
<title>固定背景圖片</title>
<style>
<!--
body{
padding:0px; margin:0px;
background-image:url(bg6.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
background-attachment:fixed; /* 固定背景圖片 */
}
p{
padding:10px; margin:5px;
line-height:1.5em;
color:#FFFFFF; font-size:22px;
}
-->
</style>
</head>
<body>
<p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因爲它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演着重要的角色。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</p>
<p>CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。CSS是1996年由W3C審覈通過，並且推薦使用的。簡單的說CSS的引入就是爲了使得HTML能夠更好的適應頁面的美工設計。它以HTML爲基礎，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</p>
</body>
</html>
<head>
<title>固定背景圖片</title>
<style>
<!--
body{
padding:0px; margin:0px;
background-image:url(bg6.jpg); /* 背景圖片 */
background-repeat:no-repeat; /* 不重複 */
background-attachment:fixed; /* 固定背景圖片 */
}
p{
padding:10px; margin:5px;
line-height:1.5em;
color:#FFFFFF; font-size:22px;
}
-->
</style>
</head>
<body>
<p>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因爲它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演着重要的角色。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</p>
<p>CSS（Cascading Style Sheet），中文譯爲層疊樣式表，是用於控制網頁樣式並允許將樣式信息與網頁內容分離的一種標記性語言。CSS是1996年由W3C審覈通過，並且推薦使用的。簡單的說CSS的引入就是爲了使得HTML能夠更好的適應頁面的美工設計。它以HTML爲基礎，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。</p>
</body>
</html>
<html>
<head>
<title>多個背景圖片</title>
<style>
<!--
body{
background-image:url(bg7.jpg); /* 頁面大背景 */
background-repeat:no-repeat;
padding:0px; margin:0px;
background-attachment:fixed;
}
div{
background-image:url(bg8.gif); /* 左側小圖標背景 */
background-repeat:repeat-y; /* 豎直方向重複 */
background-position:5px 0px;
padding-left:110px; padding-top:10px;
padding-right:10px; padding-bottom:15px;
}
h1{
font-family:黑體;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div>
<h1>銀杏的優點</h1>
1. 葉色秀雅，花色清淡。<br>
2. 樹體高大，壽命綿長，樹粗可達4米，壽命可達3000年之多。固長與古老寺廟相配伍，以名山大川、風景名勝爲伴。<br>
3. 樹幹光潔，愈傷力強，輕微的損傷很快便可癒合。<br>
4. 發芽晚落葉早，有利於早春和晚秋樹下能及時得到和曖的陽光。<br>
5. 銀杏冠大蔭濃，具有降溫作用；直射陽光下，氣溫高達40.20c，銀杏樹下的氣溫僅爲35.30c。降溫4.90c，優於其它樹種。<br>
6. 萌櫱力強、耐修剪。根際萌櫱旺盛，可以形成五代同堂”，懷中抱孫”等自然風景。<br>
7. 銀杏絕少病蟲害，不污染環境，是著名的無公害樹種。<br>
8. 抗旱力較強。<br>
9. 抗煙塵、抗火災、抗有毒氣體（如二氧化硫、氨氣、臭氧等），抗輻射能力也強。
</div>
</body>
</html>
<head>
<title>多個背景圖片</title>
<style>
<!--
body{
background-image:url(bg7.jpg); /* 頁面大背景 */
background-repeat:no-repeat;
padding:0px; margin:0px;
background-attachment:fixed;
}
div{
background-image:url(bg8.gif); /* 左側小圖標背景 */
background-repeat:repeat-y; /* 豎直方向重複 */
background-position:5px 0px;
padding-left:110px; padding-top:10px;
padding-right:10px; padding-bottom:15px;
}
h1{
font-family:黑體;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<div>
<h1>銀杏的優點</h1>
1. 葉色秀雅，花色清淡。<br>
2. 樹體高大，壽命綿長，樹粗可達4米，壽命可達3000年之多。固長與古老寺廟相配伍，以名山大川、風景名勝爲伴。<br>
3. 樹幹光潔，愈傷力強，輕微的損傷很快便可癒合。<br>
4. 發芽晚落葉早，有利於早春和晚秋樹下能及時得到和曖的陽光。<br>
5. 銀杏冠大蔭濃，具有降溫作用；直射陽光下，氣溫高達40.20c，銀杏樹下的氣溫僅爲35.30c。降溫4.90c，優於其它樹種。<br>
6. 萌櫱力強、耐修剪。根際萌櫱旺盛，可以形成五代同堂”，懷中抱孫”等自然風景。<br>
7. 銀杏絕少病蟲害，不污染環境，是著名的無公害樹種。<br>
8. 抗旱力較強。<br>
9. 抗煙塵、抗火災、抗有毒氣體（如二氧化硫、氨氣、臭氧等），抗輻射能力也強。
</div>
</body>
</html>
<html>
<head>
<title>個人主頁</title>
<style>
<!--
body{
background:url(bg9.gif); /* 頁面背景圖片 */
margin:0px; padding:0px;
}
.chara1{
font-size:12px;
background-color:#90bcff; /* 導航條的背景顏色 */
}
.chara1 td{
text-align:center;
}
.chara2{
background-color:#d2e7ff;
text-align:center;
font-size:12px;
vertical-align:top;
}
.chara3{
/* 主題部分的背景圖片 */
background:#e9fbff url(self.jpg) no-repeat bottom right;
vertical-align:top;
padding-top:15px; padding-left:30px;
font-size:12px; padding-right:15px;
}
.pic1{
border:1px solid #00406c;
}
p.leftcontent{
padding-left:15px;
padding-right:10px;
text-align:left;
color:#001671;
}
h4{
text-decoration:underline;
color:#0078aa;
padding-top:15px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="banner3.jpg" border="0"></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
<tr><td>首頁</td><td>心情日記</td><td>Free</td><td>一起走到</td><td>從明天起</td><td>紙飛機</td><td>下一站</td></tr>
</table>
<table width="600px" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="150px" class="chara2">
<br>
<p><img src="selfpic.jpg" class="pic1">
<br>我的日記本</p>
<p class="leftcontent">他們彼此深信，是瞬間迸發的熱情讓他們相遇。這樣的確定是美麗的，但變幻無常更爲美麗。</p>
<p><img src="selfpic2.jpg" class="pic1">
<br>心情軌跡</p>
<p class="leftcontent">董事長的一切都讓人既羨慕又忌妒，但更讓人受不了的是，有一天，上蒼忽然賜給他一個神奇的禮物………</p>
</td>
<td class="chara3">
<h4>介紹</h4>
<p>我努力的抓緊世界，最後卻仍被世界淘汰，如果一開始就鬆手，我會不那麼傷心嗎？你說，親愛的孩子，世事難料，隨它去吧！</p>
<h4>照相本子</h4>
<p>關於童年，你記住了什麼？ <br>
兩歲時，我擁有一隻巨大的粉紅豬，它總在我嚎啕大哭時逗我笑。<br>
三歲時，我騎着小***一路搖到外婆家，它不喝水也不吃草。<br>
四歲時，我離家出走，在公車上睡着了，最後是太空超人送我回家。<br>
我真的沒騙你，我通通都記得，還有照片爲證。
</p>
<h4>地下鐵</h4>
<p>天使在地下鐵的入口，<br>
和我說再見的那一年，<br>
我漸漸看不見了。<br>
十五歲生日的那年秋天早晨，<br>
窗外下着毛毛雨，<br>
我喂好我的貓。<br>
六點零五分，<br>
我走進地下鐵。</p>
<h4>向左走向右走</h4>
<p>They're both convinced<br>
that a sudden passion joined them.<br>
Such certainth is beautiful,<br>
but uncertainty is more beautiful still.</p>
<br>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>個人主頁</title>
<style>
<!--
body{
background:url(bg9.gif); /* 頁面背景圖片 */
margin:0px; padding:0px;
}
.chara1{
font-size:12px;
background-color:#90bcff; /* 導航條的背景顏色 */
}
.chara1 td{
text-align:center;
}
.chara2{
background-color:#d2e7ff;
text-align:center;
font-size:12px;
vertical-align:top;
}
.chara3{
/* 主題部分的背景圖片 */
background:#e9fbff url(self.jpg) no-repeat bottom right;
vertical-align:top;
padding-top:15px; padding-left:30px;
font-size:12px; padding-right:15px;
}
.pic1{
border:1px solid #00406c;
}
p.leftcontent{
padding-left:15px;
padding-right:10px;
text-align:left;
color:#001671;
}
h4{
text-decoration:underline;
color:#0078aa;
padding-top:15px;
}
-->
</style>
</head>
<body>
<table align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="banner3.jpg" border="0"></td></tr>
</table>
<table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center">
<tr><td>首頁</td><td>心情日記</td><td>Free</td><td>一起走到</td><td>從明天起</td><td>紙飛機</td><td>下一站</td></tr>
</table>
<table width="600px" align="center" cellpadding="0" cellspacing="1">
<tr>
<td width="150px" class="chara2">
<br>
<p><img src="selfpic.jpg" class="pic1">
<br>我的日記本</p>
<p class="leftcontent">他們彼此深信，是瞬間迸發的熱情讓他們相遇。這樣的確定是美麗的，但變幻無常更爲美麗。</p>
<p><img src="selfpic2.jpg" class="pic1">
<br>心情軌跡</p>
<p class="leftcontent">董事長的一切都讓人既羨慕又忌妒，但更讓人受不了的是，有一天，上蒼忽然賜給他一個神奇的禮物………</p>
</td>
<td class="chara3">
<h4>介紹</h4>
<p>我努力的抓緊世界，最後卻仍被世界淘汰，如果一開始就鬆手，我會不那麼傷心嗎？你說，親愛的孩子，世事難料，隨它去吧！</p>
<h4>照相本子</h4>
<p>關於童年，你記住了什麼？ <br>
兩歲時，我擁有一隻巨大的粉紅豬，它總在我嚎啕大哭時逗我笑。<br>
三歲時，我騎着小***一路搖到外婆家，它不喝水也不吃草。<br>
四歲時，我離家出走，在公車上睡着了，最後是太空超人送我回家。<br>
我真的沒騙你，我通通都記得，還有照片爲證。
</p>
<h4>地下鐵</h4>
<p>天使在地下鐵的入口，<br>
和我說再見的那一年，<br>
我漸漸看不見了。<br>
十五歲生日的那年秋天早晨，<br>
窗外下着毛毛雨，<br>
我喂好我的貓。<br>
六點零五分，<br>
我走進地下鐵。</p>
<h4>向左走向右走</h4>
<p>They're both convinced<br>
that a sudden passion joined them.<br>
Such certainth is beautiful,<br>
but uncertainty is more beautiful still.</p>
<br>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>念奴嬌 赤壁懷古</title>
<style>
<!--
body{
background:url(bg9.jpg) no-repeat center top; /* 頁面背景 */
margin:0px; padding:0px;
text-align:center;
}
div.content{
height:260px;
writing-mode:tb-rl; /* 豎排版文字 */
width:620px;
text-align:left;
border:3px solid #666666;
line-height:30px;
padding-top:15px; padding-right:8px;
background: url(bg10.jpg) no-repeat; /* 文字部分背景 */
}
-->
</style>
</head>
<body>
<div style="height:90px;"></div>
<div class="content">
大江東去<br>浪淘盡<br>千古風流人物<br>
故壘西邊人道是<br>三國周郎赤壁<br>
亂石穿空<br>驚濤拍岸<br>捲起千堆雪<br>
江山如畫<br>一時多少豪傑<br>
遙想公謹當年<br>小喬初嫁了<br>雄姿英發<br>
羽扇綸巾談笑間<br>強虜灰飛煙滅<br>
故國神遊<br>多情應笑<br>我早生華髮<br>
人生如夢<br>一尊還酹江月<br>
</div>
</body>
</html>
<head>
<title>念奴嬌 赤壁懷古</title>
<style>
<!--
body{
background:url(bg9.jpg) no-repeat center top; /* 頁面背景 */
margin:0px; padding:0px;
text-align:center;
}
div.content{
height:260px;
writing-mode:tb-rl; /* 豎排版文字 */
width:620px;
text-align:left;
border:3px solid #666666;
line-height:30px;
padding-top:15px; padding-right:8px;
background: url(bg10.jpg) no-repeat; /* 文字部分背景 */
}
-->
</style>
</head>
<body>
<div style="height:90px;"></div>
<div class="content">
大江東去<br>浪淘盡<br>千古風流人物<br>
故壘西邊人道是<br>三國周郎赤壁<br>
亂石穿空<br>驚濤拍岸<br>捲起千堆雪<br>
江山如畫<br>一時多少豪傑<br>
遙想公謹當年<br>小喬初嫁了<br>雄姿英發<br>
羽扇綸巾談笑間<br>強虜灰飛煙滅<br>
故國神遊<br>多情應笑<br>我早生華髮<br>
人生如夢<br>一尊還酹江月<br>
</div>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局》