Go语言视频零基础入门到精通

javalearner

在前面一篇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;
  }
[/code]
   
   
  
其中“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;
}
[/code]
   
   
  
这样，当鼠标悬停在某篇文章或某个链接上时，目标对象的字色和背景色会发生相应的变化，文字会出现阴影效果。
值得一提的是，虽然HTML5允许块级元素整体被嵌套在<a>标签中，但当我们为文章列表每一个<li>中 的.hentry包裹一层<a>标签时，在Firefox 3.5.1中会发生样式错误，而Safari、Opera甚至是IE6均能正确渲染。

   
   
jcomments.setAntiCache(1,0,0);
                  
   
   
  


  
  
   
   

     
   

     
   
  

复制代码