# 個人空間功能模塊樣式手冊

### 通用

### 首頁

### 索引頁

### 內容頁

- 個人空間名{{spacename}}
- 主導航{{menu}}
- 用戶頭像{{photo}}
- 用戶菜單{{action}}
- 日曆{{calendar}}
- 存檔{{archive}}
- 搜索{{search}}
- 統計信息{{information}}
- 最新評論：{{newreplay}}
- 我的收藏：{{favorite}}
- 我的好友：{{myfriend}}
- 友情鏈接：{{userlink}}
- 最新留言：{{guestbook}}
- 快速導航：{{guide}}
- 基本樣式：
- 列表

- 最新日誌{{newblog}}
- 最熱日誌{{hotblog}}
- 最新圖片{{newimage}}
- 最熱圖片{{hotimage}}
- 最新文件{{newfile}}
- 最熱文件{{hotfile}}
- 最新商品{{newgoods}}
- 最熱商品{{hotgoods}}
- 最新書籤{{newlink}}
- 最熱書籤{{hotlink}}
- 論壇文集{{bbsthread}}
- 基本樣式：
- 文章標題
- 文章詳細內容
- 帶有摘要的日誌列表
- 圖片列表
- 文件、商品、書籤公用列表

- 個人分類{{itemtype}}
- 我的列表{{mylog}}-日誌
- 我的列表{{mylog}}-圖片
- 我的列表{{mylog}}-文件
- 我的列表{{mylog}}-商品
- 我的列表{{mylog}}-書籤
- 基本樣式：
- Tab選項卡
- 文章標題
- 文章詳細內容
- 帶有摘要的日誌列表

- 個人分類{{itemtype}}
- 具體內容{{content}}-日誌
- 具體內容{{content}}-圖片
- 具體內容{{content}}-文件
- 具體內容{{content}}-商品
- 具體內容{{content}}-書籤
- 基本樣式：
- 文章標題
- 文章詳細內容
- 帶有摘要的日誌列表
- 屬性列表與自定義信息
- Trackback
- 底部鏈接、Tag與快捷功能
- 評論列表與評論框

- ■ HTML代碼結構
- ■ 基本CSS樣式表
- ■ 演示

## 個人空間名：{{spacename}}

### 內部結構：

    <div id="spacename">
    	<h1>個人空間名</h1>
    	<p>
    		<a href="..." class="copyurl">複製URL地址</a>
    		<a href="..." class="add2fav">添加到收藏夾</a>
    	</p>
    	<h2>http://www.yourSpaceUrl.com</h2>
    </div>

### 基本樣式表：

    /*個人空間名*/
    #spacename h1 {
    	font-size: 16px;
    	margin: 0;
    }

    /*網址*/
    #spacename h2 {
    	font-size: 9px;
    	font-weight: normal;
    	margin: 0;
    	padding-left: 30px;
    	line-height: 14px;
    }

    /*複製URL、添加收藏夾*/
    #spacename p {
    	float: left;
    	margin: 0;
    }
    #spacename a.copyurl, #spacename a.add2fav {
    	display: block;
    	width: 14px;
    	height: 14px;
    	overflow: hidden;
    	background: url(../images/default/icon_copy.gif) no-repeat 0 2px;
    	float: left;
    	text-indent: -9999px;
    }
    #spacename a.add2fav {
    	background-image: url(../images/default/icon_add.gif);
    }

### 演示：

# 個人空間名

複製URL 添加到收藏夾

## http://個人空間.discuz.net

## 主導航：{{menu}}

### 內部結構：

    <ul id="menu">
    	<li><a href="..." class="blog">日誌</a></li>
    	<li><a href="..." class="photo">相冊</a></li>
    	<li><a href="..." class="goods">商品</a></li>
    	<li><a href="..." class="friend">好友圈</a></li>
    	<li><a href="..." class="link">書籤</a></li>
    	<li><a href="..." class="file">文件</a></li>
    	<li><a href="..." class="bbsthread">論壇文集</a></li>
    </ul>

### 基本樣式表：

    /*導航*/
    #menu {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #menu li {
    	display: block;
    	float: left;
    	width: 60px;
    	height: 20px;
    	text-align: center;
    	line-height: 20px;
    }

### 演示：

## 用戶頭像：{{photo}}

### 內部結構：

    <div id="photo">
    	<img src="...useravatar..." alt="用戶名" class="faceimg" />
    	<p id="username"><a href="...">用戶名</a></p>
    </div>

### 基本樣式表：

    /*用戶頭像*/
    #photo .faceimg {
    	width: 150px;
    	margin: 0 auto;
    	display: block;
    	border: 1px solid #EEE;
    }
    #username {
    	margin: 0;
    	font-weight: bold;
    	line-height: 2.5em;
    	text-align: center;
    }

### 演示：

用戶名

## 用戶菜單：{{action}}、快速導航{{guide}}

用戶菜單{{action}}和快速導航{{guide}}的默認樣式是相同的，因此寫在一起。您可以拆分開來，對其進行單獨控制。

### 內部結構：

    <!-- 用戶菜單 -->
    <ul id="action">
    	<li><a href="..." class="message">留言兩句</a></li>
    	<li><a href="..." class="addfriend">加為好友</a></li>
    	<li><a href="..." class="sendpm">發送消息</a></li>
    	<li><a href="..." class="profile">查看資料</a></li>
    </ul>

    <!-- 快速導航 -->
    <ul id="guide">
    	<li><a href="..." class="spacehome">我的首頁</a></li>
    	<li><a href="..." class="ctrlpannel">空間管理</a></li>
    	<li><a href="..." class="sitehome">SupeSite/個人空間社區門戶</a></li>
    	<li><a href="..." class="bbs">論壇</a></li>
    	<li><a href="..." class="post">發表日誌</a></li>
    </ul>

### 基本樣式表：

    /*用戶菜單&快速導航*/
    #action, #guide {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	display: inline-block;
    	line-height: 160%;
    }
    #action li, #guide li {
    	float: left;
    }

    /*側邊欄中自動調整為單列顯示*/
    .sidearea #action li, .sidearea #guide li {
    	width: 100%;
    }

    #action a, #guide a {
    	margin: 0 0.5em;
    	padding-left: 1.5em;
    }

    /*帶有Icon圖標的鏈接*/
    a.addfriend {background: url(../images/default/icon_add_fri.gif) no-repeat 0;}
    a.sendpm {background: url(../images/default/icon_sendm.gif) no-repeat 0;}
    a.profile {background: url(../images/default/icon_profile.gif) no-repeat 0;}
    a.message {background: url(../images/default/icon_bbs.gif) no-repeat 0;}
    a.spacehome {background: url(../images/default/icon_user.gif) no-repeat 0;}
    a.ctrlpannel {background: url(../images/default/icon_ctrl.gif) no-repeat 0;}
    a.sitehome {background: url(../images/default/icon_home.gif) no-repeat 0;}
    a.bbs {background: url(../images/default/icon_bbs.gif) no-repeat 0;}
    a.post {background: url(../images/default/icon_edit.gif) no-repeat 0;}

### 演示：

點擊這裡切換查看側邊欄與主顯示區中的不同效果

### 用戶菜單

- 留言兩句
- 加為好友
- 發送消息
- 查看資料

### 快速導航

- 我的首頁
- 空間管理
- SupeSite/個人空間社區門戶
- 論壇
- 發表日誌

## 日曆：{{calendar}}

### 內部結構：

    <table id="calendar" ... width="100%" summary="Calendar">
    	<tr>
    		<td colspan="7">
    		<table class="datenav" ... summary="Date nav">
    		<tr>
    		<td><a href="...">&lt;&lt;</a></td>
    		<td><a href="...">2006-06-06</a></td>
    		<td><a href="...">&gt;&gt;</a></td>
    		</tr>
    		</table>
    		</td>
    	</tr>
    	<tr class="week">
    		<td>日</td>
    		<td>一</td>
    		...
    		<td>六</td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td>1</td>
    		<td>2</td>
    		<td><a href="..." title="1">3</a></td>
    		...
    		<td>31</td>
    	</tr>
    </table>

### 基本樣式表：

    /*日曆*/
    #calendar {
    	font-family: Verdana, Arial, Helvetica, sans-serif, "細明體";
    	font-size: 10px;
    	text-align: center;
    }
    #calendar .week {
    	font-size: 12px;
    	background: #EEE;
    }
    #calendar a {
    	font-weight: bold;
    	text-decoration: underline;
    }
    #calendar .datenav a {
    	font-size: 11px;
    	font-weight: normal;
    	text-decoration: none;
    }

### 演示：

<< | 2006-06-06 | >>
日 | 一 | 二 | 三 | 四 | 五 | 六
|  |  |  |  |  | 1
2 | 3 | 4 | 5 | 6 | 7 | 8
9 | 10 | 11 | 12 | 13 | 14 | 15
16 | 17 | 18 | 19 | 20 | 21 | 22
23 | 24 | 25 | 26 | 27 | 28 | 29
30 | 31 |  |  |  |  |

## 存檔、統計信息、我的好友、最新留言、論壇文集

這些功能模塊統一都是運用了<ul class="list">，請參見基本樣式：列表

## 列表

這些功能模塊具有統一的class（class="list"），因此歸於一類。

所有class="list"的功能模塊，根據放置的位置不同，顯示的樣式也會有所區別，下面這些功能模塊通常放置在側邊欄中，顯示的效果為單列列表：

- 存檔：{{archive}}
- 統計信息：{{infomation}}
- 最新評論：{{newreplay}}
- 我的收藏：{{favorite}}
- 我的好友：{{myfriend}}
- 最新留言：{{guestbook}}

還有一部分功能模塊通常放置在主顯示區，顯示的效果為兩列的列表：

- 最新日誌：{{newblog}}（若開啟日誌的摘要功能，請參見基本樣式：帶有摘要的日誌列表）
- 最熱日誌：{{hotblog}}
- 論壇文集：{{bbsthread}}

您可以自由改變功能模塊的放置位置，顯示出的樣式也會隨之改變。

### 內部結構：

    <ul class="list">
    	<li><a href="...">列表項目1</a></li>
    	<li><a href="...">列表項目2</a></li>
    	...
    </ul>

### 基本樣式表：

    /*列表*/
    .list {
    	list-style: none;
    	line-height: 160%;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	display: inline-block;
    }
    .list li {
    	text-indent: 1.5em;
    	overflow: hidden;
    	background: url(../images/default/icon_list.gif) no-repeat 0.5em 0.4em;
    	float: left;
    	width: 50%;
    	height: 1.6em;
    }

    /*側邊欄中自動調整為單列顯示*/
    .sidearea .list li {
    	width: 100%;
    }

### 演示：

點擊這裡切換查看側邊欄與主顯示區中的不同效果

- 列表項目1
- 列表項目2
- 列表項目3
- 列表項目4
- 列表項目5
- 列表項目6
- 列表項目7

## 搜索：{{search}}

### 內部結構：

    <form id="search" action="/" method="post">
    	<input type="text" id="searchkey" name="searchkey" value="" />
    	<input type="hidden" name="searchsubmit" value="1" />
    	<button type="submit" id="dosearch" name="dosearch">搜索</button>
    </form>

