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

通用

首頁

索引頁

內容頁

個人空間名：{{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;}

演示：

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

用戶菜單

快速導航

日曆：{{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
2345678
9101112131415
16171819202122
23242526272829
3031     

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

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

列表

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

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

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

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

內部結構：

<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%;
}

演示：

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

搜索：{{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;
}

演示：

友情鏈接和個人分類列表的樣式是相似的，因此寫在一起。不同之處在於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;
}

演示：

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

友情鏈接

個人分類

最新日誌、最熱日誌

文章標題

內部結構：

<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; }

演示：

最新圖、最熱圖片

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

圖片列表

內部結構：

<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;
}

演示：

文件列表

內部結構：

<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; }

演示：

商品列表

內部結構：

<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;
}

演示：

內部結構：

<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;
}

演示：

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>

基本樣式表：

演示：

我的日誌日誌收藏

我的日誌

  • 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>

基本樣式表：

演示：

我的圖片圖片收藏

圖片收藏

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

內部結構：

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

基本樣式表：

演示：

我的文件文件收藏

我的文件

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

內部結構：

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

基本樣式表：

演示：

我的商品商品收藏

我的商品

內部結構：

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

基本樣式表：

演示：

我的書籤書籤收藏

我的書籤

屬性列表與自定義信息

內部結構：

<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

內部結構：

<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: 個人空間SupeSiteBlog

評論列表與評論框

內部結構：

<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
文件介紹:
文件介紹內容...
本地下載
遠程下載

商品內容

內部結構：

<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書籤標題

書籤介紹
書籤介紹...