最新公告
  • 欢迎您光临笨羊博客,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 上次分享了第一种,闲的没事又整一个,来分享给大家。

    老样子,直接上图好了,看下图:

    背景采用了渐变(请根据个人喜好修改),可与上次分享的自定义 / A 一同使用,一起使用的效果如上图。

    使用方法:后台 – 专题模块 – 文章/帖子专题 – 添加模块数据 – 自定义html – 直接丢进去 – 保存设置

    <style>
    .feature-content {
    	margin-top: 10px;
    	display: inline-block;
    	position: relative;
    }
     
    .top-feature {
    	width: 100%;
    	height: auto;
    	margin-bottom: 40px;
    }
     
    .top-feature img {
    	height: 180px;
    	width: 330px;
      border-radius: 4px;
    }
     
    .top-feature li {
    	width: calc((100% - 60px)/3);
    	float: left;
    	margin: 0 0 20px 20px;
    	position: relative;
    	display: block;
    }
     
    .feature-title span {
    	position: absolute;
    	width: 100%;
    	height: 180px;
    	text-align: center;
    	line-height: 180px;
    	background: linear-gradient(120deg, #e0c3fc 10%, #8ec5fc 100%) !important;
    	color: white;
    	font-size: 16px;
    	opacity: 0;
      border-radius: 4px;
    }
     
    .foverlay {
    	-moz-transition: opacity .5s ease-out;
    	-o-transition: opacity .5s ease-out;
    	-webkit-transition: opacity .5s ease-out;
    	transition: opacity .5s ease-out;
    }
     
    .top-feature li:hover .feature-title span {
    	opacity: 1;
    }
    </style>
    <div class="top-feature">
    	<h1 class="fes-title">¾Û½¹</h1>
    <div class="feature-content">
      
      <li class="feature-1">
    		<a href="#">
    			<div class="feature-title">
    			    <span class="foverlay">²âÊÔ/1</span>
    			</div>
    			    <img src="https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/09/1df4574f8b0c93.jpg">
    		</a>
    	</li>
    	
    	<li class="feature-1">
    		<a href="#">
    			<div class="feature-title">
    			    <span class="foverlay">²âÊÔ/2</span>
    			</div>
    			<img src="https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/06/frida-6.jpg">
    		</a>
    	</li>
    	
    	<li class="feature-1">
    		<a href="#">
    			<div class="feature-title">
    			    <span class="foverlay">²âÊÔ/3</span>
    			</div>
    			    <img src="https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/06/frida-2.jpg">
    		</a>
    	</li>
      
      </div>
    </div>

     

    张昊翔博客原创文章,作者:,如若转载,请注明出处:
    1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2、分享目的仅供大家学习和交流,请不要用于商业用途!
    3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    4、如有链接无法下载、失效或广告,请联系管理员处理!
    5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    笨羊博客(张昊翔博客) » 【主题美化】Lightsns主题文章专题自定义 / B

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台

    发表评论