### 基本樣式表：

    /*搜索*/
    #searchform {
    	margin: 0;
    }
    #searchkey {
    	width: 9em;
    }

### 演示：

## 友情鏈接：{{userlink}}，個人分類：{{itemtype}}

友情鏈接和個人分類列表的樣式是相似的，因此寫在一起。不同之處在於Logo圖標鏈接的樣式和個人分類列表的行高。

### 內部結構：

    <!-- 友情鏈接 -->
    <ul id="userlink">
    	<li><a href="...">文字鏈接1</a></li>
    	<li><a href="...">文字鏈接2</a></li>
    	<li class="logo"><a href="..."><img src="..." /></a></li>
    	<li class="logo"><a href="..."><img src="..." /></a></li>
    </ul>

    <!-- 個人分類 -->
    <ul id="itemtype">
    	<li><a href="...">分類1</a></li>
    	<li><a href="...">分類2</a></li>
    	<li><a href="...">分類3</a></li>
    	<li><a href="...">分類4</a></li>
    </ul>

### 基本樣式表：

    /*友情鏈接&個人分類*/
    #userlink, #itemtype {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	overflow: hidden;
    	display: inline-block;
    }
    #userlink li, #itemtype li {
    	float: left;
    	line-height: 35px;
    	height: 35px;
    	white-space: nowrap;
    	margin-right: 0.5em;
    	text-indent: 1.5em;
    	background: url(../images/default/icon_list.gif) no-repeat 0.5em;
    }

    /*側邊欄中自動調整為單列顯示*/
    .sidearea #userlink li, .sidearea #itemtype li {
    	line-height: 160%;
    	height: 1.6em;
    	width: 100%;
    }

    /*Logo圖標鏈接*/
    #userlink li.logo {
    	height: auto;
    	background: none;
    	padding: 0;
    	text-align: center;
    }
    /*對個人分類列表的行高進行單獨控制*/
    #itemtype li {
    	line-height: 20px;
    	height: 20px;
    }

### 演示：

點擊這裡切換查看側邊欄與主顯示區中的不同效果

### 友情鏈接

- 文字鏈接1
- 文字鏈接2

### 個人分類

- 分類1
- 分類2
- 分類3
- 分類4

## 最新日誌、最熱日誌

- 普通日誌列表，請參見基本樣式：列表
- 若開啟了日誌摘要功能，請參見基本樣式：帶有摘要的日誌列表

## 文章標題

### 內部結構：

    <div class="itemsubject">
    	<h4>
    		<em>2006-06-06</em>
    		<a href="...">日誌標題</a>
    	</h4>
    </div>

### 基本樣式表：

    /*標題*/
    .itemsubject h4 {
    	height: 20px;
    	line-height: 20px;
    	font-size: 12px;
    	padding-left: 1.3em;
    	margin: 0;
    	background: url(../images/default/icon_subject.gif) no-repeat 0;
    }
    /*時間*/
    .itemsubject h4 em {
    	float: right;
    	color: #999;
    	font-style: normal;
    	font-weight: normal;
    }

### 演示：

#### 2006-06-06 日誌標題

## 文章內容

### 內部結構：

    <div class="itemmessage">
    	文章詳細內容
    </div>

### 基本樣式表：

    /*文章詳細信息*/
    .itemmessage {
    	margin: 0;
    	width: 100%;
    	overflow: auto;
    	overflow-y: hidden;
    	line-height: 1.8em;
    }
    .itemmessage * {
    	line-height: normal;
    }
    .itemmessage p {
    	line-height: 1.8em !important;
    	margin: 10px 0;
    }
    .itemmessage p * {
    	line-height: normal !important;
    }
    .itemmessage a {
    	text-decoration: underline;
    }
    .itemmessage h5 {
    	margin: 0.3em 0;
    	font-size: 12px;
    }

### 演示：

文章詳細內容

## 帶有摘要的日誌列表

### 內部結構：

    <ul class="loglist">
    	<li>
    		<div class="itemsubject">
    			請參見基本樣式：文章標題
    		</div>
    		<div class="itemmessage" id="itemXXXX">
    			請參見基本樣式：文章詳細內容
    		</div>
    	</li>
    	...
    </ul>

### 基本樣式表：

    .loglist { list-style: none; margin: 0; padding: 0; }
    .loglist li { margin-bottom: 0.5em; }

### 演示：

- #### 2006-06-06 日誌標題

  個人空間是一套Web2.0社區個人門戶系統...

- #### 2006-06-06 日誌標題

  個人空間是互聯網經營者最可靠的面向Web2.0應用的技術解決方案，適合門戶、行業網站、專業網站、個人網站等各類互聯網社區。廣大站長通過個人空間能以最快速度、最低成本建立面向Web2.0的社區個人門戶...

## 最新圖、最熱圖片

請參見基本樣式：圖片列表

## 圖片列表

### 內部結構：

    <ul class="imagelist">
    	<li>
    		<a href="..."><img src="..." /></a>
    		<p><a href="...">圖片名稱</a></p>
    	</li>
    	<li>
    		<a href="..."><img src="..." /></a>
    		<p><a href="...">圖片名稱</a></p>
    	</li>
    	...
    </ul>

