您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 表单按钮 >

用CSS实现链接文字阴影效果

时间：2014-06-08 09:19 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<html>
<head>
<title>CSS分页按钮</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">  
#nav {
list-style: none;
display: inline;
}
#nav li {
display: inline;
margin-right: 5px;
float: left;
height: 20px;
width: 20px;
}
#nav a {
color: #399;
text-decoration: none;
display: block;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
#nav li a:hover {
font-size: 24px;
line-height: 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 10;
margin: -5px 0 0 -5px;
font-weight: bold;
color: #CC66FF;
border: 1px dotted #666666;
background: #EEE;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">«</a></li>
<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>
<li><a href="/">8</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

用CSS制作的阴影链接文字，很实用的效果哦！
<style type="text/css">

#nav {

list-style: none;

display: inline;

}

#nav li {

display: inline;

margin-right: 5px;

float: left;

height: 20px;

width: 20px;

}

#nav a {

color: #399;

text-decoration: none;

display: block;

font-size: 14px;

font-family: Geneva, Arial, Helvetica, sans-serif;

border: 1px solid #999;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

}

#nav li a:hover {

font-size: 24px;

line-height: 30px;

height: 30px;

width: 30px;

position: absolute;

z-index: 10;

margin: -5px 0 0 -5px;

font-weight: bold;

color: #CC66FF;

border: 1px dotted #666666;

background: #EEE;

}

</style>

用CSS实现链接文字阴影效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/biaodan/8558.html

标签：网站源码

上一篇：JS提交确认在新窗口中显示提交信息

下一篇：没有了

[表单按钮] css和jquery实现的select美化自

[表单按钮] CSS3实现的很漂亮的搜索框

[表单按钮] HTML5仿android手机下滑菜单效果

[表单按钮] 表单美化之textarea文本域背景的

[表单按钮] 可用于权限管理的JS树形菜单级联

[表单按钮] HTML5动态添加表格行列并编辑表

[表单按钮] html5实现开关风格的Checkbox /

[表单按钮] 表单美化之注册与登录界面的美化

[表单按钮] 网页放大缩小按钮效果

[表单按钮] 鼠标经过input时的颜色发生变化

[表单按钮] 效果超酷的textarea的输入字数限

[表单按钮] HTML5+CSS3超酷表单

相关内容推荐

PHP基础教程

dedecms超级标签

JavaScript教程

JavaScript源码

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1