前言
因为要搭建自己的个人网站,以作学习总结用,平时也会在网站发表文章用,还是很喜欢CSDN这样大气显示内容摘要的风格,于是就借用了一下CSDN的样式,在我的网站显示效果如下:
本示例代码的效果如下:
下面是HTML源码,点此下载全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>王文松的个人网站</title>
<link href="css/base.css" rel="stylesheet"/>
<link href="css/blog.css" rel="stylesheet"/>
</head>
<body>
<div style="width: 50%; margin:0 auto;">
<div class="article_list">
<!--List 1-->
<div class="article_list_item">
<div class="article_title">
<span class="ico ico_type_Original"></span>
<h1>
<span class="title"><a href="/mybelief321/article/details/50276253">
梦想还是要有的,万一实现了呢
</a></span>
</h1>
</div>
<div class="article_description">
<p class="summary"> 梦想像极了一个魔法,让千疮百孔的人满血复活。
然后你会明白,人生没有一条路是白走的,每个转弯都有它的意义。
至于未来怎么样,要用力走下去才知道...</p>
</div>
<div class="article_manage">
<span>2016-01-06 22:53</span>
<span ><a href="#">阅读:</a>12</span>
<span class="link_comment"><a href="#">评论:</a>1</span>
<span >分类:<a href="#">碎言碎语</a></span>
</div>
<div class="clear"></div>
</div>
<!--List 2-->
<div class="article_list_item">
<div class="article_title">
<span class="ico ico_type_Repost"></span>
<h1>
<span class="title"><a href="/mybelief321/article/details/50276253">
数据库设计系列1--需求分析
</a></span>
</h1>
</div>
<div class="article_description">
<p class="summary"> 设计一个性能良好的数据库系统,明确应用环境对系统的要求是首要的和基本的。因此,应该把对用户需求的收集和分析作为数据库设计的第一步。
需求分析的主要任务是通过详细调查要处理的对象...</p>
</div>
<div class="article_manage">
<span>2016-01-06 22:53</span>
<span ><a href="#">阅读:</a>12</span>
<span class="link_comment"><a href="#">评论:</a>1</span>
<span >分类:<a href="#">数据库</a></span>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
结语
别的就不多说了,反正也不是自己的,没啥可说的,还是搭建自己的网站去吧