12-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS博客</title>
<script language="javascript">
var number = new Date().getSeconds() % 3 + 1; //隨機數，從1到3
//隨機選擇CSS外部文件
document.write('<link href="0' + number.toString() + '/0' + number.toString() + '.css" rel="stylesheet" type="text/css">');
</script>
</head>
<body>
<div id="container">
<div id="globallink">
<ul>
<li id="one"><a href="#">首頁</a></li>
<li id="two"><a href="#">論壇</a></li>
<li id="three"><a href="#">推薦</a></li>
<li id="four"><a href="#">最新日誌</a></li>
<li id="five"><a href="#">最新評論</a></li>
<li id="six"><a href="#">尚未登錄</a></li>
</ul>
<br>
</div>
<div id="parameter">
<div id="lstatistics">
<h3 class="statistics"><span>樣式統計</span></h3>
<ul>
<li>用戶: <b>893</b> 人</li>
<li>日誌: <b>4397</b> 個</li>
<li>評論: <b>4596</b> 篇</li>
</ul>
<br>
</div>
<div id="lhotblog">
<h3 class="hotblog"><span>熱門博客</span></h3>
<ul>
<li><a href="#">艾薩克</a> <<a class="author1" href="#">isaac</a>></li>
<li><a href="#">詹尼花兒</a> <<a class="author1" href="#">jennifer</a>></li>
<li><a href="#">流 觴</a> <<a class="author1" href="#">shenhuanyan</a>></li>
<li><a href="#">CYBERSPACE</a> <<a class="author1" href="#">cyber</a>></li>
<li><a href="#">小舔一下</a> <<a class="author1" href="#">LifeSucks</a>></li>
<li><a href="#">楚岑·洗心</a> <<a class="author1" href="#">popla</a>></li>
<li><a href="#">小孩兒</a> <<a class="author1" href="#">bazhuazhua</a>></li>
<li><a href="#">未名空間</a> <<a class="author1" href="#">sheva</a>></li>
<li><a href="#">Dark City</a> <<a class="author1" href="#">freax</a>></li>
<li><a href="#">E心E意&36</a> <<a class="author1" href="#">moonbow</a>></li>
</ul>
<br>
<span><a href="#">更多</a>
<a href="#">OPML</a></span> </div>
<div id="lrecent">
<h3 class="recent"><span>最近更新</span></h3>
<ul>
<li><a href="#"><span>託波索的小屋</span></a> <<a class="author1" href="#">quixote</a>></li>
<li><a href="#"><span>小孩兒</span></a> <<a class="author1" href="#">bazhuazhua</a>></li>
<li><a href="#"><span>詹尼花兒</span></a> <<a class="author1" href="#">jennifer</a>></li>
<li><a href="#"><span>E心E意&36</span></a> <<a class="author1" href="#">moonbow</a>></li>
<li><a href="#"><span>Beyond Paradise</span></a> <<a class="author1" href="#">sherrielin</a>></li>
<li><a href="#"><span>加州旅館</span></a> <<a class="author1" href="#">zhanxiongfei</a>></li>
<li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li>
<li><a href="#"><span>個人文集</span></a> <<a class="author1" href="#">sherry</a>></li>
</ul>
<br>
<span><a href="#">更多</a>
<a href="#">OPML</a></span> </div>
<div id="lapply">
<h3 class="apply"><span>最新申請</span></h3>
<ul>
<li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li>
<li><a href="#"><span>藍空霞彩</span></a> <<a class="author1" href="#">wcylester</a>></li>
<li><a href="#"><span>隨 緣</span></a> <<a class="author1" href="#">matata</a>></li>
<li><a href="#"><span>大山的孩子</span></a> <<a class="author1" href="#">tuonene</a>></li>
<li><a href="#"><span>伊的四季</span></a> <<a class="author1" href="#">Ifishamm</a>></li>
<li><a href="#"><span>SONG, original</span></a> <<a class="author1" href="#">song</a>></li>
<li><a href="#"><span>買買提※溫和的樹</span></a> <<a class="author1" href="#">mimiti</a>></li>
</ul>
<br>
<span><a href="#">更多</a>
<a href="#">OPML</a></span> </div>
</div>
<div id="mainsupport">
<div id="recommendblog">
<h3><span>博客推薦</span></h3>
<span><a href="#">詹尼花兒</a>
<a class="author2" href="#">jennifer</a></span>
<ul>
<li><a href="#"><span>禪</span></a></li>
<li><a href="#"><span>又地震了</span></a></li>
<li><a href="#"><span>老李說</span></a></li>
<li><a href="#"><span>地鐵發飆記</span></a></li>
<li><a href="#"><span>“王”者歸來</span></a></li>
</ul>
<br>
</div>
<div id="currenttime">
<p class="p1"><script language=javascript src="date.js"></script></p>
<p class="p2"><script language=javascript src="lunar.js"></script></p>
<ul>
<li><a href="#" title="進入自己的博客">*</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
<li><a href="#">R</a></li>
<li><a href="#">S</a></li>
<li><a href="#">T</a></li>
<li><a href="#">U</a></li>
<li><a href="#">V</a></li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
<br>
</div>
<div id="blogsearch">
<ul>
<form>
<li id="sear1">博客搜索:<input name="keyword" type="text" size="13" onMouseOver="this.focus();" onFocus="this.select();"></li>
<li id="sear2"><input type="hidden" name="exact" value="0"></li>
<li id="sear3"><input type="radio" name="key" value="u" checked>ID</li>
<li id="sear4"><input type="radio" name="key" value="c">名稱</li>
<li id="sear5"><input type="radio" name="key" value="d">描述</li>
<li id="sear6"><input type="submit" value="GO"></li>
</form>
</ul>
<br>
</div>
<div id="logoin">
<ul id="per">
<form name="form1">
<li id="per1">用戶名:
<input type="text" class="textinput1" onMouseOver="this.focus()" onFocus="this.select()" name="id" maxlength="12" tabindex="1">
<input type="submit" value="登錄" tabindex="3"></li>
<li id="per2">密 碼:
<input type="password" class="textinput2" name="passwd" maxlength="39" tabindex="2">
<input type="button" value="註冊" onClick="window.location='/bbsreg0.html';return false;" tabindex="4"></li>
</form>
</ul>
<br class="br2">
</div>
<div id="recommendart">
<h3><span><a class="middle" href="#">文章推薦</a></span></h3>
<ul>
<li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li>
<li><a href="#"><span>姐姐說 堅強的就是快樂的...</span></a> <a class="author2" href="#">cyber</a></li>
<li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li>
<li><a href="#"><span>景緻南潯</span></a> <a class="author2" href="#">amandavela</a></li>
<li><a href="#"><span>Windows快捷鍵大全</span></a> <a class="author2" href="#">inming</a></li>
<li><a href="#"><span>地鐵發飆記</span></a> <a class="author2" href="#">jennifer</a></li>
<li><a href="#"><span>2006發生的事</span></a> <a class="author2" href="#">xfavorx</a></li>
<li><a href="#"><span>姐姐說 堅強的就是快樂的...</span></a> <a class="author2" href="#">cyber</a></li>
<li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li>
<li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li>
<li><a href="#"><span>姐姐說 堅強的就是快樂的...</span></a> <a class="author2" href="#">cyber</a></li>
</ul>
<br>
</div>
<div id="newnode">
<h3><span>最新日誌</span></h3>
<ul>
<li>[<span><a href="#">託波索的小屋</a></span>] <a href="#"><span>等我考完試了</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>上完了最後一節嚴宣申老師...</span></a></li>
<li>[<span><a href="#">詹尼花兒</a></span>] <a href="#"><span>一句話</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>看了一個比較崇拜的ss師兄...</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>突然想起了魯迅的一句話</span></a></li>
<li>[<span><a href="#">E心E意W36</a></span>] <a href="#"><span>呵呵，做版主被彈劾了</span></a></li>
<li>[<span><a href="#">Beyond Paradise</a></span>] <a href="#"><span>偶爾也要更新一下～</span></a></li>
<li>[<span><a href="#">詹尼花兒</a></span>] <a href="#"><span>痛苦啊</span></a></li>
<li>[<span><a href="#">加州旅館</a></span>] <a href="#"><span>尋找局部最優</span></a></li>
<li>[<span><a href="#">星天的博客</a></span>] <a href="#"><span>冒着大風出去自習</span></a></li>
<li>[<span><a href="#">星天的博客</a></span>] <a href="#"><span>卷首語</span></a></li>
<li>[<span><a href="#">個人文集</a></span>] <a href="#"><span>發篇文章真難</span></a></li>
<li>[<span><a href="#">E心E意W36</a></span>] <a href="#"><span>假期將至！</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>今天……</span></a></li>
<li>[<span><a href="#">藍色天際/blueheaven</a></span>] <a href="#"><span>沒課了</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>纔看到有意思的東西</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>又要放假了</span></a></li>
<li>[<span><a href="#">藍空霞彩</a></span>] <a href="#"><span>讀書人的出世與入世1</span></a></li>
<li>[<span><a href="#">倏忽一年，花開兩邊</a></span>] <a href="#"><span>期末臨近</span></a></li>
<li>[<span><a href="#">倏忽一年，花開兩邊</a></span>] <a href="#"><span>小小學術之winpcap(自力更...</span></a></li>
</ul>
<br>
</div>
</div>
<div id="footer">
<a href="#" class="article">博客首頁</a> |
<a href="#" class="article">博客論壇</a> |
<a href="#" class="article">用戶列表</a> |
<a href="#" class="article">自由推薦</a> |
<a href="#" class="article">最新日誌</a> |
<a href="#" class="article">最新評論</a> |
<a href="#" class="article">熱門排行</a> |
<a href="#" class="article">日誌搜索</a> |
<a href="#" class="article">立即申請</a>
<p class="p3">版權所有 ©艾薩克</p>
</div>
</div>
</body>
</html>
<html>
<head>
<title>CSS博客</title>
<script language="javascript">
var number = new Date().getSeconds() % 3 + 1; //隨機數，從1到3
//隨機選擇CSS外部文件
document.write('<link href="0' + number.toString() + '/0' + number.toString() + '.css" rel="stylesheet" type="text/css">');
</script>
</head>
<body>
<div id="container">
<div id="globallink">
<ul>
<li id="one"><a href="#">首頁</a></li>
<li id="two"><a href="#">論壇</a></li>
<li id="three"><a href="#">推薦</a></li>
<li id="four"><a href="#">最新日誌</a></li>
<li id="five"><a href="#">最新評論</a></li>
<li id="six"><a href="#">尚未登錄</a></li>
</ul>
<br>
</div>
<div id="parameter">
<div id="lstatistics">
<h3 class="statistics"><span>樣式統計</span></h3>
<ul>
<li>用戶: <b>893</b> 人</li>
<li>日誌: <b>4397</b> 個</li>
<li>評論: <b>4596</b> 篇</li>
</ul>
<br>
</div>
<div id="lhotblog">
<h3 class="hotblog"><span>熱門博客</span></h3>
<ul>
<li><a href="#">艾薩克</a> <<a class="author1" href="#">isaac</a>></li>
<li><a href="#">詹尼花兒</a> <<a class="author1" href="#">jennifer</a>></li>
<li><a href="#">流 觴</a> <<a class="author1" href="#">shenhuanyan</a>></li>
<li><a href="#">CYBERSPACE</a> <<a class="author1" href="#">cyber</a>></li>
<li><a href="#">小舔一下</a> <<a class="author1" href="#">LifeSucks</a>></li>
<li><a href="#">楚岑·洗心</a> <<a class="author1" href="#">popla</a>></li>
<li><a href="#">小孩兒</a> <<a class="author1" href="#">bazhuazhua</a>></li>
<li><a href="#">未名空間</a> <<a class="author1" href="#">sheva</a>></li>
<li><a href="#">Dark City</a> <<a class="author1" href="#">freax</a>></li>
<li><a href="#">E心E意&36</a> <<a class="author1" href="#">moonbow</a>></li>
</ul>
<br>
<span><a href="#">更多</a>
<a href="#">OPML</a></span> </div>
<div id="lrecent">
<h3 class="recent"><span>最近更新</span></h3>
<ul>
<li><a href="#"><span>託波索的小屋</span></a> <<a class="author1" href="#">quixote</a>></li>
<li><a href="#"><span>小孩兒</span></a> <<a class="author1" href="#">bazhuazhua</a>></li>
<li><a href="#"><span>詹尼花兒</span></a> <<a class="author1" href="#">jennifer</a>></li>
<li><a href="#"><span>E心E意&36</span></a> <<a class="author1" href="#">moonbow</a>></li>
<li><a href="#"><span>Beyond Paradise</span></a> <<a class="author1" href="#">sherrielin</a>></li>
<li><a href="#"><span>加州旅館</span></a> <<a class="author1" href="#">zhanxiongfei</a>></li>
<li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li>
<li><a href="#"><span>個人文集</span></a> <<a class="author1" href="#">sherry</a>></li>
</ul>
<br>
<span><a href="#">更多</a>
<a href="#">OPML</a></span> </div>
<div id="lapply">
<h3 class="apply"><span>最新申請</span></h3>
<ul>
<li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li>
<li><a href="#"><span>藍空霞彩</span></a> <<a class="author1" href="#">wcylester</a>></li>
<li><a href="#"><span>隨 緣</span></a> <<a class="author1" href="#">matata</a>></li>
<li><a href="#"><span>大山的孩子</span></a> <<a class="author1" href="#">tuonene</a>></li>
<li><a href="#"><span>伊的四季</span></a> <<a class="author1" href="#">Ifishamm</a>></li>
<li><a href="#"><span>SONG, original</span></a> <<a class="author1" href="#">song</a>></li>
<li><a href="#"><span>買買提※溫和的樹</span></a> <<a class="author1" href="#">mimiti</a>></li>
</ul>
<br>
<span><a href="#">更多</a>
<a href="#">OPML</a></span> </div>
</div>
<div id="mainsupport">
<div id="recommendblog">
<h3><span>博客推薦</span></h3>
<span><a href="#">詹尼花兒</a>
<a class="author2" href="#">jennifer</a></span>
<ul>
<li><a href="#"><span>禪</span></a></li>
<li><a href="#"><span>又地震了</span></a></li>
<li><a href="#"><span>老李說</span></a></li>
<li><a href="#"><span>地鐵發飆記</span></a></li>
<li><a href="#"><span>“王”者歸來</span></a></li>
</ul>
<br>
</div>
<div id="currenttime">
<p class="p1"><script language=javascript src="date.js"></script></p>
<p class="p2"><script language=javascript src="lunar.js"></script></p>
<ul>
<li><a href="#" title="進入自己的博客">*</a></li>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
<li><a href="#">R</a></li>
<li><a href="#">S</a></li>
<li><a href="#">T</a></li>
<li><a href="#">U</a></li>
<li><a href="#">V</a></li>
<li><a href="#">W</a></li>
<li><a href="#">X</a></li>
<li><a href="#">Y</a></li>
<li><a href="#">Z</a></li>
</ul>
<br>
</div>
<div id="blogsearch">
<ul>
<form>
<li id="sear1">博客搜索:<input name="keyword" type="text" size="13" onMouseOver="this.focus();" onFocus="this.select();"></li>
<li id="sear2"><input type="hidden" name="exact" value="0"></li>
<li id="sear3"><input type="radio" name="key" value="u" checked>ID</li>
<li id="sear4"><input type="radio" name="key" value="c">名稱</li>
<li id="sear5"><input type="radio" name="key" value="d">描述</li>
<li id="sear6"><input type="submit" value="GO"></li>
</form>
</ul>
<br>
</div>
<div id="logoin">
<ul id="per">
<form name="form1">
<li id="per1">用戶名:
<input type="text" class="textinput1" onMouseOver="this.focus()" onFocus="this.select()" name="id" maxlength="12" tabindex="1">
<input type="submit" value="登錄" tabindex="3"></li>
<li id="per2">密 碼:
<input type="password" class="textinput2" name="passwd" maxlength="39" tabindex="2">
<input type="button" value="註冊" onClick="window.location='/bbsreg0.html';return false;" tabindex="4"></li>
</form>
</ul>
<br class="br2">
</div>
<div id="recommendart">
<h3><span><a class="middle" href="#">文章推薦</a></span></h3>
<ul>
<li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li>
<li><a href="#"><span>姐姐說 堅強的就是快樂的...</span></a> <a class="author2" href="#">cyber</a></li>
<li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li>
<li><a href="#"><span>景緻南潯</span></a> <a class="author2" href="#">amandavela</a></li>
<li><a href="#"><span>Windows快捷鍵大全</span></a> <a class="author2" href="#">inming</a></li>
<li><a href="#"><span>地鐵發飆記</span></a> <a class="author2" href="#">jennifer</a></li>
<li><a href="#"><span>2006發生的事</span></a> <a class="author2" href="#">xfavorx</a></li>
<li><a href="#"><span>姐姐說 堅強的就是快樂的...</span></a> <a class="author2" href="#">cyber</a></li>
<li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li>
<li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li>
<li><a href="#"><span>姐姐說 堅強的就是快樂的...</span></a> <a class="author2" href="#">cyber</a></li>
</ul>
<br>
</div>
<div id="newnode">
<h3><span>最新日誌</span></h3>
<ul>
<li>[<span><a href="#">託波索的小屋</a></span>] <a href="#"><span>等我考完試了</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>上完了最後一節嚴宣申老師...</span></a></li>
<li>[<span><a href="#">詹尼花兒</a></span>] <a href="#"><span>一句話</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>看了一個比較崇拜的ss師兄...</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>突然想起了魯迅的一句話</span></a></li>
<li>[<span><a href="#">E心E意W36</a></span>] <a href="#"><span>呵呵，做版主被彈劾了</span></a></li>
<li>[<span><a href="#">Beyond Paradise</a></span>] <a href="#"><span>偶爾也要更新一下～</span></a></li>
<li>[<span><a href="#">詹尼花兒</a></span>] <a href="#"><span>痛苦啊</span></a></li>
<li>[<span><a href="#">加州旅館</a></span>] <a href="#"><span>尋找局部最優</span></a></li>
<li>[<span><a href="#">星天的博客</a></span>] <a href="#"><span>冒着大風出去自習</span></a></li>
<li>[<span><a href="#">星天的博客</a></span>] <a href="#"><span>卷首語</span></a></li>
<li>[<span><a href="#">個人文集</a></span>] <a href="#"><span>發篇文章真難</span></a></li>
<li>[<span><a href="#">E心E意W36</a></span>] <a href="#"><span>假期將至！</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>今天……</span></a></li>
<li>[<span><a href="#">藍色天際/blueheaven</a></span>] <a href="#"><span>沒課了</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>纔看到有意思的東西</span></a></li>
<li>[<span><a href="#">長不大的小孩兒</a></span>] <a href="#"><span>又要放假了</span></a></li>
<li>[<span><a href="#">藍空霞彩</a></span>] <a href="#"><span>讀書人的出世與入世1</span></a></li>
<li>[<span><a href="#">倏忽一年，花開兩邊</a></span>] <a href="#"><span>期末臨近</span></a></li>
<li>[<span><a href="#">倏忽一年，花開兩邊</a></span>] <a href="#"><span>小小學術之winpcap(自力更...</span></a></li>
</ul>
<br>
</div>
</div>
<div id="footer">
<a href="#" class="article">博客首頁</a> |
<a href="#" class="article">博客論壇</a> |
<a href="#" class="article">用戶列表</a> |
<a href="#" class="article">自由推薦</a> |
<a href="#" class="article">最新日誌</a> |
<a href="#" class="article">最新評論</a> |
<a href="#" class="article">熱門排行</a> |
<a href="#" class="article">日誌搜索</a> |
<a href="#" class="article">立即申請</a>
<p class="p3">版權所有 ©艾薩克</p>
</div>
</div>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局》