97久久国产亚洲精品超碰热,成人又色又爽的免费网站,色偷偷女人的天堂a,男女高潮喷水在线观看,国内精品一线二线三线区别在哪里

Discuz! 官方交流社區(qū)

標(biāo)題: 優(yōu)化dz x5導(dǎo)讀首頁各區(qū)域標(biāo)題展示為一行 [打印本頁]

作者: TaC 時(shí)間: 前天 13:14
標(biāo)題: 優(yōu)化dz x5導(dǎo)讀首頁各區(qū)域標(biāo)題展示為一行
今天，總算是微信能登錄跳轉(zhuǎn)到pc端網(wǎng)頁了，分享一下，這幾天的折騰，下面是上午折騰出來的。

使用 Trae 解決導(dǎo)讀首頁各內(nèi)容區(qū)域的展示問題。實(shí)現(xiàn)標(biāo)題集中在一行顯示。默認(rèn)是展開，一個(gè)標(biāo)題區(qū)一個(gè)標(biāo)題區(qū)。
Trae 解決了：

- 1.所有標(biāo)題在一行水平顯示，支持滾動(dòng)。
- 2.鼠標(biāo)劃動(dòng)到標(biāo)題上時(shí)，顯示對(duì)應(yīng)標(biāo)題下的內(nèi)容。
- 3.為標(biāo)題設(shè)置了寬度不超過21%的限制。
- 4.添加了指定的漸變背景色和圓角效果。
- 5.添加了白色1px邊框。
- 6.為"更多"鏈接設(shè)置了較小的字體和較淺的顏色。

下面分享原始代碼：

<style type="text/css">
.guide-tabs-container {
display: flex;
overflow-x: auto;
white-space: nowrap;
margin-bottom: 15px;
padding: 5px;
}
.guide-tab {
flex: 0 0 auto;
width: 21%; /* 寬度不超過21% */
min-width: 150px; /* 最小寬度，確保內(nèi)容不會(huì)被壓縮得太小 */
padding: 10px 20px;
cursor: pointer;
position: relative;
background: linear-gradient(132deg,rgba(235,237,240,0.85) 9.65%,rgba(233,236,238,0.5) 58.96%,rgba(254,254,255,0.87) 86.15%);
border-radius: 5px;
border: 1px solid white;
margin-right: 10px;
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.guide-tab:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.guide-tab.active {
background: linear-gradient(132deg,rgba(220,225,230,0.85) 9.65%,rgba(215,220,225,0.5) 58.96%,rgba(240,245,250,0.87) 86.15%);
font-weight: bold;
}
.guide-content {
display: none;
padding: 15px 0;
}
.guide-content.active {
display: block;
}
/* 更多鏈接樣式 */
.guide-tab .more-link {
font-size: 12px; /* 字體小一點(diǎn) */
color: #888; /* 顏色比主標(biāo)題淺 */
text-decoration: none;
}
.guide-tab .more-link:hover {
color: #555;
text-decoration: underline;
}
/* 隱藏滾動(dòng)條但保留功能 */
.guide-tabs-container::-webkit-scrollbar {
display: none;
}
.guide-tabs-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<div class="guide-tabs-container">
<div class="guide-tab" data-target="tab-$key">
<span>
{lang guide_hot}{lang guide_digest}{lang guide_newthread}{lang guide_new}{lang guide_my}
</span>
<a href="forum.php?mod=guide&view=$key" class="more-link">{lang more} ?</a>
</div>
</div>
<div id="tab-$key" class="guide-content">
<div class="xl xl2 cl">
<li{if !$newtd} class="xl2_r"{/if}>
<em>
<span class="xi1">$thread[heats]{lang guide_attend}</span>
$thread[lastpost]
</em>
<i>· <a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra"$thread[highlight] target="_blank">$thread[subject]</a></i> <span class="xg1"><a href="forum.php?mod=forumdisplay&fid=$thread[fid]" target="_blank">$list['forumnames'][$thread[fid]]['name']</a></span>
</li>
<p class="emp">{lang guide_nothreads}</p>
</div>
</div>
<script>
jQuery(document).ready(function($) {
// 默認(rèn)顯示第一個(gè)標(biāo)簽的內(nèi)容
$('.guide-tab').first().addClass('active');
$('.guide-content').first().addClass('active');
// 鼠標(biāo)劃動(dòng)顯示對(duì)應(yīng)內(nèi)容
$('.guide-tab').hover(function() {
// 移除所有激活狀態(tài)
$('.guide-tab').removeClass('active');
$('.guide-content').removeClass('active');
// 添加當(dāng)前激活狀態(tài)
$(this).addClass('active');
var target = $(this).data('target');
$('#' + target).addClass('active');
});
});
</script>

在導(dǎo)讀首頁文件，找到：，下面div標(biāo)簽，在這整個(gè)div標(biāo)簽里，上，替換上面內(nèi)容，即可。
因原始文件更改過，查看默認(rèn)模板文件好象54-83行。
其它細(xì)節(jié)，你還可以自己繼續(xù)優(yōu)化。

作者: TaC 時(shí)間: 前天 13:16
本帖最后由 TaC 于 2025-10-14 13:18 編輯

下面是效果截圖：

(, 下載次數(shù): 0)

總體感覺，比一整個(gè)頁面都是標(biāo)題，來得美觀些。

歡迎光臨 Discuz! 官方交流社區(qū) (http://r615.cn/)