【主题美化】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>

原文地址：https://acglt.com/2124.html