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

秋叶资源网 by Qiuye

秋叶资源网: 金山四栏图文混排热门下载 - wordpress区块

释放双眼,带上耳机,听听看~!
金山官网的下载区域由四个区域组成,不仅合理的编排了不同版本的特色信息,还有贴心的按钮方便访客前去下载,这么好看的区块我当然要分享给大家啦

金山官网的下载区域由四个区域组成,不仅合理的编排了不同版本的特色信息,还有贴心的按钮方便访客前去下载,这么好看的区块我当然要分享给大家啦。

  • 代码来源:WPS

效果如下:

<span style='color:#ff5c00;font-size:30px;'>秋叶资源网</span>: 金山四栏图文混排热门下载 - wordpress区块-曾经到临过沧海

需要注意的是,图中的“热门下载”为SVG图片,相关信息请详阅注释。

本文授权来自:https://www.npc.ink


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



<div class="popular container desktop anchor">
	<h2 class="title">热门下载</h2>
	<div class="list clearfix">

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >WPS Office 2019 PC版</a>
			</h3>
			<div class="desc">
				<p>简单 创造不简单<br>个性化的办公软件<br>全面支持PDF</p>
			</div>
			<a class="btn btn-lg" href="https://www.npc.ink/15962.html" >立即下载</a>
			<a class="banner" href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >
				<img src="./img/hot01.jpg" alt="WPS Office 2019 PC版">
			</a>
		</section>

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >WPS Office Mac版</a>
			</h3>
			<div class="desc">
				<p>文档在Mac上顺滑呈现<br>常用文件格式完美兼容<br>深色模式、左右分屏、Handoff</p>
			</div>
			<a class="btn btn-lg" href="https://www.npc.ink/15962.html" >立即下载</a>
			<a class="banner" href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >
				<img src="./img/hot02.jpg" alt="Npcink">
			</a>
		</section>

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >WPS Office 校园版</a>
			</h3>
			<div class="desc">
				<p>年轻 个性 创造<br>免费更全面 纯净更深入<br>协作办公 智慧校园</p>
			</div>
			<a class="btn btn-lg" href="https://www.npc.ink/15962.html" >立即下载</a>
			<a class="banner" href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >
				<img src="./img/hot03.jpg" alt="WPS Office 校园版">
			</a>
		</section>

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >金山PDF</a>
			</h3>
			<div class="desc">
				<p>轻巧简洁,非凡的阅读效果<br>高效转换,精准的格式互转<br>自由编辑,便捷的操作体验</p>
			</div>
			<a class="btn btn-lg" href="https://www.npc.ink/15962.html" >立即下载</a>
			<a class="banner" href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >
				<img src="./img/hot04.jpg" alt="Npcink">
			</a>
		</section>
	</div>
</div>


<style type="text/css">
.popular.desktop{padding:0;overflow:hidden;max-width:1210px;margin-top:20px}

