会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
khdg -- 默默
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
公告
[转]CSS页码效果
不知道网上有没有做成这样的,纯粹是不小心做出来的。 最终效果说明: 页面结构是这样的
不知道网上有没有做成这样的,纯粹是不小心做出来的。
最终效果说明:
页面结构是这样的
<li><a href="#">1</a></li>
最终看到的彩色下划线是根据li的背景色显示出来的
li
{
}
{
background
:
#f60
;
}
而鼠标移上去的色彩变化是根据
a:hover
{
}
{
background
:
#f93
}
当然关键的地方在于
li
{
}
{
width
:
20px
;
height
:
20px
}
定义li的高度时由于没有定义line-height:20px,所以会造成a标签在显示时下方会留空几个像素。正在由于这个错误,无意中产生了这个效果
请运行下段代码看效果。
<!
DOCTYPE html PUBLIC "-//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"
lang
="gb2312"
>
<
head
>
<
title
>
代码基地博客站
</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
meta
name
="Keywords"
content
="CSS页码链接"
/>
<
meta
name
="Description"
content
="CSS制作的页码链接效果"
/>
<
meta
name
="Author"
content
="jxdawei,jxdawei@gmail.com"
/>
<
style
type
="text/css"
>
body
{
}
{
font-size
:
62.5%
;
}
h1
{
}
{
font-size
:
1.4em
;
}
h2
{
}
{
clear
:
both
;
font-size
:
1.2em
;
}
#pageClass
{
}
{
clear
:
both
;
font-size
:
1.2em
;
}
#pageClass ul
{
}
{
list-style
:
none
;
}
#pageClass li
{
}
{
float
:
left
;
width
:
20px
;
height
:
20px
;
line-height
:
20px
;
border
:
1px solid silver
;
margin
:
0 3px
;
}
#pageClass a
{
}
{
display
:
block
;
text-align
:
center
;
}
#pageClass a:link,#pageClass a:visited
{
}
{
background
:
white
;
text-decoration
:
none
;
color
:
gray
;
}
#pageClass a:hover,#pageClass a:active
{
}
{
text-decoration
:
none
;
background
:
gray
;
color
:
white
;
}
/**/
/*
第二个效果
*/
#pageClass2
{
}
{
clear
:
both
;
font-size
:
1.2em
;
}
#pageClass2 ul
{
}
{
list-style
:
none
;
}
#pageClass2 li
{
}
{
float
:
left
;
width
:
20px
;
height
:
20px
;
border
:
1px solid silver
;
margin
:
0 3px
;
}
#pageClass2 a
{
}
{
display
:
block
;
text-align
:
center
;
}
#pageClass2 a:link,#pageClass2 a:visited
{
}
{
background
:
white
;
text-decoration
:
none
;
color
:
gray
;
}
#pageClass2 a:hover,#pageClass2 a:active
{
}
{
text-decoration
:
none
;
background
:
gray
;
color
:
white
;
line-height
:
14px
;
}
/**/
/*
第三个效果
*/
#pageClass3
{
}
{
clear
:
both
;
font-size
:
1.2em
;
}
#pageClass3 ul
{
}
{
list-style
:
none
;
}
#pageClass3 li
{
}
{
float
:
left
;
width
:
20px
;
height
:
20px
;
border
:
1px solid silver
;
background
:
#f60
;
margin
:
0 3px
;
}
#pageClass3 a
{
}
{
display
:
block
;
text-align
:
center
;
line-height
:
16px
;
}
#pageClass3 a:link,#pageClass3 a:visited
{
}
{
background
:
white
;
text-decoration
:
none
;
color
:
gray
;
}
#pageClass3 a:hover,#pageClass3 a:active
{
}
{
text-decoration
:
none
;
background
:
#f93
;
color
:
white
;
line-height
:
16px
;
}
</
style
>
</
head
>
<
body
>
<
h1
>
页码效果
</
h1
>
<
h2
>
这是我原本想要去做的效果
</
h2
>
<
div
id
="pageClass"
>
<
ul
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=3"
>
1
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=4"
>
2
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=5"
>
3
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=6"
>
4
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=8"
>
5
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=9"
>
6
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp"
>
7
</
a
></
li
>
</
ul
>
</
div
>
<
h2
>
做完之后成这样了
</
h2
>
<
div
id
="pageClass2"
>
<
ul
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=3"
>
1
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=4"
>
2
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=5"
>
3
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=6"
>
4
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=8"
>
5
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=9"
>
6
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp"
>
7
</
a
></
li
>
</
ul
>
</
div
>
<
h2
>
改了改成这样了
</
h2
>
<
div
id
="pageClass3"
>
<
ul
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=3"
>
1
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=4"
>
2
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=5"
>
3
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=6"
>
4
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=8"
>
5
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp?cateID=9"
>
6
</
a
></
li
>
<
li
><
a
href
="http://www.iwcn.net/default.asp"
>
7
</
a
></
li
>
</
ul
>
</
div
>
</
body
>
</
HTML
>
posted on
2007-07-12 14:03
khdg
阅读(
890
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部