主题美化】Lightsns主题文章专题自定义html,增加专题效果

为是直接把我博客的页头样式拿来改造的,所以请忽略class的命名  ,懒得重新命名了

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

好像不少人想要我站里的搜索样式,等有时间就一起分享出来好了

好像不少人想要我站里的搜索样式,等有时间就一起分享出来好了

<style>
#main {
margin-bottom: 40px;
}


#main li {
width: calc((100% - 120px)/5);
float: left;
margin: 0 0 20px 20px;
}


.page-header {
position: relative;
top: 0;
left: 0;
max-width: 200px;
height: 120px;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;
border-radius: 10px;
}
 
.page-header-content {
display: table-cell;
vertical-align: top;
position: relative;
width: 50%;
vertical-align: middle;
z-index: 4;
text-align: left;
}
.page-header-mask {
background: rgba(0, 0, 0, 0.25);
position: relative;
display: table;
vertical-align: middle;
width: 100%;
height: 120px;
border-radius: 10px;
}
 
.page-content-title {
font-size: 1.3rem;
font-weight: 400;
text-align: center;
color: #fff !important;
}
 
.page-content-title img {
height: 2.3rem;
position: relative;
top: 0.2rem;
}
style>
<div id="main">


<a href="#">
<li><div class="page-header" style="background-image:url(https://cnm666.oss-cn-hongkong.aliyuncs.com/2019/05/29/5cee0e7eb4fbd.jpg);"><div class="page-header-mask">
<div class="page-header-content">
<h2 class="page-content-title">情感h2>
div>
div>
div>
li>
a>


<a href="#">
<li><div class="page-header" style="background-image:url(https://cnm666.oss-cn-hongkong.aliyuncs.com/2019/07/24/5d386d02b8be1.jpg);"><div class="page-header-mask">
<div class="page-header-content">
<h2 class="page-content-title">热词h2>
div>
div>
div>
li>
a>
 
<a href="#">
<li><div class="page-header" style="background-image:url(https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/09/1df4574f8b0c93.jpg);"><div class="page-header-mask">
<div class="page-header-content">
<h2 class="page-content-title">插画收藏h2>
div>
div>
div>
li>
a>


<a href="#">
<li><div class="page-header" style="background-image:url(https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/06/frida-6.jpg);"><div class="page-header-mask">
<div class="page-header-content">
<h2 class="page-content-title">实用工具h2>
div>
div>
div>
li>
a>


<a href="#">
<li><div class="page-header" style="background-image:url(https://cnm666.oss-cn-hongkong.aliyuncs.com/b2/2019/06/frida-2.jpg);"><div class="page-header-mask">
<div class="page-header-content">
<h2 class="page-content-title">公众号h2>
div>
div>
div>
li>
a>


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

笨羊博客(张昊翔博客) » 主题美化】Lightsns主题文章专题自定义html,增加专题效果

发表评论