昨天在水区看到一个帖子,先不管效果图为何样..
先看结构
<div>
<div class="pagebar">
<div class="pagebar_center">
第8/201頁
<a href=""><img src="images/prev.gif" alt="上一頁" /></a>
<a class="pagenum" href="">3</a>
<a class="pagenum" href="">4</a>
<a class="pagenum" href="">5</a>
<a class="pagenum" href="">6</a>
<a class="pagenum" href="">7</a>
<a class="pagenum" href="">8</a>
<a class="pagenum" href="">9</a>
<span class="pagenumon">10</span>
<a class="pagenum" href="">11</a>
<a class="pagenum" href="">12</a>
<a href=""><img src="images/next1.gif" alt="下一頁" /></a>
</div>
<span>共<span class="pagenumon">255</span>筆</span>
</div>
</div>
分析这结构的不好之处.
1. 外框div包着里面的子元素,但div定class.
2. 从最终效果上看可以得出可为分三部分--1>、第8/201頁 2>、上一頁 12345678.。0下一頁 3>、共255筆.这里却把 第8/201頁 放到了 页数中.
3. 最大的败笔--用img放修饰图片.(在禁用图片的形式下,能看到上一页 与 下一页么?)
4. <span>共<span class="pagenumon">255</span>筆</span> 此结构完全可以换一东方式思考.为什么不在外面的span定 class 而定里面的?
5. 不明白到10了为什么就不用a了呢?<span class="pagenumon">10</span>......
我建议此结构用三个标签放,加一个父亲抱着他们就行了.
<div class="pagebar">
<p class="npage">第8/201頁</p>
<p class="pagenum">
<a href="" class="uppage">上一頁</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 class="pagenumon" href="">10</span>
<a href="">11</a>
<a href="">12</a>
<a href="" class="downpage">下一頁</a>
</p>
<p class="total">共<span>255</span>筆</p>
</div>
此结构在没有新式时表现的效果:
要注意的地方:
第8/201頁 共255筆 这两个的标签宽度不能定死...中间 上一页 与 下一页 最好使用 文字+背景.直接给a class,为了以后的维护 给 p 都加上 class .
结出大体样式.
<style>
.pagebar {text-align:center;width:590px;height:50px;margin:20px auto;}
.pagebar p{float:left;}
.npage {padding:2px 12px;}
.pagenum a {display:block;padding:2px 6px;float:left;border:1px solid #000;margin:0 2px;}
.pagenum a:hover {border:1px solid #f80;}
.pagenum a.pagenumon{border:1px solid #f80;}
.pagenum a.uppage,.pagenum a.downpage {background:url(./img/) 0 0 no-repeat;border:none;}
.pagenum a:hover.uppage,.pagenum a:hover.downpage {background:url(./img/) 0 0 no-repeat;border:none;}
.total {padding:2px 12px;}
</style>
结构上面的结构与样式,得到粗略的效果:
粗说,有不同意见请提.