### 基本樣式表：

    /*圖片列表*/
    .imagelist {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	overflow: hidden;
    	display: inline-block;
    }
    .imagelist li {
    	background: #F9F9F9;
    	float: left;
    	width: 130px;
    	height: 160px;
    	margin: 0.4em 4px 0 4px;
    	text-align: center;
    }
    .imagelist img {
    	width: 110px;
    	height: 120px;
    	border: 1px solid #FFF;
    	margin-top: 10px;
    }
    .imagelist a:hover img {
    	border-color: #DDD;
    }
    .imagelist p {
    	width: 110px;
    	height: 1.8em;
    	line-height: 1.8em;
    	overflow: hidden;
    	margin: 1px auto;
    }
    /*側邊欄中自動調整為單列顯示*/
    .sidearea .imagelist li {
    	float: none;
    	margin: 0.4em auto;
    }

### 演示：

點擊這裡切換查看側邊欄與主顯示區中的不同效果

- 圖片名稱

- 圖片名稱

## 文件、商品、書籤的通用列表樣式

該基本樣式與文件、商品、書籤等不同的外層DIV配合產生不同的效果

### 內部結構：

    <ul class="itemlist">
    	<li>
    		<p class="title"><em>2006-06-06</em><a href="...">標題</a></p>
    		<p class="disc">簡介...</p>
    	</li>
    	<li>
    		<p class="title"><em>2006-06-06</em><a href="j...">標題</a></p>
    		<p class="disc">簡介...</p>
    	</li>
    	...
    </ul>

### 基本樣式表：

    /*商品、文件、書籤列表*/
    .itemlist {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: 150%;
    }
    .itemlist li {
    	border-bottom: 1px solid #EEE;
    }
    .itemlist p {
    	margin: 0.3em 0;
    	height: 1.5em;
    	overflow: hidden;
    }
    .itemlist p.title {
    	font-weight: bold;
    }
    .itemlist em {
    	font-style: normal;
    	color: #999;
    	float: right;
    	font-weight: normal;
    }

### 演示：

- 2006-06-06 標題

  簡介...

- 2006-06-06 標題

  簡介...

## 文件列表

### 內部結構：

    <div class="filelist">
    	<ul class="itemlist">
    		<li>
    			<p class="title"><em>2006-06-06</em><a href="...">文件名稱</a></p>
    			<p class="disc">文件簡介...</p>
    		</li>
    		<li class="video">
    			<p class="title"><em>2006-06-06</em><a href="j...">文件名稱（視頻）</a></p>
    			<p class="disc">文件簡介...</p>
    		</li>
    		<li class="music">
    			<p class="title"><em>2006-06-06</em><a href="...">文件名稱（音樂）</a></p>
    			<p class="disc">文件簡介...</p>
    		</li>
    		<li class="flash">
    			<p class="title"><em>2006-06-06</em><a href="...">文件名稱（動畫）</a></p>
    			<p class="disc">文件簡介...</p>
    		</li>
    	</ul>
    </div>

### 基本樣式表：

文件列表中用到的<ul class="itemlist">請參見基本樣式：文件、商品、書籤的通用列表樣式

    /*文件列表*/
    .filelist li {
    	padding-left: 40px;
    	background: url(../images/file_type.gif) no-repeat 0 0;
    }
    li.music { background-position: 0 -60px; }
    li.video { background-position: 0 -120px; }
    li.flash { background-position: 0 -180px; }

### 演示：

- 2006-06-06 文件名稱

  文件簡介...

- 2006-06-06 文件名稱（視頻）

  文件簡介...

- 2006-06-06 文件名稱（音樂）

  文件簡介...

- 2006-06-06 文件名稱（動畫）

  文件簡介...

## 商品列表

### 內部結構：

    <div class="goodslist">
    	<ul class="itemlist">
    		<li>
    			<a href="..."><img src="..." class="goodsimg" /></a>
    			<p class="title"><em>2006-06-06</em><a href="...">商品名稱</a></p>
    			<p class="disc">商品簡介...</p>
    			<a href="..." class="buy">購買</a>
    			<p class="price">價格:<strong>10.00</strong>元</p>
    		</li>
    		...
    	</ul>
    </div>

### 基本樣式表：

商品列表中用到的<ul class="itemlist">請參見基本樣式：文件、商品、書籤的通用列表樣式

    /*商品列表*/
    .goodslist li {
    	overflow: hidden;
    	display: inline-block;
    	padding-bottom: 0.4em;
    	margin-bottom: 0.4em;
    }
    .goodsimg {
    	width: 68px;
    	height: 68px;
    	border: 1px solid #EEE;
    	float: left;
    	margin-right: 0.5em;
    }
    .buy {
    	float: right;
    }

### 演示：

- 2006-06-06 商品名稱

  商品簡介...

  購買

  價格:10.00元

- 2006-06-06 商品名稱

  商品簡介...

  購買

  價格:10.00元

## 書籤列表

### 內部結構：

    <div class="linklist">
    	<ul class="itemlist">
    		<li>
    			<p class="title"><em>2006-06-06</em><a href="...">書籤名稱</a></p>
    			<p class="disc">書籤簡介...</p>
    			<p class="linkurl"><a href="...">http://www.linlurl.com</a></p>
    		</li>
    		...
    	</ul>
    </div>

### 基本樣式表：

書籤列表中用到的<ul class="itemlist">請參見基本樣式：文件、商品、書籤的通用列表樣式

    /*書籤列表*/
    .linkurl {
    	background: url(../images/default/icon_link.gif) no-repeat left;
    	padding-left: 1em;
    }
    .linkurl a {
    	text-decoration: underline;
    }

### 演示：

- 2006-06-06 書籤名稱

  書籤簡介...

  http://www.linlurl.com

- 2006-06-06 書籤名稱

  書籤簡介...

  http://www.linlurl.com

## Tab選項卡

### 內部結構：

    <div class="listtab">
    	<a href="..." class="active">已選中的選項1</a>
    	<a href="...">其他選項</a>
    </div>

