holy shit

寺夺喜从天降

排行榜布局实例

效果:

结构:

 

  <div class="list">
    
<div class="list_list">
      
<ul>
        
<li><span>124412</span><em>1</em><href="">晕奇趣奇趣奇趣奇奇趣奇趣要菜</a></li>
        
<li><span>124412</span><em>2</em><href="">晕奇趣要菜</a></li>
        
<li><span>124412</span><em>3</em><href="">晕奇趣要菜</a></li>
        
<li><span>124412</span><em>4</em><href="">晕奇奇趣趣奇趣奇趣趣要菜</a></li>
        
<li><span>124412</span><em>5</em><href="">晕奇趣要菜</a></li>
        
<li><span>124412</span><em>6</em><href="">晕奇趣要菜</a></li>
        
<li><span>124412</span><em>7</em><href="">晕奇趣要菜</a></li>
        
<li><span>124412</span><em>8</em><href="">晕奇趣要菜</a></li>
        
<li><span>124412</span><em>9</em><href="">晕奇趣要菜</a></li>
      
</ul>
    
</div>
  
</div>

样式:

 

.list {
    background-color
: #EAEAEA;
    float
: left;
    width
: 250px;
    border
: 1px solid #CCCCCC;
}
.list_list 
{
    padding-top
: 5px;
    padding-right
: 10px;
    padding-bottom
: 5px;
    padding-left
: 10px;
}
.list .list_list li 
{
    line-height
: 14px;
    padding-top
: 5px;
    padding-bottom
: 5px;
}
.list_list li span 
{
    float
: right;
    padding-left
: 0px;
}
.list_list li em 
{
    padding-right
: 10px;
}
.list_list  li  a  
{
    color
: #CC3300;
}

 

 

 

posted @ 2011-05-12 22:04  潜水鱼  阅读(284)  评论(0编辑  收藏  举报

holy shit on foot