一款简约的CSS翻页效果分享


DIV CSS实例:一款不错的CSS翻页效果
下面是XHTML代码:

Example Source Code
<p>
<a href=”https://www.cnwebshow.com/”>Digg Style – cnwebshow.com</a>
<div class=”digg”>
<span class=”disabled”> < </span>
<span class=”current”>1</span>
<a href=”#?page=2″>2</a>
<a href=”#?page=3″>3</a>
<a href=”#?page=4″>4</a>
<a href=”#?page=5″>5</a>
<a href=”#?page=6″>6</a>
<a href=”#?page=7″>7</a>

<a href=”#?page=199″>199</a>
<a href=”#?page=200″>200</a>
<a href=”#?page=2″> > </a>
</div>
</p>

以下是CSS代码:

Example Source Code [
DIV.digg {
    PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}

DIV.digg A {
    BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}

DIV.digg A:hover {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}

DIV.digg A:active {
    BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
}

DIV.digg SPAN.current {
    BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
}

DIV.digg SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

源码如下:

        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

—-想了解更多的linux相关异常处理怎么解决关注<计算机技术网(www.ctvol.com)!!>

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/csstutorial/63377.html

(0)
上一篇 2020年4月10日
下一篇 2020年4月10日

精彩推荐