个人空间功能模块样式手册

通用

首页

索引页

内容页

个人空间名：{{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书签标题

书签介绍
书签介绍...