### 基本樣式表：

    .listtab {
    	border-bottom: 2px solid #EEE;
    	margin-bottom: 0.4em;
    	overflow: hidden;
    	display: inline-block;
    }
    .listtab a {
    	border: 1px solid #EEE;
    	border-bottom: none;
    	float: left;
    	line-height: 22px;
    	margin-left: 5px; padding: 0 1em;
    }
    .listtab a:hover { text-decoration: none; }
    .listtab a.active { background: #EEE; font-weight: bold; }

### 演示：

已選中其他選項

## 我的列表：{{mylog}}-日誌

### 內部結構：

    <div id="mylog">
    	<div class="listtab">
    		請參見基本樣式：Tab選項卡
    	</div>
    	<div>
    		<h3>我的日誌</h3>
    		<ul class="loglist">
    			請參見基本樣式：帶有摘要的日誌列表
    		</ul>
    	</div>
    </div>

### 基本樣式表：

- 有關列表中用到的Tab選項卡樣式請參見基本樣式：Tab選項卡
- 有關列表中用到的日誌列表樣式請參見基本樣式：帶有摘要的日誌列表

### 演示：

我的日誌日誌收藏

### 我的日誌

- #### 2006-06-06 日誌標題

  個人空間是一套Web2.0社區個人門戶系統...

- #### 2006-06-06 日誌標題

  個人空間是互聯網經營者最可靠的面向Web2.0應用的技術解決方案，適合門戶、行業網站、專業網站、個人網站等各類互聯網社區。廣大站長通過個人空間能以最快速度、最低成本建立面向Web2.0的社區個人門戶...

## 我的列表：{{mylog}}-圖片

### 內部結構：

    <div id="mylog">
    	<div class="listtab">
    		請參見基本樣式：Tab選項卡
    	</div>
    	<div>
    		<h3>我的圖片</h3>
    		<ul class="imagelist">
    			請參見基本樣式：圖片列表
    		</ul>
    	</div>
    </div>

### 基本樣式表：

- 有關列表中用到的Tab選項卡樣式請參見基本樣式：Tab選項卡
- 有關列表中用到的圖片列表樣式請參見基本樣式：圖片列表

### 演示：

我的圖片圖片收藏

### 圖片收藏

- 圖片名稱

- 圖片名稱

## 我的列表：{{mylog}}-文件

### 內部結構：

    <div id="mylog">
    	<div class="listtab">
    		請參見基本樣式：Tab選項卡
    	</div>
    	<div class="filelist">
    		<h3>我的文件</h3>
    		<ul class="itemlist">
    			請參見基本樣式：文件列表
    		</ul>
    	</div>
    </div>

### 基本樣式表：

- 有關列表中用到的Tab選項卡樣式請參見基本樣式：Tab選項卡
- 有關列表中用到的文件列表樣式請參見基本樣式：文件列表

### 演示：

我的文件文件收藏

### 我的文件

- 2006-06-06 文件名稱

  文件簡介...

- 2006-06-06 文件名稱（視頻）

  文件簡介...

- 2006-06-06 文件名稱（音樂）

  文件簡介...

- 2006-06-06 文件名稱（動畫）

  文件簡介...

## 我的列表：{{mylog}}-商品

### 內部結構：

    <div id="mylog">
    	<div class="listtab">
    		請參見基本樣式：Tab選項卡
    	</div>
    	<div class="goodslist">
    		<h3>我的商品</h3>
    		<ul class="itemlist">
    			請參見基本樣式：商品列表
    		</ul>
    	</div>
    </div>

### 基本樣式表：

- 有關列表中用到的Tab選項卡樣式請參見基本樣式：Tab選項卡
- 有關列表中用到的商品列表樣式請參見基本樣式：商品列表

### 演示：

我的商品商品收藏

### 我的商品

- 2006-06-06 商品名稱

  商品簡介...

  購買

  價格:10.00元

- 2006-06-06 商品名稱

  商品簡介...

  購買

  價格:10.00元

## 我的列表：{{mylog}}-書籤

### 內部結構：

    <div id="mylog">
    	<div class="listtab">
    		請參見基本樣式：Tab選項卡
    	</div>
    	<div class="linklist">
    		<h3>我的書籤</h3>
    		<ul class="itemlist">
    			請參見基本樣式：書籤列表
    		</ul>
    	</div>
    </div>

### 基本樣式表：

- 有關列表中用到的Tab選項卡樣式請參見基本樣式：Tab選項卡
- 有關列表中用到的書籤列表樣式請參見基本樣式：書籤列表

### 演示：

我的書籤書籤收藏

### 我的書籤

- 2006-06-06 書籤名稱

  書籤簡介...

  http://www.linlurl.com

- 2006-06-06 書籤名稱

  書籤簡介...

  http://www.linlurl.com

## 屬性列表與自定義信息

### 內部結構：

    <div class="addoninfo">
    	<h5>自定義信息</h5>
    	<ul class="propertylist">
    		<li><strong>屬性名稱</strong>:描述</li>
    		<li><strong>屬性名稱</strong>:描述</li>
    	</ul>
    </div>

### 基本樣式表：

    /*屬性列表*/
    .propertylist {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    .propertylist li {
    	border-bottom: 1px solid #F2F2F2;
    	padding: 0.3em 0;
    }

    /*自定義信息*/
    .addoninfo {
    	border: 1px solid #EEE;
    	background: #F9F9F9;
    	padding: 1em;
    	margin: 1em 0;
    }
    .addoninfo h5 {
    	font-size: 12px;
    	margin: 0.3em 0;
    	border-bottom: 1px solid #EEE;
    }

### 演示：

##### 自定義信息

- 屬性名稱:描述
- 屬性名稱:描述

## Trachback

### 內部結構：

    <div class="tburl">
    	<p>TrackBack:</p>
    	<ul>
    		<li class="tbgbk">...</li>
    		<li class="tbutf8">...</li>
    	</ul>
    </div>

### 基本樣式表：

    /*TarckBack*/
    .tburl {
    	line-height: 1.5em;
    	margin-bottom: 1em;
    }
    .tburl p {
    	font-weight: bold;
    	margin: 0;
    }
    .tburl ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    .tburl li {
    	padding-left: 35px;
    	font-size: 9px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	border: none;
    	background: transparent;
    	color: #666;
    	width: 90%;
    	cursor: pointer;
    }
    .tburl li.tbgbk {
    	background: url(../images/default/icon_tb_gbk.gif) no-repeat left;
    }
    .tburl li.tbbig5 {
    	background: url(../images/default/icon_tb_big5.gif) no-repeat left;
    }
    .tburl li.tbutf8 {
    	background: url(../images/default/icon_tb_utf8.gif) no-repeat left;
    }

### 演示：

TrackBack:

- http://www.supesite.com/supesite/trackback.php?id=0000&encode=gbk
- http://www.supesite.com/supesite/trackback.php?id=0000&encode=utf-8

## 底部鏈接、快捷功能與Tag

### 內部結構：

    <p class="itemactions">
    	<a href="...">審核</a>
    	<a href="javascriot:;">編輯</a>
    	<a href="..." class="addfav">加入收藏</a>
    </p>
    <p class="itemlinks">
    	<a href="...">導入論壇</a>
    	<em>查看(17)</em>
    	...
    </p>
    <p class="itemtag">TAG:
    	<a href="...">個人空間</a>
    	<a href="...">SupeSite</a>
    	<a href="...">Blog</a>
    </p>

### 基本樣式表：

    /*文章底部鏈接*/
    .itemactions, .itemlinks {
    	margin: 0;
    	border-top: 1px solid #EEE;
    	padding: 0.3em 0;
    }
    .itemactions {
    	float: right;
    }
    .itemlinks {
    	border-top: 1px solid #EEE;
    }
    .itemactions a {
    	background: url(../images/default/icon_edit.gif) no-repeat left;
    	padding: 0 0.5em 0 1em;
    }
    .itemlinks a, .itemlinks em {
    	padding: 0 0.5em;
    	border-right: 1px solid #EEE;
    	font-style: normal;
    }
    a.addfav {
    	background-image: url(../images/default/icon_add.gif);
    }

    /*TAG*/
    .itemtag {
    	padding: 0.4em 7em 0.4em 3.5em;
    	line-height: 1.5em;
    	font-weight: bold;
    	text-indent: -2.4em;
    	background: #F9F9F9;
    	border-top: 1px solid #EEE;
    	border-bottom: 1px solid #EEE;
    	margin: 1em 0;
    }
    .itemtag a {
    	font-weight: normal;
    	color: #666;
    	padding-left: 0.5em;
    }

### 演示：

審核編輯加入收藏

導入論壇查看(17)回復(1)引用(0)好評(3) 差評(0)

TAG: 個人空間 SupeSite Blog

## 評論列表與評論框

### 內部結構：

    <div id="itemreply">
    	<a href="..."><img src="..." class="signicon" /></a>
    	<dl id="comment1198">
    		<dt>
    			<a href="..." title="刪除" class="del">刪除</a>
    			<span class="rate">+3</span>
    			<a href="...">Guest</a>
    			發表於 <em>2006-06-01 18:43:53</em>
    		</dt>
    		<dd>留言內容...</dd>
    	</dl>
    	...
    </div>
    <div id="itemform">
    	<h3>我來說兩句</h3>
    	<form id="commentform" action="..." method="post">
    		<p><label for="commentrate">我來評分</label>
    			<select id="rates" name="rates">
    				<option value="5">+5</option>
    				...
    				<option value="-5">-5</option>
    			</select>
    		</p>
    		<p><label for="nickname">您的呢稱</label>
    			<input type="text" id="nickname" name="nickname" /> (可選)
    		</p>
    		<p><label for="commentmsg">回復內容</label>
    			<textarea id="commentmsg" name="commentmsg"></textarea>
    		</p>
    		<p>
    			<button id="btncomment" onclick="...">發表回復</button>
    		</p>
    	</form>
    </div>

### 基本樣式表：

    /*評論列表*/
    #itemreply { margin: 1em 2em; }
    #itemreply dl { margin: 0 0 1em 5.7em; padding: 0; }
    #itemreply dt {
    	border-bottom: 1px solid #EEE;
    	margin-bottom: 0.5em;
    	padding-top: 0.2em; color: #999;
    }
    #itemreply dt span.rate {
    	background: #F5F5F5;
    	font-size: 11px;
    	color: red;
    	padding: 0 0.7em 0 0.2em;
    	font-weight: bold;
    }
    #itemreply dt em { font-size: 11px; font-style: normal; }
    #itemreply dt a.del { float: right; }
    #itemreply dd {
    	margin: 0;
    	padding-bottom: 0.4em;
    	width: 100%;
    	overflow: auto;
    	overflow-y: hidden;
    	padding-bottom: 1em;
    }
    /*評論者頭像*/
    #itemreply img.signicon {
    	float: left;
    	border: 1px solid #EEE;
    	background: #F9F9F9;
    	padding: 0.3em;
    	width: 48px;
    	height: 48px;
    }

    /*發表評論*/
    #itemform { width: 350px; border: 1px solid #EEE; margin: 1em auto; padding: 1em; }
    #itemform h3 { border-bottom: 1px solid #EEE; margin: 0.5em 0; }
    #itemform p { margin: 0.3em 0; }
    #commentmsg { width: 280px; height: 8em; vertical-align: text-top; }
    #btncomment { margin-left: 4em; }

