7-21 列表组--带链接的列表组
本节编程练习不计算学习进度，请电脑登录imooc.com操作

列表组--带链接的列表组

带链接的列表组，其实就是每个列表项都具有链接效果。大家可能最初想到的就是在基础列表组的基础上，给列表项的文本添加链接：

<ul class="list-group">
    <li class="list-group-item">
        <a href="##">揭开CSS3的面</a>
    </li>
    <li class="list-group-item">
        <a href="##">CSS3选择器</a>
    </li>
    ...
</ul>

运行效果如下：

这样做有一个不足之处，就是链接的点击区域只在文本上有效：

但很多时候，都希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；

虽然这样能解决问题，达到需求。但在Bootstrap框架中，还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果：

<div class="list-group">
    <a href="##" class="list-group-item">图解CSS3</a>
    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
    <a href="##" class="list-group-item">玩转Bootstrap</a>
</div>

运行效果如下：

原理实现：

如果使用a.list-group-item时，在样式需要做一定的处理，比如说去文本下划线，增加悬浮效果等：

/*bootstrap.css文件第4847行～第4858行*/
a.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}

任务

我来试试：制作一个带链接的列表组。

要求：可以使用两种方法的任意一种。

效果图如下：


 

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>列表组--带链接的列表组</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <h3>带链接的列表组1</h3>
  10. <ul class="list-group">
  11.     <li class="list-group-item">
  12. 		<a href="##">揭开CSS3的面</a>
  13. 	</li>
  14. 	<li class="list-group-item">
  15. 		<a href="##">CSS3选择器</a>
  16. 	</li>
  17. 	<li class="list-group-item">
  18. 		<a href="##">CSS3边框</a>
  19. 	</li>
  20. 	<li class="list-group-item">
  21. 		<a href="##">CSS3背景</a>
  22. 	</li>
  23. 	<li class="list-group-item">
  24. 		<a href="##">CSS3文本</a>
  25. 	</li>
  26. </ul>
  27. <h3>带链接的列表组2</h3>
  28. <div class="list-group">
  29. 	<a href="##" class="list-group-item">图解CSS3</a>
  30. 	<a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>
  31. 	<a href="##" class="list-group-item">玩转Bootstrap</a>
  32. </div>
  33.  
  34. <br/>
  35. <br/>
  36. <!--下面是代码任务部分-->
  37. <h2>代码任务部分</h2>
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  45.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  46. </body>
  47. </html>
  1. body {
  2.   padding: 30px 100px;
  3. }
下一节