DIVCSS實例:橙藍互換的CSS翻頁效果_DIV+CSS實例

編輯Tag賺U幣
教程Tag:暫無Tag,歡迎添加,賺取U幣!

  DIV CSS實例:橙藍互換的CSS翻頁效果
  CSS翻頁效果在實際開發中是最常遇見的情況



  現在我們看這一款CSS翻頁效果
  最終效果www.brhhwy.live如下圖所示


  下面的圖片是本案例中的鏈接背景圖片:


  下面是XHTML編碼:

示例代碼 [www.brhhwy.live]
<div id="pagebar">
<a href="#"><<</a>
<span class="page_now">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
<a href="#">>></a>
</div>

  下面是CSS編碼:

示例代碼 [www.brhhwy.live]
* {
margin:0;
padding:0;
text-decoration:none;
}
#pagebar {
float:left;
display:inline;
width:570px;
height:32px;
margin:50px;
font-size:13px; }
#pagebar a,#pagebar .page_now {
display:block;
float:left;
margin-right:4px;
padding:2px 5px;
border:1px solid #f30;
color:#fff;
font-weight:800;
background:url(pagebar_bg.png) repeat-x 0 0 ;
}
#pagebar a {
display:inline;
}
#pagebar a:hover {
border:1px solid #03c;
background-position:0 -30px;
}
#pagebar .page_now {
border:1px solid #333;
background-image:none;
background:#666;
}

  最終的運行效果:

div css xhtml xml 代碼調試框 代碼調試框 [www.brhhwy.live]

[ 可先修改部分代碼 再運行查看效果 ]

來源:無憂整理//所屬分類:DIV+CSS實例/更新時間:2008-01-18
相關DIV+CSS實例
上海天天彩选四中奖规则 中兴通讯股票 单支股票融资比例 福州股票配资找象泰配资热情接待GO 广信配资 一路一带概念股 涵星配资 股票涨跌依据 最好的p2p理财平台 基金配资地址 上证指数年线是多少 全球股票指数stock 仙牛网配资 荣耀配资 股票涨跌与公司的关系 保本理财产品有风险吗 在线股票配资平台