效果展示
![[7B2主题美化]首页动态搜索模块(超级改良版)](/wp-content/uploads/2025/10/01/d0e9b3a94e9b5bd45ba1b549639a1216.webp)
具体效果可以在电脑端看我的网站主页：https://www.aioscn.com/
美化教程
第一步：在后台>>B2主题设置>>常规设置>>头部HTML标签 添加代码：
那个背景的动态视频大家可以上传到自己服务器去引用。这里是引入阿里矢量图标，如果链接失效后请自行修改自己想要的图标。
<link rel=\"stylesheet\" type=\"text/css\" href=\"//at.alicdn.com/t/font_3290918_bwveur0fle.css\" />
<script src=\"//at.alicdn.com/t/font_3290918_bwveur0fle.js\"></script>如下面这个图片所示
![[7B2主题美化]首页动态搜索模块(超级改良版)](/wp-content/uploads/2025/10/01/bdfa0a1faa9c29264760bdfb9b38e55a.webp)
第二步：后台>>B2主题设置>>模块管理>>首页>>添加自定义模块>>放入以下代码
[付费阅读]隐藏内容 – 管理员可见
<!--首页视频区块-->
<div id=\"page-wrapper\">
<div class=\"home-banner por\">
<section class=\"section\">
<div class=\"video-wrapper\">
<video poster=\"https://img.alicdn.com/imgextra/i3/2076639522/O1CN01YKrVDB2KD8MG3oOP7_!!2076639522.jpg\" autoplay playsinline=\"\" loop muted=\"\" src=\"https://7203-1307983292.cos.ap-nanjing.myqcloud.com/djblog/toubusp.webm\" __idm_id__=\"2285569\"></video>
</div>
<div class=\"video-overlay\"></div>
</section>
<div class=\"layout-center poa\" style=\"width: 1200px;top: 0;left: 50%;margin-left: -600px;\">
<div class=\"home-banner-content clearfix\">
<div class=\"slogan-text por fl\">
<p>
Hi,欢迎访问清源极客</p>
<i class=\"iblock poa corner\"></i>
<p class=\"promote-sub-title line-one\">开通<span style=\"display: inline-block;overflow: hidden;line-height: 34px;vertical-align: -9px;\">
<em id=\"goal-works\" value=\"5351266\">
<ps style=\"color: #fff;\">VIP<ps>
</em>
</span>免费下载全站内容 </p>
</div>
</div>
<div class=\"home-banner-search por searchv2-top-m\">
<div class=\"primary-menus\" style=\" width: 92%; position: unset;transform: translate(1px, 1px);\">
<div class=\"search-types-cycles poa\">
<ul class=\"selects\">
<li data-target=\"search_1\">百度 </li>
<li data-target=\"search_2\">Bing </li>
<li data-target=\"search_3\" class=\"current\">站内搜索 </li>
<li data-target=\"search_4\">360 </li>
<li data-target=\"search_5\">谷歌 </li>
<li data-target=\"search_6\">搜狗 </li>
<li data-target=\"search_8\">知乎 </li>
</ul>
</div>
<div class=\"cont\">
<div class=\"left-cont\">
<form class=\"search hidden\" id=\"search_1\" action=\"https://www.baidu.com/s?wd=\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"wd\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">百度搜索</button>
</form>
<form class=\"search hidden\" id=\"search_2\" action=\"https://cn.bing.com/search?q=\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"q\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">Bing搜索</button>
</form>
<form class=\"search\" id=\"search_3\" action=\"/?s=\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"s\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">站内搜索</button>
</form>
<form class=\"search hidden\" id=\"search_4\" action=\"https://www.so.com/s?q=\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"query\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">360搜索</button>
</form>
<form class=\"search hidden\" id=\"search_5\" action=\"https://www.google.com/search?q=\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"query\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">谷歌</button>
</form>
<form class=\"search hidden\" id=\"search_6\" action=\"https://www.sogou.com/web\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"query\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">搜狗</button>
</form>
<form class=\"search hidden\" id=\"search_8\" action=\"https://www.zhihu.com/search?q=\" method=\"get\" target=\"_blank\">
<input type=\"text\" name=\"q\" class=\"s\" placeholder=\"请输入关键词\">
<button type=\"submit\" name=\"\" class=\"btn\">知乎</button>
</form>
<a class=\"hot-top text-notify\" href=\"/jc\" target=\"_blank\" tips=\"教程分享\" direction=\"bottom\">
<img src=\"https://js.vmccc.com/wp-content/uploads/2024120119490177.svg\" class=\"icon-rank\" height=\"15\"> 教程分享</a>
</div>
</div>
</div>
<p class=\"home-banner-links line-one\">热搜词：<a href=\"/?s=虚拟机\" target=\"_blank\" class=\"iblock\">虚拟机</a>
<a href=\"/?s=7B2主题美化\" target=\"_blank\" class=\"iblock\">7B2主题美化</a>
<a href=\"/?s=系统\" target=\"_blank\" class=\"iblock\">系统</a>
<a href=\"/?s=源码\" target=\"_blank\" class=\"iblock\">源码</a>
</p>
<style>
p.home-banner-linkss.line-one1 { width: 80%; font-size: 14px; height: 1px; line-height: 20px; color: #fff; text-shadow: 0 2px 4px rgb(0 0 0 / 27%); margin-top: 40px; text-align: center; }
</style>
<p class=\"home-banner-linkss line-one1\">
<!-- 网站统计信息 -->
<div id=\"site-stats\" style=\"font-family: Arial, sans-serif; border-radius: 8px; text-align: center;\">
<p style=\"font-size: 14px; color: #fff;\">
文章总数：
<span style=\"color: #fff; font-weight: bold;\">
<?php echo wp_count_posts()->publish; // 获取已发布文章数量 ?>
</span>
运行天数：
<span style=\"color: #fff; font-weight: bold;\">
<?php
$start_date = strtotime(\'2024-11-18\'); // 替换为您网站的开始日期
$current_date = time();
$days_running = floor(($current_date - $start_date) / (60 * 60 * 24));
echo $days_running . \' 天\';
?>
</span>
用户总数：
<span style=\"color: #fff; font-weight: bold;\">
<?php
$user_count = count_users(); // 获取用户统计信息
echo $user_count[\'total_users\'] . \' 用户\';
?>
</span>
评论总数：
<span style=\"color: #fff; font-weight: bold;\">
<?php
$comments_count = wp_count_comments(); // 获取评论统计信息
echo $comments_count->total_comments . \' 条\';
?>
</span>
</p>
</div>
</p>
</div>
</div> <!-- 头部快速链接导航 -->
<div class=\"top-navs poa\">
<div class=\"layout-center clearfix\" style=\"width: 1200px;\">
<div class=\"top-navs-l fl\">
<div class=\"top-navs-l-item fl\">
<p class=\"top-navs-l-title\">
<a href=\"/cnjz/jzzn\" target=\"_blank\" class=\"block\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-zixun1\"></use>
</svg> <!-- <img src=\"//js.shipin520.com/pc/images/home/ae.png\" alt=\"虚拟机\"> --> 虚拟机
</a>
</p>
<p class=\"top-navs-l-links\">
<a href=\"/?s=vm\" class=\"fl\" target=\"_blank\">问题解决</a>
<a href=\"/961.html\" class=\"fl\" target=\"_blank\">去虚拟化</a>
</p>
</div>
<div class=\"top-navs-l-item fl\">
<p class=\"top-navs-l-title\">
<a href=\"/cnjz/chajian\" target=\"_blank\" class=\"block\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-huodong\"></use>
</svg> <!-- <img src=\"//js.shipin520.com/pc/images/home/pr.png\" alt=\"Pr模板\"> --> 系统下载
</a>
</p>
<p class=\"top-navs-l-links\">
<a href=\"/169.html\" class=\"fl\" target=\"_blank\">多开专用</a>
<a href=\"/os/win/10\" class=\"fl\" target=\"_blank\">WIN10</a>
</p>
</div>
<div class=\"top-navs-l-item fl\">
<p class=\"top-navs-l-title\">
<a href=\"/sygj\" target=\"_blank\" class=\"block\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-gongwenbao\"></use>
</svg>
软件仓库</a></p>
<p class=\"top-navs-l-links\">
<a href=\"/sygj\" class=\"fl\" target=\"_blank\">实用工具</a>
<a href=\"/llq\" class=\"fl\" target=\"_blank\">浏览器</a>
</p>
</div>
<div class=\"top-navs-l-item fl\">
<p class=\"top-navs-l-title\">
<a href=\"/wp\" target=\"_blank\" class=\"block\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-chakansousuo\"></use>
</svg>WordPress
</a>
</p>
<p class=\"top-navs-l-links\">
<a href=\"/tag/7b2\" class=\"fl\" target=\"_blank\">7B2美化</a>
<a href=\"/wp/wpcj\" class=\"fl\" target=\"_blank\">插件</a>
</p>
</div>
<div class=\"top-navs-l-item fl\">
<p class=\"top-navs-l-title\">
<a href=\"/links\" target=\"_blank\" class=\"block\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-dingwei\"></use>
</svg>合作伙伴
</a>
</p>
<p class=\"top-navs-l-links\">
<a href=\"/gy/gghz\" class=\"fl\" target=\"_blank\">广告投放</a>
<a href=\"/links\" class=\"fl\" target=\"_blank\">友情链接</a></p>
</div>
</div>
<div class=\"top-navs-m fl\">
<a href=\"/mission/today\" target=\"_blank\" class=\"fl\">签到</a>
<a href=\"/gold-top\" target=\"_blank\" class=\"fl\">排行榜</a>
<a href=\"/task\" target=\"_blank\" class=\"fl\">做任务</a>
<a href=\"/requests\" target=\"_blank\" class=\"fl\">提交工单</a>
</div>
<div class=\"top-navs-r fl clearfix\">
<a class=\"fl\" rel=\"nofollow\" target=\"_blank\" href=\"/verify\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-yonghu\"></use>
</svg>
<p>高级认证</p>
</a>
<a class=\"fl\" target=\"_blank\" href=\"/vips\">
<svg class=\"icon-dhs\" aria-hidden=\"true\">
<use xlink:href=\"#hg-huiyuan\"></use>
</svg>
<p>会员办卡</p>
</a>
</div>
</div>
</div>
</div>
</div>
<div style=\"margin-top: -10px;\" class=\"b2-widget-post-title\"> <!-- 调整距离 --></div>
<script>
(function($) {
var m = $(\'.primary-menus\');
if (m.length < 1) return;
var ul = m.find(\'.selects\');
if (ul.length < 1) return;
var lis = ul.children(\'li\');
if (lis.length < 1) return;
var s = m.find(\'.search\');
var input = s.find(\'.s\'); // 获取搜索框的输入元素
var defaultValue = input.attr(\'placeholder\'); // 获取默认提示语（例如 \"请输入关键词\"）
// 检查 localStorage 中是否保存了用户的选择
var savedSearchType = localStorage.getItem(\'selectedSearchType\');
if (savedSearchType) {
// 如果有保存的选择，恢复选中项并显示相应的搜索表单
lis.removeClass(\'current\');
lis.filter(\'[data-target=\"\' + savedSearchType + \'\"]\').addClass(\'current\');
s.addClass(\'hidden\');
s.filter(\'#\' + savedSearchType).removeClass(\'hidden\');
}
lis.on(\'click\', function() {
var d = $(this).attr(\'data-target\');
if (d) {
lis.removeClass(\'current\');
$(this).addClass(\'current\');
s.addClass(\'hidden\');
s.filter(\'#\' + d).removeClass(\'hidden\');
s.filter(\'#\' + d).find(\'.s\').trigger(\'focusin\');
// 保存用户选择到 localStorage
localStorage.setItem(\'selectedSearchType\', d);
// 点击不同的搜索引擎时，保持输入框内容不变
var currentInputValue = input.val(); // 获取当前输入框的值
input.val(currentInputValue); // 保持当前输入框的内容
}
});
input.on(\'focusin\', function() {
// 如果当前值为默认值（提示语），则清空输入框
if ($(this).val() === defaultValue) {
$(this).val(\'\');
}
});
input.on(\'focusout\', function() {
// 如果输入框为空，恢复为默认提示语
if ($(this).val() === \'\') {
$(this).val(defaultValue);
}
});
})(jQuery);
</script>
<!-- 动态背景搜索html代码结束 -->上面这些代码放入自定义HTML里面
后台设置方法：关闭小工具，可见性就选桌面吧（电脑端）可见，这个模块太大了！手机也显示不好。宽度选：铺满窗口
![[7B2主题美化]首页动态搜索模块(超级改良版)](/wp-content/uploads/2025/10/01/f7196af6090a6d54daf049bee5d062ed.webp)
第三步：在主题目录b2/Assets/fontend/style.css 这个文件里面加上以下代码：
[付费阅读]隐藏内容 – 管理员可见
/*首页动态视频开始 */
@media screen and (max-width: 768px){
.home-banner:after{
backdrop-filter: blur(0px)!important;
}
.home-banner .corner{
display:none;
}
.home-banner-links{
width:100%!important;
}
.home-banner-content .slogan-text p {
font-weight: 400!important;
font-size: 16px!important;
line-height: 24px!important;
letter-spacing: 3px!important;
text-shadow: 0 2px 4px rgb(0 0 0 / 25%);
margin-bottom: 0px!important;
}
.home-banner-content,.slogan-text.por.fl{
margin-left: 40px!important;
margin-bottom:10px!important;
}
.home-banner .search-types-cycles,.home-banner-linkss{
display:none;
}
.layout-center{
width:100%!important;
margin-left:0px!important;
left:0px!important;
}
.primary-menus{
width:100%!important;
}
.html-box {
width: 100%!important;
}
.top-navs{
display:none;
}
.home-banner .section {
position: relative;
width: 100%;
overflow: hidden;
max-height: 400px!important;
height: 100vh;
}
.home-banner{
height:400px!important;
width:100%!important;
}
.home-banner-search {
width: 90%!important;
margin-left: 10px!important;
}
.home-banner-search form {
margin-left: 10px;
width: 90%;
}
}
#page-wrapper {
min-height:100%;
margin-top:-16px
}
.home-banner {
height:600px;
position:relative;
z-index:1;
background-position:0 100%;
animation:gradient 12s ease-in-out infinite;
margin-bottom:20px;
}
.home-banner .section {
position:relative;
width:100%;
overflow:hidden;
max-height:600px;
height:100vh
}
.home-banner .section .video-wrapper {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
position:absolute;
overflow:hidden;
z-index:0
}
.home-banner .section .video-wrapper video {
visibility:visible;
pointer-events:none;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:100%;
width:100%;
object-fit:cover
}
.home-banner .section .video-overlay {
height:100%;
width:100%;
top:0;
left:0;
position:absolute;
background:rgba(45,47,54,.15)
}
.home-banner .corner {
width: 28px;
height: 21px;
border-radius: 4px;
left: 340px;
top: 10px;
}
.home-banner .home-menus {
margin-left:70px
}
.home-banner .home-menus .cus-dropbox-trigger a,.home-banner .home-menus>a {
color:#fff;
font-size:14px;
margin-right:20px;
line-height:60px
}
.home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus>a:hover {
color:#21cec0
}
.home-banner>.layout-center {
height:100%
}
.home-banner-content {
padding-top:150px;
margin-left:182px;
margin-bottom:22px
}
.home-banner-content .slogan-text p {
font-size:18px;
line-height:24px;
letter-spacing:6px;
color:#fff
}
.home-banner-content .slogan-text p:nth-of-type(1) {
font-weight:600;
font-size:38px;
line-height:46px;
letter-spacing:6px;
text-shadow:0 2px 4px rgba(0,0,0,.25);
margin-bottom:10px
}
.home-banner-search {
width:800px;
margin-left:209px;
height:auto
}
.home-banner-search form {
margin-bottom:10px
}
.home-banner-search form>input {
width:100%;
height:48px;
background:#fff;
border-radius:8px 0 0 8px;
border:none;
padding:18px 22px;
font-size:14px;
color:#333
}
.home-banner-search form>input::placeholder {
color:#979797
}
.home-banner-search .hot-top {
position:absolute;
top:13px;
right:115px;
font-size:13px
}
.home-banner-search .hot-top i {
margin-right:4px
}
.home-banner-search .hot-words-container,.home-banner-search .rec-words-container {
width:100%;
top:56px
}
.home-banner-links {
width:80%;
font-size:14px;
height:20px;
line-height:20px;
color:#fff;
text-shadow:0 2px 4px rgba(0,0,0,.27)
}
.home-banner-links a {
margin-right:19px;
color:inherit
}
.home-banner-links a:hover {
color:#35eee3
}
.home-banner .search-types-cycles {
width:106px;
height:290px;
background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(53,238,227,.1445) 51.04%,rgba(0,0,0,0) 100%);
left:630px;
top:-121px;
text-align:center;
z-index:-1
}
.home-banner .search-types-cycles .search-types-btn {
width:100%;
height:20px;
line-height:20px;
cursor:pointer;
user-select:none;
left:0;
bottom:-20px;
z-index:1
}
.home-banner .search-types-cycles .search-types-btn i {
color:#fff;
font-size:12px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) {
bottom:auto;
top:-20px
}
.home-banner .search-types-cycles .search-types-btn:nth-of-type(1) i {
transform:rotate(180deg)
}
.home-banner .search-types-cycles .search-types-btn:hover i {
color:#35eee3
}
.home-banner .search-types-cycles ul {
width:100%;
height:100%;
padding-top:5px
}
.home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before {
content:\'\';
width:1px;
height:100%;
display:block;
position:absolute;
left:0;
top:0;
background:linear-gradient(0,transparent 0,#0a36fa 50%,transparent 100%)
}
.home-banner .search-types-cycles ul:after {
left:auto;
right:0
}
.home-banner .search-types-cycles ul li {
height:40px !important;
line-height:40px !important;
font-size:16px;
color:rgba(255,255,255,.6);
text-align:center;
cursor:pointer;
user-select:none
}
.layout-center {
width:1200px;
margin:0 auto
}
.slogan-text.por.fl {
margin-left: 200px;
text-align: center;
}
.iblock {
display:inline-block;
color:#ffffff!important;
}
.block {
display:block
}
.line-one {
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden
}
.line-two {
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical
}
.line-three {
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical
}
.primary-menus .left-cont button {
height:48px;
box-sizing:border-box;
min-width:100px;
margin-left:-5px;
cursor:pointer;
background-color:#0a36fa;
color:#fff;
font-size:15px;
line-height:40px;
position:absolute;
right:0;
top:0;
border:1px solid #0a36fa;
border-radius:1px;
padding:0 15px;
width:106px;
transform:translateY(0px);
}
.home-banner .search-types-cycles ul li:hover {
color:#0a36fa
}
.home-banner .search-types-cycles ul li:nth-of-type(4) {
height:80px;
line-height:80px
}
.home-banner .search-types-cycles ul li a {
color:rgba(255,255,255,.8);
transition:none
}
.home-banner .search-types-cycles ul li a:hover {
color:#35eee3
}
.home-banner .search-types-cycles button:hover {
background:#46dacf !important;
opacity:1;
transition:opacity .2s
}
.home-banner .search-types-cycles button i {
font-size:18px;
color:#fff;
margin-right:6px
}
.home-banner .search-types-cycles button span {
font-size:16px;
color:#fff
}
.home-banner:after {
content:\'\';
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
background:linear-gradient(180deg,#282a30ab 0,rgba(0,0,0,0) 100%);
transform:rotate(-180deg);
z-index:0;
backdrop-filter: blur(10px);
}
.home-banner-search>form>button {
box-sizing:border-box;
min-width:100px;
transform:translateY(0px);
font-size:15px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
position:absolute;
right:1px;
top:0;
z-index:1;
border:1px solid #23d1c3;
padding:0 15px;
width:147px;
height:56px;
background:linear-gradient(90deg,#35eee3 0,#21cec0 100%);
border-radius:0 8px 8px px 0;
right:0;
text-align:center;
padding-left:25px;
margin-right:-7px;
border-bottom-left-radius:1px;
border-top-left-radius:1px
}
.home-banner-search .search.hidden {
display:none
}
a.hot-top.text-notify:hover {
color:#26d6c8
}
.por {
position:relative
}
.poa {
position:absolute
}
.pof {
position:fixed
}
.clearfix:after {
content:\'\';
clear:both;
display:block;
height:0;
visibility:hidden;
font-size:0;
line-height:0
}
.fl {
float:left
}
.fr {
float:right
}
.ovh {
overflow:hidden
}
.hide {
display:none
}
.nb-icon-wrap {
right:-9999px!important
}
.icon-rank {
width:auto;
display:inline-block;
border:none;
overflow:hidden;
vertical-align:-3px
}
img.icon-rank {
width:20px;
height:20px;
}
.icon-dhs {
width:2em;
height:2em;
margin-bottom: -10px;
}
p.top-navs-l-title {
margin-bottom:8px
}
.top-navs {
width:100%;
height:70px;
bottom:28px;
left:0;
padding:12px 0;
z-index:1;
}
.top-navs .top-navs-l {
width:850px;
display:flex;
justify-content:center;
align-items:center;
margin:0 -10px;
border-right:1px solid rgba(255,255,255,.25)
}
.top-navs .top-navs-l-item {
width:100%;
margin:0 18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
.top-navs .top-navs-l-item .top-navs-l-title a {
font-weight:600;
font-size:17px;
line-height:25px;
height:25px;
margin-bottom:12px;
color:#fff;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-title a i {
font-size:34px;
margin-right:8px;
vertical-align:-4px
}
.top-navs .top-navs-l-item .top-navs-l-title a img {
float:left;
width:34px;
height:34px;
margin-right:8px;
vertical-align:-4px
}
.top-navs .top-navs-l-item .top-navs-l-title a:hover {
color:#21cec0
}
.top-navs .top-navs-l-item .top-navs-l-links {
font-size:14px;
line-height:20px;
display:flex;
justify-content:space-around;
margin:0 -10px
}
.top-navs .top-navs-l-item .top-navs-l-links a {
color:#b5b5b5;
margin:0 10px;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-l-item .top-navs-l-links a:hover {
color:#21cec0
}
.top-navs .top-navs-m {
width:176px;
height:61px;
border-right:1px solid rgba(255,255,255,.25);
padding:0 24px;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
align-items:center
}
.top-navs .top-navs-m a,.top-navs .top-navs-m p,.top-navs .top-navs-m>div {
width:50%;
text-align:center;
color:#fff;
font-size:14px;
line-height:20px;
cursor:pointer;
user-select:none;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-m a:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover {
color:#21cec0
}
.top-navs .top-navs-m div p,.top-navs .top-navs-m>a {
margin-bottom:20px
}
.top-navs .top-navs-m div p {
width:100%;
margin-bottom:0;
margin-top:-20px
}
.top-navs .top-navs-m .top-navs-m-box {
top:-16px;
left:-72px;
width:157px;
height:66px;
background:#444;
border-radius:8px;
padding:8px 14px 0;
display:none;
margin-top:-70px
}
.top-navs .top-navs-m .top-navs-m-box a {
margin-bottom:9px
}
.top-navs .top-navs-m .top-navs-m-box a:hover {
color:#21cec0
}
.top-navs .top-navs-r {
width:176px
}
.top-navs .top-navs-r a {
width:50%;
padding-left:30px;
text-align:center;
line-height:34px
}
.top-navs .top-navs-r a i {
font-size:36px;
margin-bottom:10px
}
.top-navs .top-navs-r a p {
font-size:14px;
line-height:20px;
color:#b5b5b5;
text-shadow:1px 1px 1px #000
}
.top-navs .top-navs-r a p:hover {
color:#21cec0
}
.popular-area {
margin-bottom:60px
}
.popular-area-top {
height:34px;
margin-bottom:22px
}
.popular-area-top-title {
height:34px;
line-height:34px;
font-weight:600;
font-size:24px;
color:#4a4a4a;
margin-right:94px
}
.popular-area-top-title span {
height:inherit;
font-size:18px;
font-weight:100;
color:#979797;
margin-left:24px;
vertical-align:3px;
line-height:34px
}
.popular-area-top .popular-area-nav {
width:116px;
height:34px;
padding-top:3px
}
.popular-area-top .popular-area-nav button {
width:28px;
height:28px;
background:0 0;
border-radius:4px;
text-align:center;
line-height:28px;
cursor:pointer;
transition:all .2s;
top:3px;
right:0
}
.popular-area-top .popular-area-nav button i {
color:#00d1c1;
font-size:12px
}
.popular-area-top .popular-area-nav button:hover {
background:#e1fffd
}
.popular-area-top .popular-area-nav button:nth-of-type(1) {
right:auto;
left:0
}
.popular-area-top .popular-area-nav p {
width:60px;
height:28px;
margin:0 auto;
line-height:28px;
text-align:center;
font-size:16px;
color:#c5c5c5;
font-weight:700
}
.popular-area-top .popular-area-nav p span {
color:#00d1c1
}
.popular-area-content {
height:342px
}
.popular-area-content .popular-content-l {
width:594px;
height:inherit;
margin-right:22px
}
.html-box img{
display:inline-block!important;
}
/*首页动态大图结束-*/第四步，加载jquery-3.6.0.min.js
没加载这个jquery-3.6.0.min.js，导致搜索框右边的 百度 Bing 站内搜索那些选项点击不了！
就是在后台常规 头部HTML标签 （就是跟上面引入阿里图标库那个框里面）添加代码：再引入这个jquery-3.6.0.min.js
<script src=\"https://code.jquery.com/jquery-3.6.0.min.js\"></script>最后保存，强制刷新浏览器缓存就可以看到效果了哦
重要提示
如有解压密码： 看下载页、看下载页、看下载页。
源码工具资源类具有可复制性： 建议具有一定思考和动手能力的用户购买。
请谨慎考虑： 小白用户和缺乏思考动手能力者不建议赞助。
虚拟商品购买须知： 虚拟类商品，一经购买打赏赞助，不支持退款。请谅解，谢谢合作！
© 版权声明
THE END
![子比主题美化 – 文章列表显示修改 列表[一行两个]卡片[一行五个]-源码资源网](/wp-content/uploads/2026/09/12/1ac3a94d5772e2b11a0ee37f3fbe3763.webp)
暂无评论内容