善恶资源网专注优秀技术教程分享网-傅汉松!

非常好看的渐变分页样式

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是非常好看的渐变分页样式

傅汉松

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<div class="page wrap">
<a href="category-3.html"><span>‹‹</span></a>
<span class="now-page">1</span>
<a href="category-3_2.html"><span>2</span></a>
<a href="category-3_3.html"><span>3</span></a>
<a href="category-3_2.html"><span>›</span></a>
<a href="category-3_3.html"><span>››</span></a>
</div>

<style>
.page {
position: relative;
text-align: center;
margin-top: 50px;
}
.page a {
display: inline-block;
font-size: 16px;
margin: 0 5px;
display: inline-block;
padding: 10px 15px;
border: 1px solid #CACACA;
line-height: 18px;
text-decoration: none;
}
.page .now-page, .page a:hover {
color: #FFF;
padding: 11px 16px;
border: none;
background: -webkit-linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
background: -moz-linear-gradient(66deg, #0C2B47 0%, #F43B47 100%);
background: -ms-linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
background: -o-linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
background: linear-gradient(66deg, #0C2B47 0%,#F43B47 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#0C2B47, endColorstr=#F43B47, GradientType=1 );
-webkit-box-shadow: 0 5px 5px rgba(228,0,52,.13);
-moz-box-shadow: 0 5px 5px rgba(228,0,52,.13);
-ms-box-shadow: 0 5px 5px rgba(228,0,52,.13);
-o-box-shadow: 0 5px 5px rgba(228,0,52,.13);
box-shadow: 0 5px 5px rgba(228,0,52,.13);
}
</style>

</body>
</html>


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 非常好看的渐变分页样式
<!doctype html> <html> <head> <meta charset=&q...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    83.47ms