![【主题美化】Lightsns主题文章专题自定义html](https://img.vlogforum.com/imgs/2019/10/16309252499ad3.png)
因为是直接把我博客的页头样式拿来改造的,所以请忽略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>
原文地址:https://acglt.com/2124.html
暂无讨论,说说你的看法吧
暂无讨论,说说你的看法吧
暂无讨论,说说你的看法吧