HTML5 教程学习 - HTML5+CSS3 实战(16) 文章列表 - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

HTML5 教程学习 - HTML5+CSS3 实战(16) 文章列表

Blog - 代码 Tuesday, 09 February 2010 14:22

在前面一篇HTML5+CSS3实战里面，我们搞定了范例页面“附加栏目”部分的样式；今天来一起看看正文部分文章列表的样式代码。首先呢，可以参考之前的文章来回顾一下文章列表部分的设计样式及 HTML代码。心中有数，下面是文章列表部分的基本样式代码：

 /* Blog */
.hentry {
  border-bottom: 1px solid #eee;
  padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
 
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
 
.hentry .post-info * {font-style: normal;}
 
  /* Content */
  .hentry footer {margin-bottom: 2em;}
  .hentry footer address {display: inline;}
  #posts-list footer address {display: block;}
 
  /* Blog Index */
  #posts-list {list-style: none; margin: 0;}
  #posts-list .hentry {padding-left: 200px; position: relative;}
  #posts-list footer {
    left: 10px;
    position: absolute;
    top: 1.5em;
    width: 190px;
  }

其中“li:last- child .hentry”的设定去掉了文章列表中最后一篇文章的下边框线及内边距；另外通过“#content > .hentry”，我们可以选取那些作为#content容器直接子元素的.hentry文章段落；如果某.hentry元素嵌套在有序列表中，那么它就不会被选中。这是从文章内页的角度出发进行的考虑(虽然我们的范例里不会涉及到)，因为内页单篇文章是不需要下边框的。

接下来我们对鼠标悬停效果做些处理；将下面的代码添加到main.css中：

#posts-list .hentry:hover {
  background: #C64350;
  color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
  color: #F6CF74;
  text-shadow: 1px 1px 1px #333;
}