1. 說明
網上下載的模板，用DIV實現頁面模塊之間的分隔（不是用frameset/frame）。可以選擇有無header/menu/footer，主體如何等等。刪除了幾個我認為重復的。重新命名而已。這樣看文件夾就知道該目錄是何種風格的模板。
附件中的文件夾命名規則：
- l-表示左邊有內容
- r-表示右邊有內容
- h-表示有Head（頭部，一般用於網站的Banner）
- m-表示有Menu（菜單，一般用於功能選項）
- b-表示有Body（主體，網站主體）
- f-表示有Footer（底部，版本信息類）
- bx-表示主體大小會隨窗口的變化而自適應。
- ()-表示括號內的為一行
2. 模板下載地址
http://files.cnblogs.com/nayitian/htmltemplate1.rar
模板圖一（35.h-(bx-r)）：
模板圖二（36.h-(l-bx)-f），有footer，畫面小，看不到：
3. 參考源代碼
index.html
<!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=gb2312" /> <title>2列右側固定左側自適應寬度+頭部——<a href="http://www.aa25.cn">標准之路www.aa25.cn</a></title> <link href="layout.css" rel="stylesheet" type="text/css" /> <meta name="Keywords" content="標准之路,www.aa25.cn,網頁標准布局,DIV+CSS" /> <meta name="" content="標准之路,www.aa25.cn,網頁標准布局,DIV+CSS" /> <meta name="author" content"×××,有問題請到www.68css.cn網站留言" /> <meta name="Description" content="本套網頁標准布局模板是由標准之路（www.aa25.cn）制作完成，如果您要轉載，請保留版權" /> </head> <body> <div id="container"> <div id="header">This is the Header</div> <div id="mainContent"> <div id="sidebar">This is the sidebar</div> <div id="content">2列右側固定左側自適應寬度+頭部——<a href="http://www.aa25.cn">標准之路www.aa25.cn</a></div> <span style="display:none"><script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script></span></div> </div> </body> </html>
layout.css
/*本模板是由標准之路(www.aa25.cn)的×××制作完成*/ /*本人水平有限，使用自願，不對因使用此模板造成的任何后果負任何責任*/ /*如果您想轉載此資源，請保留“<a href="http://www.aa25.cn">標准之路www.aa25.cn</a>”的鏈接及版權標識*/ /*如有更好的建議或意見，請到www.aa25.cn留言，本人盡力解決*/ /*2008-8-28*/ body { font-family:Verdana; font-size:14px; margin:0;} #container {margin:0 auto; width:100%;} #header { height:100px; background:#9c6; margin-bottom:5px;} #mainContent { height:500px; margin-bottom:5px;} #sidebar { float:right; width:200px; height:500px; background:#cf9;} #content { margin-right:205px !important; margin-right:202px; height:500px; background:#ffa;}