上一篇
下一篇
[Div+CSS系列] Web 2.0 分页
作者:tupunco 日期:2008-06-23
本系列前言
尝试着写点系列博文, 本来计划发点牢骚的, 但仔细想想还是不要了, 减少埋怨才是好样子的. 这个系列文章可能有好几篇, 大概每篇的标题和内容已经确定, 希望不要像去年十月份的题目, 计划写他个五六篇的, 最后由于小强的懒给流产了, 反正接下来的一年不忙一定补上.
本系列文章基本的内容都是以前小强WEB开发经验总结, 可能没有详细的实现说明, 大概全部贴的是源代码, 但小强还是努力的把实现缘由和过程说明白, 不要小强以后返回来看的时候都搞不明白. 文章虽然是经验总结, 但可能全部都是从别的地方“抄袭”过来的, 因为小强的创造性很弱, 有抄的能力已经很不错了. 文章中努力的把“抄袭”的出处给说明清楚, 并把可能涉及到的内容从某些地方给拷贝过来, 并且加上自己的理解再说明一下.
本系列的文章中涉及到的代码和结果会在IE6+FF3.0上测试并努力的使其运行统一, 因为小强所使用的机子上就这两种内核的浏览器, 如果在其他内核的浏览器上效果不一样也没有办法. 本系列文章给能看懂并感觉内容有用处的网友看, 如果看到的网友已经属于骨灰级WEB开发人员, 就不要看了, 全部是很初级的东西, 小强玩不出新的花样, 有些很初级的东西用文字表述出来感觉都吃力.
小强不善表述, 看到的网友敬请原谅. 如果愿意跟小强交流可以直接联系本人, 联系方式可以从小强博客About栏目内找到. 另外小强短句和标点使用基本乱七八糟, 颠三倒四, 也请谅解.
如果哪位感觉本系列文章不错想转载请说明出处, 谢谢.
前言
本篇博文是本系列的第一篇, 可能也是小强感觉最简单的一篇, 大概涉及的内容就是样式表边框(border)/字体颜色(color)/填充(padding)方面的内容, 另外就是HTML内Div标签与A标签的用法.
效果的起因是自己经常看到的 Web 2.0 站点漂亮和风格统一的分页样式, 可以看看 SINA 播客分页的效果, 也可以看看 JavaEye 论坛的分页. 虽然两个站点关心的内容不一样但分页效果基本雷同, 基本都是每个页码有外边框, 并且鼠标移动到相应页码改变页码样式的效果.
本篇博文内的代码一部分是从 ZCOOL 内所提供的实例代码内“抄袭”过来的.
看本篇博文之前如果 CSS知识不是太牢固建议查看“小雨 CSS 2.0 中文手册 ”内”选择符“/”伪类”/“属性->边框, 属性->内补丁 ”章节内容.
最后效果
先把效果贴出来, 小强感觉还算漂亮.
过程说明
实现的过程应该很简单,大概是注意下面的地方.
- 页码链接的样式
- 鼠标经过页码链接的样式
- 当前页码的样式
每个页码设计好页码链接边框样式(border), 再设计好鼠标经过时链接边框样式, 就可以出现途中的边框. 另外就是设置默认的填充样式(padding), 这样就可以使每个页码更加美观.
/*每个页码的样式*/ .PageList a { color: #CC0066; border: 1px #68ABD2 solid; background-color: #F0F3FD; padding: 4px 8px 4px 8px; } /*页码鼠标经过时的样式*/ .PageList a:hover { color: #FFFFFF; border: 1px #006699 solid; background-color: #5FAFD6; }
.PageList a 的意思为: Class为PageList的Div标签下所有A标签. 设置了所有页码的链接样式.
.PageList a:hover 的意思为: Class为PageList的Div标签下所有A标签鼠标经过时(over). 设置了鼠标经过某个页码时的样式.
代码
<!DOCTYPE html PUBspanC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Div+CSS 分页</title> <style type="text/css"> body { font-size: 12px; } .PageList { background-color: #EFEFEF; padding: 10px; text-align: right; } /*每个页码的样式*/ .PageList a { color: #CC0066; border: 1px #68ABD2 solid; background-color: #F0F3FD; padding: 4px 8px 4px 8px; } /*页码鼠标经过时的样式*/ .PageList a:hover { color: #FFFFFF; border: 1px #006699 solid; background-color: #5FAFD6; } /*当前页码的样式*/ .PageList .CurrentPage { color: #CC0066; border: 1px #006699 solid; background-color: #CDDCE7; padding: 4px 8px 4px 8px; } .PageList .PageEllipsis { } .PageList .PagePrevious { } .PageList .PageNext { } .PageList .PageDisabled { } </style> </head> <body> <div class="PageList"> <a href="#1" class="PagePrevious">上一页</a> <a href="#1">1</a> <span class="PageEllipsis">...</span> <a href="#1">6</a> <a href="#1">7</a> <a href="#1">8</a> <a href="#1">9</a> <span class="CurrentPage">10</span> <a href="#1">11</a> <a href="#1">12</a> <a href="#1">13</a> <a href="#1">14</a> <span class="PageEllipsis">...</span> <a href="#1">100</a> <a href="#1" class="PageNext">下一页</a> </div> </body> </html>
后记
简简单单总算结束了一篇, 可能也算是应付自己, 没有太多的说明, 直接贴的代码, 罗嗦倒是一堆.
在本文中把 Padding 翻译成填充, 不知道是否合适, “小雨 CSS 2.0 手册”内翻译为“内补丁”.
文中的代码直接复制到一个文本文件, 另存文件为HTML格式浏览器内预览就可以了, 太弱智的内容就不多写了. 这里不提供代码下载, 学校空间有限.
希望对学习WEB设计开发有帮助.
参考
- 小雨 CSS 2.0 中文手册
- http://www.zcool.com.cn
TUPUNCO
2008.06.22
Good Luck Everybody, Everyday...
文章来自: 
引用通告: 
Tags: