精致的图标信息引导区块 - wordpress区块

这一款图标信息引导卡片,很适合用在一些需要复杂的可视化展现信息的地方,例如主题介绍、产品特色等地方。这一次和大家分享这款卡片的用法

看过之前分享的“精彩的引导卡片”的站长应该知道,那款卡片的精致和舒适,这一次分享的是同一位作者制作的图标信息引导卡片,很适合用在一些需要复杂的可视化展现信息的地方,例如主题介绍、产品特色等地方。这一次和大家分享这款卡片及其用法。

原版:

精致的图标信息引导区块 - wordpress区块-Npcink

效果展示:

精致的图标信息引导区块 - wordpress区块-Npcink

需要注意的是,仅演示中有6列、3列显示异常,于网站中正常。

如何使用?

点击下方的Demo按钮,即可查看效果图,右击鼠标查看源代码,根据代码注释复制代码到自己需要的地方,一般是页面中,因为这款引导卡片很占宽度,推荐放到页面,当然,因为是自适应设计,理论上放到哪里都可以。,记得看代码注释哦(。・∀・)ノ

个性化

我想换背景色和文本颜色:

参考以下代码:

.theme-feature-container {
    background-color: burlywood;/*背景色*/
    color: rebeccapurple;/*文本色*/
}

需要注意的是,因为图标都是SVG格式,他们会和文本一起改变颜色/

我想换上自己喜欢的图标

细心的你一定观察到了图标排布的规律,核心是这一段:

		<li>
			<div class="item-box">
				<span class="icon">
					SVG图标
				</span>
				<h3>Icp备案</h3>
			</div>
		</li>

打开阿里巴巴矢量图标库,找到喜欢的图标,点击"下载图标",选择自己需要的大小(30),点击“复制SVG”。

精致的图标信息引导区块 - wordpress区块-Npcink

然后将代码粘贴到上面代码展示的"SVG图标"处即可。

如果还有疑问的话,欢迎到评论区留言交流。

文中提到的精彩引导卡片在这篇wordpress美化教程中:

精致的图标信息引导区块 - wordpress区块-Npcink
精致的图标信息引导区块 - wordpress区块-Npcink

精彩的引导卡片 - wordpress区块

简单却酷炫的优雅卡片,仅由HTML和CSS实现,无论是手机、平板还是计算机电脑, 她将始终舒适优美的展示给您的wordpress网站访客

这位作者开发的wordpress主题请看这里:

精致的图标信息引导区块 - wordpress区块-Npcink
精致的图标信息引导区块 - wordpress区块-Npcink

Muiteer - 简,极简,极具格调之简

这是一款前所未有的WordPress原创主题,它独一无二,追求分毫细节,适合特立独行的人,新颖的交互方式和简洁的视觉设计让您的站点提升到新的境界,在大同小异的

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
最后修改: 2020-05-20 11:28
WP区块

精彩的网站信息引导卡片 - wordpress区块

2020-4-5 15:55:10

WP区块

简单的三栏图片布局卡片 - wordpress区块

2020-4-18 23:36:21

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. 不错不错! ✗微笑✗

  2. 不错不错!

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索