2.信息列表的制作（上）

1.普通信息列表

代码如下：

   
   
   


    

       
阅读排行榜
       

           
舌尖上的中国，传世美味炮制完全攻略
           
完全图解狗的心理
           
左手婚姻，右手爱情
           
假如给我三天光明（电子版）
       
    

效果如下：

如加入标签头▲

只需要添加代码

    ...........

     ul li{
           list-style: none;
           border-bottom: 1px dotted #ccc;
           height:24px;
           line-height: 24px;
           color:#333;
           font-size: 12px;
           padding-left: 10px;
          }
      ul li span{
                  width:20px;
                  height:20px;
                  background:#F93;
                  display: inline-block;
                  text-decoration: center;
                  line-height: 20px;
                }



  

    
阅读排行榜
    

     
△舌尖上的中国，传世美味炮制完全攻略
     
△完全图解狗的心理
     
△左手婚姻，右手爱情
     
△假如给我三天光明（电子版）
    
  

效果如下：

总结：注意span等块级元素（即块级标签）的作用。

2.带鼠标悬停效果

代码如下：

  
  
  


  

      
阅读排行榜
       

         
舌尖上的中国，传世美味炮制完全攻略
         
完全图解狗的心理
         
左手婚姻，右手爱情
         
假如给我三天光明（电子版）
       
       

效果如下：

不仅添加鼠标悬停显示超链接效果，还要添加鼠标悬停显示背景颜色改变的效果，只需要添加和改动如下代码：

   ..........
      ul li span{
                  width:20px;
                  height:20px;
                  background:#F93;
                  display: inline-block;
                  text-decoration: center;
                  line-height: 20px;
                }
      ul li:hover{
                   background: #F90;
                   color:#00F;
                  }//为整个li做背景色（文字颜色）,也可以加链接（下划线）



    

       
阅读排行榜
         

            
舌尖上的中国，传世美味炮制完全攻略
            
完全图解狗的心理
            
左手婚姻，右手爱情
            
假如给我三天光明（电子版）
         
    

效果如下：

添加鼠标移上展开效果，代码如下：

   
   
   
 
 
    

        
阅读排行榜
         

            
◆舌尖上的中国，传世美味炮制完全攻略
                  

                      
舌尖上的中国
                      
作者：本书编写组
                      
价格：$8.94
                  
            
            
◆完全图解狗的心理
                   

                      
舌尖上的中国
                      
作者：本书编写组
                      
价格：$8.94
                   
            
            
◆左手婚姻，右手爱情
                   

                       
舌尖上的中国
                       
作者：本书编写组
                       
价格：$8.94
                   
            
            
◆假如给我三天光明（电子版）
                   

                       
舌尖上的中国
                       
作者：本书编写组
                       
价格：$8.94
                   
            
         
       

 
 

效果如下：

总结：注意超链接标签a,悬浮效果标签hover，以及表格标签dl,dt,dd的使用。