⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
低调朴实的双按钮引导卡片

秋叶资源网 by Qiuye

秋叶资源网: 网易云音乐赞赏计划三栏引导卡片 - wordpress区块

释放双眼,带上耳机,听听看~!
三栏卡片带着三个按钮,很适合在一些页面对您的访客进行引导,这次的wordpress美化教程就分享这一款网易云音乐赞赏计划三栏引导卡片

再逛网易云时发现的一个很棒的卡片,三栏卡片带着三个按钮,很适合在一些页面对您的访客进行引导,这次的wordpress美化教程就分享这一款网易云音乐赞赏计划三栏引导卡片。

  • 代码来源:详情
  • 本文授权来自:https://www.npc.ink

<span style='color:#ff5c00;font-size:30px;'>秋叶资源网</span>: 网易云音乐赞赏计划三栏引导卡片 - wordpress区块-曾经到临过沧海


<!DOCTYPE html>
<html lang="zh-CN" >
	<head>
		<title>WordPress美化 - Npcink</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>


<!--复制开始-->



<nav class="m-nav2">
	<ul class="list f-cb">
	<li class="itm">
	<div class="pic pic-song"></div>
	<h2 class="tt">单曲赞赏</h2>
	<p class="sub">您当前没有申请权限,<br>请先入驻成为网易音乐人</p>
	<a href="https://www.npc.ink/#" target="_blank" class="btn">立即申请音乐人</a>
	</li>
	<li class="itm">
	<div class="pic pic-djradio"></div>
	<h2 class="tt">主播电台赞赏</h2>
	<p class="sub">您当前没有申请权限,<br>请先创建自己的主播电台</p>
	<a href="https://www.npc.ink/#" target="_blank" class="btn">立即开通电台</a>
	</li>
	<li class="itm">
	<div class="pic pic-topic"></div>
	<h2 class="tt">音乐专栏赞赏</h2>
	<p class="sub">音乐专栏功能即将上线<br>敬请期待</p>
	<span class="btn z-dis">敬请期待</span>
	</li>
	</ul>
	<div class="f-tc f-mgt25 f-fs2"><a href="https://www.npc.ink/15936.html" target="_blank" class="s-fcTheme">了解&nbsp;Npcink &gt;</a></div>
	</nav>


	<style type="text/css">

    .m-nav2:before,.m-nav2:after,.m-nav2 .itm .pic,.m-section .pic,.m-howto .circle,.m-howto .itm .pic{background:url(./img/sprite.png) -9999px -9999px no-repeat;}
    .m-nav2{position:relative;margin:0 auto;width:1000px;height:440px;background-color:#fff;box-shadow:0 0 30px rgba(0,0,0,.1);}
    .m-nav2:before,.m-nav2:after{content:'';display:block;position:absolute;}
    .m-nav2:before{width:178px;height:184px;top:0;left:-108px;background-position:0 0;}
    .m-nav2:after{width:111px;height:111px;bottom:25px;right:-70px;background-position:-200px 0;z-index:-1;}
    .m-nav2 .list{padding:0 30px;}
    .m-nav2 .itm{float:left;width:33.33%;padding:55px 40px 0;text-align:center;box-sizing:border-box;}
    .m-nav2 .itm .pic{width:150px;height:150px;margin:0 auto;}
    .m-nav2 .itm .pic-song{background-position:0 -200px;}
    .m-nav2 .itm .pic-djradio{background-position:-150px -200px;}
    .m-nav2 .itm .pic-topic{background-position:-300px -200px;}
    .m-nav2 .itm .tt{margin-top:9px;font-weight:normal;font-size:24px;color:#333;}
    .m-nav2 .itm .sub{margin-top:5px;line-height:24px;font-size:16px;color:#888;}
    .m-nav2 .itm .btn{display:block;width:180px;height:40px;line-height:40px;margin:20px auto 0;border-radius:9999px;background-color:#fd5d64;font-size:18px;;color:#fff;}
    .m-nav2 .itm .btn.z-dis{background-color:#ccc;pointer-events:none;}
    .m-nav2 .itm .btn:hover{text-decoration:none;}
    
    li, s {
        list-style: none;
    }
/*了解更多*/
.f-mgt25 {
    margin-top: 25px;
}
.f-mgt25 {
    padding-top: 25em;
}
.f-tc {
    text-align: center;
}
.f-fs2 {
    font-size: 16px;
}
.s-fcTheme, a.s-fcTheme {
    color: #fd5d64;
}


	</style>




<!--复制到此为止-->
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="demo.js"></script>

<style type="text/css">

</style>

<script type="text/javascript">

</script>


<h2 class="n-title">右键鼠标选择“查看网页源代码”依据注释进行操作</h2>

<style type="text/css">
a {
    text-decoration: none;
}
    .n-title {
		text-align: center;
		padding-top: 50px;
	}

</style>

</body>
</html>

 

人已赞赏
Wordpress教程

网易云音乐赞赏计划三栏介绍卡片 - wordpress区块

2020-5-21 11:31:42

Wordpress教程

怎么添加中文简繁转换功能? - wordpress开发

2020-5-21 11:38:15

免责声明 秋叶资源网的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有。
如有侵权烦请发送邮件至:qiuyegen@qq.com
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索
WordPress美化 - Npcink