纯CSS的图文内容网格布局【原创

来源:https://www.sucaihuo.com/js/3017.html 2017-09-16 23:45浏览(1195) 收藏

一款纯CSS的图文内容网格布局代码,每个图文内容对应不同的色彩样式和鼠标悬停样式,图标、文字等都可以自由修改。
纯CSS的图文内容网格布局
分类:图片代码 > 图片文字 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
标签: 网格图文
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3017.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2