龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

一个封装好的CSS分页导航栏

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
效果请看 http://blog.csdn.net/greystar/archive/2008/04/08/2260363.aspx page.css #channel-page { height:22px; margin:5px auto; padding:0px; text-align:center; line-height:20px; width:500px; } #channel-page ul#channel-page-show { line-hei

效果请看 http://blog.csdn.net/greystar/archive/2008/04/08/2260363.aspx

 

page.css

#channel-page
{
 height:22px;
 margin:5px auto;
 padding:0px;
  text-align:center;
  line-height:20px;
  width:500px;
}

#channel-page ul#channel-page-show
{
     line-height:20px;
     margin: 0px auto;
     list-style-type: none;
   
     padding:0px;
     text-align:center;
     width:100%;
     height:22px;
}
#channel-page ul#channel-page-show li
{
     display: inline;
     float: left;
     width: 23px;
     padding: 0px 2px;
  margin:2px 0px;
   height:20px;
  text-align:center;
   
}
#channel-page ul#channel-page-show li a
{
      border: solid 1px  #999 ;
     display: block;
     font-weight: 700;
     font-size: 12px;
     width: 20px;
     color: #666;
    height:20px;
     background-color: #fff;
     text-align: center;
     text-decoration: none;
    
}
#channel-page ul#channel-page-show li a:hover
{
     font-size: 20px;
     z-index: 100;
     width: 40px;
     line-height: 40px;
     position: absolute;
     height: 40px;
     margin-top: -10px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: -10px;
      b

精彩图集

赞助商链接