您的位置：首页 → 网页设计 → HTML/CSS  → 橙蓝互换CSS翻页效果-DIV CSS实例

橙蓝互换CSS翻页效果-DIV CSS实例

时间：2008/9/8 12:56:00来源：本站整理作者：我要评论(0)

下面的图片是本案例中的链接背景图片：

 

下面是XHTML编码：


<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编码：


* {
    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 {

相关视频

    没有数据

相关阅读 酉闪町Dusk Diver什么时候出 酉闪町Dusk Diver发售时间DivX是什么格式 DivX解码器和播放器推荐div+css命名规范分析研究DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解决方案DIV层被flash层遮盖问题解决思路CSS+DIV实现让多个DIV排列时居中兼容IE与Firefox透明DIV提示框DIV+CSS网页布局常用的基础知识

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法