一款纯CSS的图文内容网格布局代码,每个图文内容对应不同的色彩样式和鼠标悬停样式,图标、文字等都可以自由修改。
页面的head部分,需远程调用图标样式库,并引入本地样式文件,代码如下:
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,用了多个div的嵌套结构,结构内容放入不同的图标和内容即可,代码如下:
<section>
<h3>秘密——吸引力法则</h3>
<div class="services-grid">
<div class="service service1">
<i class="ti-bar-chart"></i>
<h4>要求</h4>
<p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
<a href="#" class="cta">更多内容 <span class="ti-angle-right"></a>
</div>
<div class="service service2">
<i class="ti-light-bulb"></i>
<h4>信念</h4>
<p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
<a href="#" class="cta">更多内容 <span class="ti-angle-right"></a>
</div>
<div class="service service3">
<i class="ti-money"></i>
<h4>接受</h4>
<p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
<a href="#" class="cta">更多内容 <span class="ti-angle-right"></span></a>
</div>
</div>
</section>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791