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

javalearner

今天来看看“附加栏目”部分的样式吧，这部分多少有意思了一些。
为了在脑子里有个直观些的概念，可以回顾一下“附加栏目”这部分的设计样式以及HTML代码。在样式方面，左侧的博客链接列表里面包含3列内容，我们可以使用左浮动<li>的方式来做；宽度做做好就OK；右侧是常规的单列无序列表，没什么悬念，容器整体右浮动即可。问题主要出在最后一行的那几个<li>上面；我们先把“附加栏目”这部分的样式代码列出来，然后看下哪里有不爽：
  
   
   
    /*
  Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}

#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
  color: #C74350;
  font-size: 1.429em;
  margin-bottom: .25em;
  padding: 0 3px;
}

#extras a:link, #extras a:visited {
  color: #444;
  display: block;
  border-bottom: 1px solid #F4E3E3;
  text-decoration: none;
  padding: .3em .25em;
}

  /* Blogroll */
  #extras .blogroll {
    float: left;
    width: 615px;
  }

  #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}

  /* Social */
  #extras .social {
    float: right;
    width: 175px;
  }
[/code]
   
   
  
根据设计图呢，最后一行的链接是不需要有下边框的；而目前的代码做出的样式如下图：

可以通过高亮的部分看到，最后一行显然还是有下边框的，因为大家都是被<li>和<a>的border-bottom搞成 这样的。所以，我们接下来要做的就是将“博客链接”列表里的最后3个元素以及右边“收藏分享”里最后一个元素的下边框去掉。通过下面这段代码：
  
   
   
    #extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}[/code]
   
   
  
我们可以将列表中最后一个元素的<li>和<a>的下边框去掉；这对“收藏分享”列表是OK的，因为它只有一列；而“博客 链接”列表还剩下倒数第二和第三个链接需要再搞一下；我们在之前的样式代码后面继续添加：
  
   
   
    #extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}[/code]
   
   
  
可以顾名思义了，我们使用nth-last-child()来选择倒数第n个元素并进行样式设置；不过很自然的，这些在IE原生状态下没什么用处； 不过对于这样非关键性的设计细节，我们没必要付出太多代价来保证在IE下能够实现，那样会得不偿失。
“附加栏目”的部分就到这里；接下来的教程里面我们将搞一搞主体内容里面每篇文章的样式。

   
   
jcomments.setAntiCache(1,0,0);
                  
   
   
  


  
  
   
   

     
   

     
   
  

复制代码