相当数量的网站都使用数字分页效果,例如本站的分页也是采用此方式,还算是比较美观使用吧。
代码实例如下
复制代码代码如下:
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
ul
{
list-style:none;
}
ul li
{
float:left;
width:22px;
height:22px;
margin-left:5px;
}
a
{
width:20px;
height:20px;
display:block;
text-align:center;
text-decoration:none;
background-color:white;
border:1px solid #666;
}
a:hover
{
width:40px;
height:30px;
border:1px solid #666;
position:absolute;
line-height:30px;
margin:-5px 0 0 -10px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</body>
</html>
以上代码实现了我们想要的效果,下面简单介绍一下实现的步骤:
一. 使用浮动属性,以便让li元素水平排列。
二.让a元素设置为块级元素,然后设置它们的尺寸。
三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大,并且使用绝对定位,使当前a元素能够覆盖周边的元素。
特别说明:之所以让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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>蚂蚁部落</title>
<style type="text/css">
ul
{
list-style:none;
}
ul li
{
float:left;
width:22px;
height:22px;
margin-left:5px;
}
a
{
width:20px;
height:20px;
display:block;
text-align:center;
text-decoration:none;
background-color:white;
border:1px solid #666;
}
a:hover
{
width:40px;
height:30px;
border:1px solid #666;
position:absolute;
line-height:30px;
margin:-5px 0 0 -10px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</body>
</html>
以上代码实现了我们想要的效果,下面简单介绍一下实现的步骤:
一. 使用浮动属性,以便让li元素水平排列。
二.让a元素设置为块级元素,然后设置它们的尺寸。
三.通过使用链接伪类控制当鼠标放在链接之上时使a元素的尺寸变大,并且使用绝对定位,使当前a元素能够覆盖周边的元素。
特别说明:之所以让a元素的背景色设置为白色,是因为默认状态背景是透明的,如果不设置背景色,将会看到两边被遮盖的边框。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年06月03日
2024年06月03日
- 罗斯特洛波维奇、布里顿《舒伯特-阿佩乔尼奏鸣曲》1995[WAV+CUE]
- 群星《超高品质流行女声大碟 静听女人心 2CD》[WAV+CUE][1.3GB]
- BEYOND《无悔这一生 2023》 [WAV+CUE][690MB]
- 群星《30首最发烧经典老歌 情牵男人心 2CD》[WAV+CUE][1.4GB]
- 群星《不老的情歌-至尊版2CD》WAV分轨
- 岁月留声机群星《七十年代人金曲回顾》(黑胶)2CD[WAV分轨]
- 群星-世纪难忘金曲(迪安唱片)5CD[WAV]
- HenrietteFaure-DebussyEstampesPrludes,LivreI(MonoVersion)[FLAC]
- 吕方1992-弯弯十八首[香港][WAV+CUE]
- 经典歌曲珍藏专辑《民歌30年·真情依旧》3CD[WAV+CUE]
- 群星《时尚流行发烧极品 非同凡响 第一辑 2CD》[WAV/分轨][1.3GB]
- 陈曦《多年以后》HQⅡ头版限量编号[WAV+CUE][520MB]
- 孙露《用情 HQⅡ 2023》[WAV+CUE][380MB]
- 电影原声《速度与激情9电影原声大碟》2021[WAV+CUE]
- 【瑞鸣音乐】群星《伶歌》[XRCD2][WAV+CUE]