.popular.desktop h2.title{
    margin:30px auto;
    height:45px;
    width:102px;
    background:url(./img/popular_download.72e9e826.svg) no-repeat;
	line-height: 200px;/*隐藏文本*/
    overflow:hidden
}
.popular.desktop .list{display:-ms-flexbox;display:flex;padding-left:10px}.popular.desktop .list .item{margin-right:10px;float:left;box-sizing:border-box;text-align:center;width:290px;height:auto;background-color:#f9f9f9;padding-top:26px;border-top-style:solid;border-top-width:2px}.popular.desktop .list .item h3{font-size:18px;margin:20px 0}.popular.desktop .list .item h3 a{color:#000;text-decoration:none}.popular.desktop .list .item .desc{height:84px;overflow:hidden;font-size:14px;color:#555;line-height:28px;padding:0 30px}.popular.desktop .list .item .desc p{margin:0}.popular.desktop .list .item .btn{width:160px;margin:24px 0 48px}.popular.desktop .list .item .banner{display:block;min-height:180px}.popular.desktop .list .item .banner img{width:100%;display:block}

.popular.desktop .item:first-child{border-top-color:#9fd7fd;margin-top: 16px;}

.popular.desktop .item:nth-child(2){border-top-color:#a0c6ff}
.popular.desktop .item:nth-child(3){border-top-color:#89d9c2}
.popular.desktop .item:nth-child(4){border-top-color:#f09c96}

.container{max-width:1190px;padding:0 10px;margin:0 auto}.ipo .notice .content .container{height:100%}

.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}header{font-family:Helvetica,PingFang SC,Microsoft YaHei,微软雅黑}
.btn-lg{font-size:16px;line-height:36px;height:36px}
.btn-transition{transition:background-color .3s linear}
.btn{background-color:#417ff9;border-radius:4px;color:#fff;box-sizing:border-box}
.btn:hover{background-color:#5696ff;transition:background-color .3s linear}
a.btn{text-decoration:none;display:inline-block;padding:0 15px}

</style>
<!--复制到此为止-->

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

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

</style>

</body>
</html>

 

 

自用

<!--复制开始-->



<div class="popular container desktop anchor">
	<h2 class="title">热门下载</h2>
	<div class="list clearfix">

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >秋叶资源网 源码专区</a>
			</h3>
			<div class="desc">
				<p>简单 创造不简单<br>个性化的源码资源<br>全面支持DIY</p>
			</div>
			<a class="btn btn-lg" href="https://www.qiuyegen.com/wzym" >立即下载</a>
			<a class="banner" href="https://www.qiuyegen.com/wzym" target="_blank" rel="noopener" >
				<img src="https://www.qiuyegen.com/wp-content/uploads/2020/05/2020052113452215.jpg" alt="秋叶资源网 源码专区">
			</a>
		</section>

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >秋叶资源网 主题专区</a>
			</h3>
			<div class="desc">
				<p>国内外游戏主题<br>流行主题,插件<br>全面支持DIY</p>
			</div>
			<a class="btn btn-lg" href="https://www.qiuyegen.com/wp/wpzt" >立即下载</a>
			<a class="banner" href="https://www.qiuyegen.com/wp/wpzt" target="_blank" rel="noopener" >
				<img src="https://www.qiuyegen.com/wp-content/uploads/2020/05/2020052113452270.jpg" alt="秋叶资源网 主题专区">
			</a>
		</section>

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >秋叶资源网 教程专区</a>
			</h3>
			<div class="desc">
				<p>年轻 个性 创造<br>免费更全面 纯净更深入<br>简单易懂 上手容易</p>
			</div>
			<a class="btn btn-lg" href="https://www.qiuyegen.com/wp/wpjc" >立即下载</a>
			<a class="banner" href="https://www.qiuyegen.com/wp/wpjc" target="_blank" rel="noopener" >
				<img src="https://www.qiuyegen.com/wp-content/uploads/2020/05/2020052113452251.jpg" alt="秋叶资源网 教程专区">
			</a>
		</section>

		<section class="item light-blue">
			<h3>
				<a href="https://www.npc.ink/15962.html" target="_blank" rel="noopener" >秋叶资源网 美化专区</a>
			</h3>
			<div class="desc">
				<p>轻巧简洁,非凡的阅读效果<br>高效转换,精准的格式互转<br>自由编辑,便捷的操作体验</p>
			</div>
			<a class="btn btn-lg" href="https://www.qiuyegen.com/b2" >立即下载</a>
			<a class="banner" href="https://www.qiuyegen.com/b2" target="_blank" rel="noopener" >
				<img src="https://www.qiuyegen.com/wp-content/uploads/2020/05/2020052113452353.jpg" alt="秋叶资源网 美化专区">
			</a>
		</section>
	</div>
</div>


<style type="text/css">
.popular.desktop{padding:0;overflow:hidden;max-width:1210px;margin-top:20px}

.popular.desktop h2.title{
    margin:30px auto;
    height:45px;
    width:102px;
    background:url(https://www.qiuyegen.com/wp-content/uploads/2020/05/2020052113445838.svg) no-repeat;
	line-height: 200px;/*隐藏文本*/
    overflow:hidden
}
.popular.desktop .list{display:-ms-flexbox;display:flex;padding-left:10px}.popular.desktop .list .item{margin-right:10px;float:left;box-sizing:border-box;text-align:center;width:400px;height:auto;background-color:#f9f9f9;padding-top:26px;border-top-style:solid;border-top-width:2px}.popular.desktop .list .item h3{font-size:18px;margin:20px 0}.popular.desktop .list .item h3 a{color:#000;text-decoration:none}.popular.desktop .list .item .desc{height:84px;overflow:hidden;font-size:14px;color:#555;line-height:28px;padding:0 30px}.popular.desktop .list .item .desc p{margin:0}.popular.desktop .list .item .btn{width:160px;margin:24px 0 48px}.popular.desktop .list .item .banner{display:block;min-height:180px}.popular.desktop .list .item .banner img{width:100%;display:block}

.popular.desktop .item:first-child{border-top-color:#9fd7fd;margin-top: 16px;}

.popular.desktop .item:nth-child(2){border-top-color:#a0c6ff}
.popular.desktop .item:nth-child(3){border-top-color:#89d9c2}
.popular.desktop .item:nth-child(4){border-top-color:#f09c96}

.container{max-width:1300px;padding:0 10px;margin:0 auto}.ipo .notice .content .container{height:100%}

.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}header{font-family:Helvetica,PingFang SC,Microsoft YaHei,微软雅黑}
.btn-lg{font-size:16px;line-height:36px;height:36px}
.btn-transition{transition:background-color .3s linear}
.btn{background-color:#417ff9;border-radius:4px;color:#fff;box-sizing:border-box}
.btn:hover{background-color:#5696ff;transition:background-color .3s linear}
a.btn{text-decoration:none;display:inline-block;padding:0 15px}

</style>
<!--复制到此为止-->

 

人已赞赏
B2美化

b2主题登录框二次美化开发

2020-5-21 10:29:41

B2美化

隐藏多余内容 - wordpress B2主题美化

2020-5-23 15:16:08

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