子比主题添加绿色标题和分隔线效果,适合企业网站部分模块

绿色标题和描述的容器效果,用于首页作为一些小组件的标题挺不错的。

使用方法:外观-小工具-自定义HTML,复制进去就可以了。具体哪里看自己需要。CSS压缩了,看不懂的话就可以把CSS格式化回来。

<div class="emoji-container">
    <div class="emoji-title">NEW</div>
    <div class="emoji-separator emoji-sub emoji-sm">鹿泽笔记</div>
</div>

<style>
    .emoji-container{display:flex;flex-direction:column;align-items:center;text-align:center}
    .emoji-separator:before,.emoji-separator:after{content:"";background:#777;flex:1;height:1px;margin:0 10px;max-width:16%}
    .emoji-separator{display:flex;align-items:center;justify-content:center;width:100%}
    .emoji-sub{color:#8c92a1!important}
    .emoji-sm{font-size:14px}
    .emoji-title{font-size:24px;font-weight:bold;color:green}
</style>

正常来说,可以更换成任意的颜色的。

CSS格式化效果:

<div class="emoji-container">
    <div class="emoji-title">NEW</div>
    <div class="emoji-separator emoji-sub emoji-sm">鹿泽笔记</div>
</div>

<style>
    .emoji-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center
}

.emoji-separator:before,.emoji-separator:after {
	content: "";
	background: #777;
	flex: 1;
	height: 1px;
	margin: 0 10px;
	max-width: 16%
}

.emoji-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%
}

.emoji-sub {
	color: #8c92a1!important
}

.emoji-sm {
	font-size: 14px
}

.emoji-title {
	font-size: 24px;
	font-weight: bold;
	color: green
}
</style>

👋 感谢您的观看!

© 版权声明
THE END
喜欢就支持一下吧
点赞1 分享