### 演示：

刪除 +3 Guest 發表於 2006-06-01 18:43:53
  留言內容...

### 我來說兩句

我來評分

您的呢稱 (可選)

回復內容

## 日誌內容

### 內部結構：

    <div class="itemsubject">
    	請參見基本樣式：文章標題
    </div>
    <p class="iteminfo">
    	<span class="weather">天氣: 晴朗</span>
    	<span class="mood">心情: 高興</span>
    	<span class="digest" title="精華III">精華III</span>
    	<span class="top" title="置頂">置頂</span>
    	<span class="haveattach" title="附件">附件</span>
    	<span class="notpublic" title="私人瀏覽">私人瀏覽</span>
    	<span class="noreply" title="禁止評論">禁止評論</span>
    	<span class="viewcredits" title="加密積分10">10</span>
    </p>
    <div class="itemmessage">
    	請參見基本樣式：文章詳細內容
    </div>
    <div class="addoninfo">
    	請參見基本樣式：自定義信息
    </div>
    <div class="tburl">
    	請參見基本樣式：Trackback
    </div>
    <p class="itemactions">
    	請參見基本樣式：底部鏈接、快捷功能與Tag
    </p>
    <div id="itemreply">
    	請參見基本樣式：評論列表與評論框
    </div>

### 基本樣式表：

    /*文章附加信息*/
    p.iteminfo {
    	line-height: 2em;
    	height: 2em;
    	background: #F9F9F9;
    	margin: 0;
    	padding: 0 0.6em;
    }
    p.iteminfo span {
    	display: block;
    	float: left;
    	width: 2em;
    	height: 2em;
    	overflow: hidden;
    	text-indent: -9999px;
    	cursor: pointer;
    	background: no-repeat left center;
    }
    p.iteminfo span.weather, p.iteminfo span.mood {
    	float: right;
    	width: auto;
    	text-indent: 0;
    	cursor: auto;
    	padding-left: 1em;
    }
    p.iteminfo span.digest {background-image: url(../images/default/icon_digest.gif); }
    p.iteminfo span.top { background-image: url(../images/default/icon_top.gif); }
    p.iteminfo span.haveattach { background-image: url(../images/default/icon_haveattach.gif); }
    p.iteminfo span.noreply { background-image: url(../images/default/icon_noreply.gif); }
    p.iteminfo span.notpublic { background-image: url(../images/default/icon_notpublic.gif); }
    p.iteminfo span.viewcredits {
    	background-image: url(../images/default/icon_viewcredits.gif);
    	text-indent: 18px; width: auto;
    }

