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

秋叶资源网 by Qiuye

秋叶资源网: 网易云音乐赞赏计划三栏介绍卡片 - 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>





<section class="m-howto">
	<h3 class="tt1">如何申请开通赞赏 - Npcink</h3>
	<p class="sub1">想要开通赞赏功能很简单,只要按照下面的介绍完成三个步骤的操作,我们承诺会在三个工作日内完成审核!</p>
	<ol class="list">
	<li class="itm">
	<h4 class="num">第一步</h4>
	<h5 class="tt2 s-fcTheme">阅读协议</h5>
	<div class="pic pic-1"></div>
	<p class="sub2">由专业的法务团队提供合作协议<br>并将其中关于版权的部分着重显示<br>您关心的,我们也最为珍惜</p>
	</li>
	<li class="itm">
	<h4 class="num">第二步</h4>
	<h5 class="tt2 s-fcTheme">提交资料和作品</h5>
	<div class="pic pic-2"></div>
	<p class="sub2">提供您的基本信息和作品<br>以便验明真身,获得更好的服务<br>我们不会将信息透露给任何第三方</p>
	</li>
	<li class="itm">
	<h4 class="num">第三步</h4>
	<h5 class="tt2 s-fcTheme">等待审核</h5>
	<div class="pic pic-3"></div>
	<p class="sub2">承诺三个工作日内完成审核<br>我们和您一样讨厌等待<br>尤其是激动人心的时刻到来之前</p>
	</li>
	</ol>
	<div class="circle"></div>
	</section>


	<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-howto{background:url(./img/howto_bg.jpg) center center no-repeat, url(./img/howto_x.jpg) repeat-x;}
    
    .m-howto{position:relative;height:700px;}
    .m-howto .tt1{position:relative;padding:80px 0 20px;font-weight:normal;font-size:28px;color:#fff;text-align:center;}
    .m-howto .tt1:after{content:'';position:absolute;bottom:0;left:50%;margin-left:-50px;display:block;width:100px;height:2px;background-color:#e75c49;}
    .m-howto .sub1{margin-top:20px;font-size:18px;color:#fff;color:rgba(255,255,255,.75);text-align:center;}
    .m-howto .list{margin:35px auto 0;width:1100px;}
    .m-howto .itm{float:left;width:280px;height:330px;margin-left:130px;padding-top:20px;background-color:#fff;text-align:center;}
    .m-howto .itm:first-child{margin-left:0;}
    .m-howto .itm .num{font-weight:normal;font-size:18px;color:#999;}
    .m-howto .itm .tt2{margin-top:10px;font-weight:normal;font-size:24px;}
    .m-howto .itm .sub2{margin-top:20px;line-height:22px;font-size:14px;color:#888;}
    .m-howto .itm .pic{width:110px;height:110px;margin:30px auto 0;}
    .m-howto .itm .pic-1{background-position:0 -630px;}
    .m-howto .itm .pic-2{background-position:-140px -630px;}
    .m-howto .itm .pic-3{background-position:-280px -630px;}
    .m-howto .circle{position:absolute;top:-95px;left:50%;margin-left:285px;width:203px;height:197px;background-position:-380px 0;}
    
	</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">
/*补充*/
li, s {
    list-style: none;
}
body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins {
    padding: 0;
    margin: 0;
}

body {
	padding: 0px;
	height: 0px;
}

.n-title {
	text-align: center;
	padding-top: 20px;
}

</style>

</body>
</html>

 

人已赞赏
Wordpress教程

阿里云四栏文本介绍引导区块 - wordpress区块

2020-5-21 11:04:10

Wordpress教程

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

2020-5-21 11:33:56

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