·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
🔄最新发布📃文档资料库🆔加群看共享绿色软件切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz!交流与探讨 › Discuz!运营教程 › 优化dz x5导读首页各区域标题展示为一行 New ...
返回列表 发布新帖

优化dz x5导读首页各区域标题展示为一行 New

78 1
发表于 昨天 13:40 | 查看全部 阅读模式

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
今天，总算是微信能登录跳转到pc端网页了，分享一下，这几天的折腾，下面是上午折腾出来的。

使用 Trae解决导读首页各内容区域的展示问题。实现标题集中在一行显示。默认是展开，一个标题区一个标题区。
Trae 解决了：

- 1.所有标题在一行水平显示，支持滚动。
- 2.鼠标划动到标题上时，显示对应标题下的内容。
- 3.为标题设置了宽度不超过21%的限制。
- 4.添加了指定的渐变背景色和圆角效果。
- 5.添加了白色1px边框。
- 6.为"更多"链接设置了较小的字体和较浅的颜色。
  
下面分享原始代码：

    <!--{if $view == 'index'}-->        <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; /* 最小宽度，确保内容不会被压缩得太小 */                        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; /* 字体小一点 */                        color: #888; /* 颜色比主标题浅 */                        text-decoration: none;                }                .guide-tab .more-link:hover {                        color: #555;                        text-decoration: underline;                }                /* 隐藏滚动条但保留功能 */                .guide-tabs-container::-webkit-scrollbar {                        display: none;                }                .guide-tabs-container {                        -ms-overflow-style: none;                        scrollbar-width: none;                }        </style>        <div class="guide-tabs-container">                <!--{loop $data $key $list}-->                <div class="guide-tab" data-target="tab-$key">                        <span>                                <!--{if $key == 'hot'}-->{lang guide_hot}<!--{elseif $key == 'digest'}-->{lang guide_digest}<!--{elseif $key == 'newthread'}-->{lang guide_newthread}<!--{elseif $key == 'new'}-->{lang guide_new}<!--{elseif $key == 'my'}-->{lang guide_my}<!--{/if}-->                        </span>                        <a href="forum.php?mod=guide&view=$key" class="more-link">{lang more} »</a>                </div>                <!--{/loop}-->        </div>        <!-- 内容部分保持不变 -->        <!--{loop $data $key $list}-->        <div id="tab-$key" class="guide-content">                <div class="xl xl2 cl">                        <!--{if $list['threadcount']}-->                                <!--{eval $i=0;}-->                                <!--{loop $list['threadlist'] $thread}-->                                <!--{eval $i++;$newtd=$i%2;}-->                                <li{if !$newtd} class="xl2_r"{/if}>                                        <em>                                                <!--{if $key == 'hot'}--><span class="xi1">$thread[heats]{lang guide_attend}</span><!--{/if}-->                                                <!--{if $key == 'new'}-->$thread[lastpost]<!--{/if}-->                                        </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>                                <!--{/loop}-->                        <!--{else}-->                                <p class="emp">{lang guide_nothreads}</p>                        <!--{/if}-->                </div>        </div>        <!--{/loop}-->        <script>        jQuery(document).ready(function($) {                // 默认显示第一个标签的内容                $('.guide-tab').first().addClass('active');                $('.guide-content').first().addClass('active');                // 鼠标划动显示对应内容                $('.guide-tab').hover(function() {                        // 移除所有激活状态                        $('.guide-tab').removeClass('active');                        $('.guide-content').removeClass('active');                        // 添加当前激活状态                        $(this).addClass('active');                        var target = $(this).data('target');                        $('#' + target).addClass('active');                });        });        </script>


在导读首页文件，找到：<!--{if $view == 'index'}-->，下面div标签，在这整个div标签里，<!--{else}-->上，替换上面内容，即可。
因原始文件更改过，查看默认模板文件好象54-83行。
其它细节，你还可以自己继续优化。
页面标题优化
我要说一句 收起回复
赞赏
一花一世界，一叶一追寻。一曲一场叹，一生为一人。
回复

使用道具 举报

评论1

CrystαlLv.8 发表于 昨天 13:41 | 查看全部
下面是效果截图：

优化dz x5导读首页各区域标题展示为一行 New 页面标题优化


总体感觉，比一整个页面都是标题，来得美观些。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

最新热评 加载中...
AI智能体

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:216.73.216.11,GMT+8, 2025-10-15 00:56 , Processed in 0.209201 second(s), 86 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表