文章摘要效果专题

本例是仿照 JEK2K.com 制作的文章摘要效果，简化部分代码，使摘要部分css相对独立。

文章摘要效果专题 – 示例

/* 主体样式 */
.story {
	margin:10px;
	border-bottom:1px solid #F06;
}
/* 主体链接样式 */
.story a {
	color:#F06;
	text-decoration:none;
}
.story a:hover {
	color:#000;
}
/* 主体标题样式 */
.story h3 {
	font-size:16px;
	margin:0;
	border-top:3px solid #F06;
	padding-top:10px;
	color:#CCC;
}
/* 主体内容样式 */
.story p {
	line-height:150%;
}
/* 主体内容链接样式 */
.story p a {
	text-decoration:underline;
}
/* 主体图片样式 */
.story img {
	background-color:#d5d5d5;
	padding:3px;
	margin:10px 10px 10px 0;
}
.story img:hover {
	background-color:#eee;
}
/* 主体详细信息样式 */
.story .details {
	margin:5px 0 5px 0;
	text-align:left;
	border-bottom:1px solid #F06;
	padding:0 0 10px 0;
	font-size:11px;
	color:#666;
}
/* 主体底部链接样式 */
.story .continue {
	display:block;
	text-align:right;
	margin-bottom:15px;
}

<!-- 主体开始 -->
	<div class="story">

		<h3>
			<a href="#" rel="bookmark" title="欢迎来到 FreeBSD 的世界!">欢迎来到 FreeBSD 的世界!</a>
		</h3>

		<div class="details">
			Posted at 2006-08-32 22:32:11 &rarr; <a href="#" title="操作系统" rel="category tag">操作系统</a>
		</div>

		<p><img src="logo-red.png" alt="logo-red.png" /></p>

		<p>FreeBSD 基于<a href="#">加州大学伯克利分校计算机系统研究组(CSRG)</a>发布的 4.4BSD-Lite， 继承了 BSD 系统开发的优良传统。 除了 CSRG 优秀的工作之外， FreeBSD 项目花费了非常多的时间来优化调整系统， 使其在真实负载情况下拥有最好的性能和可靠性。像许多商业巨人努力地增加 PC 操作系统的特性、 提升性能并改善其可靠性一样， FreeBSD 现在 就已经可以提供了！</p>

		<p>FreeBSD 可以提供的应用事实上仅局限于您的想象力。从软件开发到工厂自动化，从存货控制到遥远的人造卫星天线方位控制， 如果商业的 <a href="#">UNIX</a> 产品可以做到，那么就非常有可能您也可以用 FreeBSD 来做！ FreeBSD 也极大地受益于全世界的研究中心和大学开发的数以千计的高质量的应用程序，这些程序通常只需要很少的花费甚至免费。商业应用程序也是可用的，并且每天都有大量的出现。</p>

		<p>因为 FreeBSD 自身的源代码是完全公开的，所以对于特定的应用程序或项目，可以对系统进行最大限度的定制。</p>

		<span class="continue">
			<a href="#" title="浏览完整文章">浏览完整文章 &gt;&gt;</a>
		</span>

	</div>
	<!-- 主体结束 -->