首页 › discuz教程 › discuz！N7模板 论坛加一个小导航

aoki 发表于 2025-1-13 18:31:13

discuz！N7模板 论坛加一个小导航

<style type="text/css">
/* 容器样式 */
.indexnews-tools {
    width: 100%; /* 容器宽度占满整个父元素 */
    background-color: #fff; /* 背景色设置为白色 */
    padding: 20px 0; /* 上下内边距为20px，左右内边距为0 */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

/* 列表样式 */
.indexnewss-tools {
    list-style: none; /* 移除默认的列表样式 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 子元素水平居中 */
}

/* 列表项样式 */
.indexnewss-tools li {
    width: 33.33%; /* 每个列表项宽度占父元素的33.33%，即一行三个 */
    height: 30px; /* 列表项高度为60px */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 子元素垂直居中 */
    justify-content: space-between; /* 子元素水平两端对齐 */
    padding: 0 20px; /* 左右内边距为20px */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
    border-right: 1px solid #ddd; /* 右侧边框，颜色为浅灰色 */
}

/* 最后一个列表项不显示右侧边框 */
.indexnewss-tools li:last-child {
    border-right: none;
}

/* 图标和文本内容容器样式 */
.indexnewss-tools li .content {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 子元素垂直居中 */
}

/* 图标样式 */
.indexnewss-tools li img {
    width: 30px; /* 图标宽度为30px */
    height: 30px; /* 图标高度为30px */
}

/* 文本内容样式 */
.indexnewss-tools li .text {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    align-items: flex-start; /* 子元素左对齐 */
    justify-content: center; /* 子元素垂直居中 */
    margin-left: 10px; /* 图标和文本之间的间距为10px */
}

/* 标题样式 */
.indexnewss-tools li .text h3 {
    font-size: 14px; /* 字体大小为14px */
    color: #333; /* 字体颜色为深灰色 */
    margin: 0; /* 移除默认的外边距 */
    margin-bottom: 5px; /* 底部外边距为5px */
}

/* 描述文本样式 */
.indexnewss-tools li .text span {
    font-size: 12px; /* 字体大小为12px */
    color: #666; /* 字体颜色为中灰色 */
    display: block; /* 显示为块级元素 */
}

/* 按钮样式 */
.indexnewss-tools li a.go {
    display: inline-block; /* 显示为行内块级元素 */
    padding: 8px 16px; /* 内边距为8px 16px */
    background-color: #1e90ff; /* 背景色为蓝色 */
    color: #fff; /* 字体颜色为白色 */
    text-decoration: none; /* 移除默认的下划线 */
    border-radius: 4px; /* 边框圆角为4px */
    transition: background-color 0.3s; /* 背景色变化时的过渡效果 */
}

/* 按钮悬停样式 */
.indexnewss-tools li a.go:hover {
    background-color: #187bcd; /* 悬停时的背景色为深蓝色 */
}
</style>
<div class="indexnews-tools">
    <ul class="indexnewss-tools layui-clear">
      <li>
            <div class="content">
                <img src="https://www.jiubbs.cn/s/pic/qiandao.svg">
                <div class="text">
                  <h3>签到打卡</h3>
                  <span>欢迎大家每天打卡，打卡会有积分奖励哦！</span>
                </div>
            </div>
            <a class="go" href="/plugin.php?id=zqlj_sign" target="_blank">签到打卡</a>
      </li>
      <li>
            <div class="content">
                <img src="https://www.jiubbs.cn/s/pic/suiji.svg">
                <div class="text">
                  <h3>随机推荐</h3>
                  <span>随机前往一篇帖子</span>
                </div>
            </div>
            <a class="go" href="/freeaddon_randomthread-freeaddon_randomthread.html" target="_blank">随便看看</a>
      </li>
      <li>
            <div class="content">
                <img src="https://www.jiubbs.cn/s/pic/qqqun.svg">
                <div class="text">
                  <h3>官方Q群</h3>
                  <span>跟社区的朋友一起吹吹牛</span>
                </div>
            </div>
            <a class="go" href="https://qm.qq.com/q/5pWkgRfSZa" target="_blank">加入Q群</a>
      </li>
    </ul>
</div>

梦淡如非 发表于 2025-1-14 09:31:28

荷包蛋有的。中间那一条。

aoki 发表于 2025-1-14 20:35:01

梦淡如非 发表于 2025-1-14 09:31
荷包蛋有的。中间那一条。

我用html代码 补了一个CSS

查看完整版本: discuz！N7模板 论坛加一个小导航