所谓亮点功能,一般是用来介绍产品的优势、特色或功能等内容,并以模块的形式展示出来,页面看上去更为美观。之前在使用DUX主题时,用过此功能。网上关于添加亮点的功能,基本上也都是针对DUX主题的。
在这些教程中提到需要修改functions.php,也就是把相关的功能代码添加到functions.php文件中。不过实际测试下来,发现貌似有些问题,亮点功能并没有生效。
其实,使用纯css代码,就可以添加这项功能了,下面是我从QUX主题找到的代码:
/*---------------liangdian------------------*/ .liangdian{margin:0 -2% 10px 0 !important;padding:0;overflow:hidden;clear: both;}.liangdian li{float:left;position:relative;margin:0 2% 2% 0;width:31.33333%;padding:20px 20px;border-radius:2px;text-align:center;border:1px solid #eee;color:#aaa;font-size:12px;height:125px;overflow:hidden;line-height:1.6}.liangdian li::before{position:absolute;top:0;left:0;content:'';background-color:#eee;color:#bbb;line-height:1;padding:4px 5px;font-size:12px;border-radius:0 0 2px 0}.liangdian li:nth-child(1)::before{content:"亮点1"}.liangdian li:nth-child(2)::before{content:"亮点2"}.liangdian li:nth-child(3)::before{content:"亮点3"}.liangdian li:nth-child(4)::before{content:"亮点4"}.liangdian li:nth-child(5)::before{content:"亮点5"}.liangdian li:nth-child(6)::before{content:"亮点6"}.liangdian li:nth-child(7)::before{content:"亮点7"}.liangdian li:nth-child(8)::before{content:"亮点8"}.liangdian li:nth-child(9)::before{content:"亮点9"}.liangdian li:nth-child(10)::before{content:"亮点10"}.liangdian li:nth-child(11)::before{content:"亮点11"}.liangdian li:nth-child(12)::before{content:"亮点12"}.liangdian li:nth-child(13)::before{content:"亮点13"}.liangdian li:nth-child(14)::before{content:"亮点14"}.liangdian li:nth-child(15)::before{content:"亮点15"}.liangdian li:nth-child(16)::before{content:"亮点16"}.liangdian li:nth-child(17)::before{content:"亮点17"}.liangdian li:nth-child(18)::before{content:"亮点18"}.liangdian li:nth-child(19)::before{content:"亮点19"}.liangdian li:nth-child(20)::before{content:"亮点20"}.liangdian li:nth-child(21)::before{content:"亮点21"}.liangdian li:nth-child(22)::before{content:"亮点22"}.liangdian li:nth-child(23)::before{content:"亮点23"}.liangdian li:nth-child(24)::before{content:"亮点24"}.liangdian li:nth-child(25)::before{content:"亮点25"}.liangdian li:nth-child(26)::before{content:"亮点26"}.liangdian li:nth-child(27)::before{content:"亮点27"}.liangdian li:nth-child(28)::before{content:"亮点28"}.liangdian li:nth-child(29)::before{content:"亮点29"}.liangdian li:nth-child(30)::before{content:"亮点30"}.liangdian li:nth-child(31)::before{content:"亮点31"}.liangdian li:nth-child(32)::before{content:"亮点32"}.liangdian li:nth-child(33)::before{content:"亮点33"}.liangdian li:nth-child(34)::before{content:"亮点34"}.liangdian li:nth-child(35)::before{content:"亮点35"}.liangdian li:nth-child(36)::before{content:"亮点36"}.liangdian li:nth-child(37)::before{content:"亮点37"}.liangdian li:nth-child(38)::before{content:"亮点38"}.liangdian li:nth-child(39)::before{content:"亮点39"}.liangdian li:nth-child(40)::before{content:"亮点40"}.liangdian li:nth-child(41)::before{content:"亮点41"}.liangdian li:nth-child(42)::before{content:"亮点42"}.liangdian li:nth-child(43)::before{content:"亮点43"}.liangdian li:nth-child(44)::before{content:"亮点44"}.liangdian li:nth-child(45)::before{content:"亮点45"}.liangdian li:nth-child(46)::before{content:"亮点46"}.liangdian li:nth-child(47)::before{content:"亮点47"}.liangdian li:nth-child(48)::before{content:"亮点48"}.liangdian li:nth-child(49)::before{content:"亮点49"}.liangdian li:nth-child(50)::before{content:"亮点50"}.liangdian li:nth-child(51)::before{content:"亮点51"}.liangdian li:nth-child(52)::before{content:"亮点52"}.liangdian li:nth-child(53)::before{content:"亮点53"}.liangdian li:nth-child(54)::before{content:"亮点54"}.liangdian li:nth-child(55)::before{content:"亮点55"}.liangdian li:nth-child(56)::before{content:"亮点56"}.liangdian li:nth-child(57)::before{content:"亮点57"}.liangdian li:nth-child(58)::before{content:"亮点58"}.liangdian li:nth-child(59)::before{content:"亮点59"}.liangdian li:nth-child(60)::before{content:"亮点60"}.liangdian li::after{position:absolute;bottom:0;left:0;right:0;height:16px;content:'';background-color:#fff}.liangdian li:hover{border-color:#0ae}.liangdian li:hover::before{background-color:#0ae;color:#fff}.liangdian strong{display:block;font-size:15px;font-weight:bold;margin-bottom:5px;color:#555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (max-width: 768px){.liangdian li{width:48%}}@media (max-width: 544px){.liangdian{margin:0 -2% 20px 0 !important}.liangdian li{height:102px;padding:18px 10px;line-height:1.4;font-size:11px}.liangdian li::before{font-size:10px;padding:4px;height:16px}.liangdian strong{font-size:12px}}
只是,在Modown主题中直接用上边的代码,会导致亮点模块下方的几行内容被隐藏或内容错位。而且,还有其他一些问题:
1、字号较小,字体颜色太浅,不方便阅读内容(如上图);
2、介绍内容文字一旦过多,超出的内容会被遮挡上,无法查看;
因此,我们在此基础上进一步优化了代码,修复了在Modown主题的文章中,内容被隐藏或错位的问题。并调整了显示文字的大小和颜色,同时增加了滚动条可以显示所有内容。具体效果可到下方地址查看:
大前端阿里百秀主题 XIU v7.9 无后门完美破解限制版免费下载 2023-05-31
最终代码如下:
//liangdian .article-content p { overflow: hidden; } .article-content .liangdian { margin: 0 -2% 10px 0 !important; padding: 0; overflow: hidden; clear: both; } .article-content .liangdian li { float: left; position: relative; margin: 0 2% 2% 0; width: 31.33333%; padding: 20px 20px; border-radius: 2px; text-align: center; border: 2px solid #f5f5f5; color: #333; font-size: 14px; height: 125px; overflow: auto; line-height: 1.6; } .article-content .liangdian li::before { position: absolute; top: 0; left: 0; content: ''; background-color: #f5f5f5; color: #555; line-height: 1; padding: 4px 5px; font-size: 14px; border-radius: 0 0 2px 0; } .article-content .liangdian li:nth-child(1)::before {content: "1"} .article-content .liangdian li:nth-child(2)::before {content: "2"} .article-content .liangdian li:nth-child(3)::before {content: "3"} .article-content .liangdian li:nth-child(4)::before {content: "4"} .article-content .liangdian li:nth-child(5)::before {content: "5"} .article-content .liangdian li:nth-child(6)::before {content: "6"} .article-content .liangdian li:nth-child(7)::before {content: "7"} .article-content .liangdian li:nth-child(8)::before {content: "8"} .article-content .liangdian li:nth-child(9)::before {content: "9"} .article-content .liangdian li:nth-child(10)::before {content: "10"} .article-content .liangdian li:nth-child(11)::before {content: "11"} .article-content .liangdian li:nth-child(12)::before {content: "12"} .article-content .liangdian li:nth-child(13)::before {content: "13"} .article-content .liangdian li:nth-child(14)::before {content: "14"} .article-content .liangdian li:nth-child(15)::before {content: "15"} .article-content .liangdian li:nth-child(16)::before {content: "16"} .article-content .liangdian li:nth-child(17)::before {content: "17"} .article-content .liangdian li:nth-child(18)::before {content: "18"} .article-content .liangdian li:nth-child(19)::before {content: "19"} .article-content .liangdian li:nth-child(20)::before {content: "20"} .article-content .liangdian li:nth-child(21)::before {content: "21"} .article-content .liangdian li:nth-child(22)::before {content: "22"} .article-content .liangdian li:nth-child(23)::before {content: "23"} .article-content .liangdian li:nth-child(24)::before {content: "24"} .article-content .liangdian li:nth-child(25)::before {content: "25"} .article-content .liangdian li:nth-child(26)::before {content: "26"} .article-content .liangdian li:nth-child(27)::before {content: "27"} .article-content .liangdian li:nth-child(28)::before {content: "28"} .article-content .liangdian li:nth-child(29)::before {content: "29"} .article-content .liangdian li:nth-child(30)::before {content: "30"} .article-content .liangdian li:nth-child(31)::before {content: "31"} .article-content .liangdian li:nth-child(32)::before {content: "32"} .article-content .liangdian li:nth-child(33)::before {content: "33"} .article-content .liangdian li:nth-child(34)::before {content: "34"} .article-content .liangdian li:nth-child(35)::before {content: "35"} .article-content .liangdian li:nth-child(36)::before {content: "36"} .article-content .liangdian li::after { background-color: #fff; } .article-content .liangdian li:hover { border-color: #0ae; } .article-content .liangdian li:hover::before { background-color: #0ae; color: #fff; } .article-content .liangdian strong { display: block; font-size: 15px; font-weight: bold; margin-bottom: 5px; color: #444; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 768px) { .article-content .liangdian li { width: 48%; } } @media (max-width: 544px) { .article-content .liangdian { margin: 0 -2% 20px 0 !important; } .article-content .liangdian li { height: 102px; padding: 18px 10px; line-height: 1.4; font-size: 11px; } .article-content .liangdian li::before { font-size: 14px; padding: 2px 4px; height: 16px; } .article-content .liangdian strong { font-size: 14px; } }
内容已被隐藏
微信扫码或搜索“小白书签”关注公众号,发送“口令”获得提取码,然后返回此网页提交!
document.addEventListener(“DOMContentLoaded”, function() {
const submitButton = document.getElementById(“submit_btn_secret_content_67ab7452028fb”);
const passwordBox = document.getElementById(“pwbox_secret_content_67ab7452028fb”);
submitButton.addEventListener(“click”, () => {
const key = “1230”;
if (passwordBox.value === key) {
document.getElementById(“secret_content_67ab7452028fb”).style.display = “block”;
passwordBox.closest(“.gzhhide”).style.display = “none”;
} else {
alert(“密码错误,请重试。”);
passwordBox.value = “”;
}
});
passwordBox.addEventListener(“keypress”, (event) => {
if (event.key === “Enter”) {
event.preventDefault();
submitButton.click();
}
});
});
暂无评论内容