HTML仿CSDN博文内容摘要样式

来源：互联网发布：淘宝二手手机店铺推荐编辑：程序博客网时间：2024/05/16 11:20

前言

因为要搭建自己的个人网站，以作学习总结用，平时也会在网站发表文章用，还是很喜欢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>

结语

别的就不多说了，反正也不是自己的，没啥可说的，还是搭建自己的网站去吧

1 0