### 演示：

#### 2006-06-06 日誌標題

天氣: 晴朗 心情: 高興 精華III 置頂 附件 私人瀏覽 禁止評論 10

日誌內容...

## 圖片內容

### 內部結構：

    <div class="itemsubject">
    	請參見基本樣式：文章標題
    </div>
    <div class="imagebox">
    	圖片顯示區
    </div>
    <div class="itemmessage">
    	<h5>圖片故事</h5>
    	請參見基本樣式：文章詳細內容
    </div>
    <div class="addoninfo">
    	請參見基本樣式：自定義信息
    </div>
    <p class="itemactions">
    	請參見基本樣式：底部鏈接、快捷功能與Tag
    </p>
    <div id="itemreply">
    	請參見基本樣式：評論列表與評論框
    </div>

### 基本樣式表：

    /*圖片顯示頁面*/
    .imagebox { border: 1px solid #EEE; }

### 演示：

#### 2006-06-06 圖片標題 (圖片數: 6)

圖片顯示區

##### 圖片故事

圖片故事內容...

## 文件內容

### 內部結構：

    <div class="itemsubject">
    	請參見基本樣式：文章標題
    </div>
    <div class="filedetail">
    	<div class="mediabox">
    		媒體展示區（視頻、音樂及Flash動畫）
    	</div>
    	<ul class="propertylist">
    		<li><strong>文件大小</strong>: 30MB</li>
    		...
    		<li><strong>查看次數</strong>: 200</li>
    	</ul>
    	<div class="itemmessage">
    		<h5>文件介紹:</h5>
    		請參見基本樣式：文章詳細內容
    	</div>
    	<div class="addoninfo">
    		請參見基本樣式：自定義信息
    	</div>
    	<div class="filedown">
    		<div class="localdown">
    			<h5>本地下載</h5>
    			<ul class="propertylist">
    				<li><a href="...">本地下載1</a></li>
    				<li><a href="...">本地下載2</a></li>
    			</ul>
    		</div>
    		<div class="netdown">
    			<h5>遠程下載</h5>
    			<ul class="propertylist">
    				<li><a href="...">遠程下載1</a></li>
    				<li><a href="...">遠程下載2</a></li>
    			</ul>
    		</div>
    	</div>
    </div>
    <p class="itemactions">
    	請參見基本樣式：底部鏈接、快捷功能與Tag
    </p>
    <div id="itemreply">
    	請參見基本樣式：評論列表與評論框
    </div>

### 基本樣式表：

    .mediabox { border: 1px solid #EEE; }
    .filedetail .propertylist { overflow: hidden; display: inline-block; }
    .filedetail .propertylist li { float: left; width: 50%; }
    .filedown { overflow: hidden; display: inline-block; }
    .filedown div { float: left; width: 50%; }
    .filedown h5 { font-size: 12px; margin: 0.5em 0; }
    .filedown .propertylist li { width: 100%; }

### 演示：

#### 2006-07-20 文件標題

媒體展示區（視頻、音樂及Flash動畫）

- 文件大小: 30MB
- 軟件版本: V1.0
- 開 發 商: 本站原創
- 下載來源: 本地
- 軟件語言: 簡體中文
- 授權方式: 免費
- 精華級別: 普通
- 查看次數: 200

##### 文件介紹:

文件介紹內容...

##### 本地下載

- 本地下載1
- 本地下載2

##### 遠程下載

- 遠程下載1
- 遠程下載2

## 商品內容

### 內部結構：

    <div class="itemsubject">
    	請參見基本樣式：文章標題
    </div>
    <a href="..."><img src="..." lass="goodspic" /></a>
    <div class="goodsproperty">
    	<ul class="propertylist">
    		<li>當前價格: <strong>10</strong>元</li>
    		<li>可售數量: 1</li>
    		<li class="wide">買家承擔運費  平郵:20元 快遞:0元 EMS:0元</li>
    		<li class="wide">有效時間範圍:2006-06-06~~2006-06-15</li>
    	</ul>
    	<p class="buybtn"><a href="..." title="出價" class="auction">出價</a></p>
    	<ul class="propertylist">
    		<li>發佈日: 2006-06-06</li>
    		<li>新舊程度: 全新</li>
    		<li>所在地: 北京</li>
    		<li>付款方式: 款到發貨</li>
    		<li>出價次數: 2次 </li>
    		<li>瀏覽量: 255次 </li>
    	</ul>
    	<p><a href="..." class="send2fav">加入收藏</a></p>
    </div>
    <div class="addoninfo">
    	請參見基本樣式：自定義信息
    </div>
    <div class="itemmessage">
    	<h5>商品詳細描述</h5>
    	請參見基本樣式：文章詳細內容
    </div>
    <div id="aplist">
    	<h5>歷史出價記錄</h5>
    	<table summary="歷史出價記錄" cellspacing="0" cellpadding="2" width="100%">
    		<colgroup>
    			<col class="buyer" />
    			<col class="price" />
    			<col class="buynum" />
    			<col class="time" />
    			<col class="status" />
    		</colgroup>
    		<tr>
    			<th width="20%">買家</th>
    			<th width="15%">出價(元)</th>
    			<th width="15%">購買數量</th>
    			<th width="35%">時間</th>
    			<th width="15%">狀態</th>
    		</tr>
    		<tr class="ontop">
    			<td>買家1</td>
    			<td>200</td>
    			<td>1</td>
    			<td>2006-06-06</td>
    			<td>領先</td>
    		</tr>
    		<tr>
    			...
    		</tr>
    	</table>
    </div>
    <p class="itemactions">
    	請參見基本樣式：底部鏈接、快捷功能與Tag
    </p>
    <div id="itemreply">
    	請參見基本樣式：評論列表與評論框
    </div>

### 基本樣式表：

    /*商品顯示頁面*/
    .goodspic {
    	width: 200px;
    	height: 200px;
    	float: left;

    	border: 1px solid #EEE;
    }
    .goodsproperty { margin-left: 210px; }
    .goodsproperty .propertylist {
    	overflow: hidden;
    	display: inline-block;
    }
    .goodsproperty .propertylist li {
    	width: 50%;
    	float: left;
    }
    .goodsproperty .propertylist li.wide { width: 100%; }

    /*出價記錄*/
    #aplist h5 { margin: 0.5em 0; font-size: 12px; }
    #aplist table { text-align: center; }
    #aplist th { border-bottom: 1px solid #DDD; }
    #aplist td { border-bottom: 1px solid #EEE; }
    #aplist .ontop td { background: #F5F5F5; }

### 演示：

#### 2006-06-06 商品名稱

- 當前價格: 10元
- 可售數量: 1
- 買家承擔運費 平郵:20元 快遞:0元 EMS:0元
- 有效時間範圍:2006-06-06~~2006-06-15

出價

- 發佈日: 2006-06-22
- 新舊程度: 全新
- 所在地: 北京
- 付款方式: 款到發貨
- 出價次數: 0次
- 瀏覽量: 255次

加入收藏

##### 商品詳細描述

商品詳細描述...

##### 歷史出價記錄

買家 | 出價(元) | 購買數量 | 時間 | 狀態
--- | --- | --- | --- | ---
買家1 | 200 | 1 | 2006-06-06 | 領先
買家2 | 100 | 1 | 2006-06-06 | 出局

## 書籤內容

### 內部結構：

    <div class="itemsubject">
    	請參見基本樣式：文章標題
    </div>
    <div class="linkproperty">
    	<ul class="propertylist">
    		<li><strong>地址</strong>:
    		<a href="..." class="url">http://www.yourdomain.com</a></li>
    		<li><strong>網頁快照</strong>:
    		<a href="..." class="snapshot">查看快照</a></li>
    	</ul>
    	<div class="itemmessage">
    	<h5>書籤介紹</h5>
    		請參見基本樣式：文章詳細內容
    	</div>
    </div>
    <div class="addoninfo">
    	請參見基本樣式：自定義信息
    </div>
    <p class="itemactions">
    	請參見基本樣式：底部鏈接、快捷功能與Tag
    </p>
    <div id="itemreply">
    	請參見基本樣式：評論列表與評論框
    </div>

### 基本樣式表：

無特有樣式

### 演示：

#### 2006-06-06書籤標題

- 地址: http://www.yourdomain.com
- 網頁快照: 查看快照

##### 書籤介紹

書籤介紹...