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

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

1. <style type="text/css">
   
2. /* 容器样式 */
   
3. .indexnews-tools {
   
4.     width: 100%; /* 容器宽度占满整个父元素 */
   
5.     background-color: #fff; /* 背景色设置为白色 */
   
6.     padding: 20px 0; /* 上下内边距为20px，左右内边距为0 */
   
7.     box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
   
8. }
   
9. 
   
10. /* 列表样式 */
    
11. .indexnewss-tools {
    
12.     list-style: none; /* 移除默认的列表样式 */
    
13.     padding: 0; /* 移除默认的内边距 */
    
14.     margin: 0; /* 移除默认的外边距 */
    
15.     display: flex; /* 使用flex布局 */
    
16.     justify-content: center; /* 子元素水平居中 */
    
17. }
    
18. 
    
19. /* 列表项样式 */
    
20. .indexnewss-tools li {
    
21.     width: 33.33%; /* 每个列表项宽度占父元素的33.33%，即一行三个 */
    
22.     height: 30px; /* 列表项高度为60px */
    
23.     display: flex; /* 使用flex布局 */
    
24.     align-items: center; /* 子元素垂直居中 */
    
25.     justify-content: space-between; /* 子元素水平两端对齐 */
    
26.     padding: 0 20px; /* 左右内边距为20px */
    
27.     box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
    
28.     border-right: 1px solid #ddd; /* 右侧边框，颜色为浅灰色 */
    
29. }
    
30. 
    
31. /* 最后一个列表项不显示右侧边框 */
    
32. .indexnewss-tools li:last-child {
    
33.     border-right: none;
    
34. }
    
35. 
    
36. /* 图标和文本内容容器样式 */
    
37. .indexnewss-tools li .content {
    
38.     display: flex; /* 使用flex布局 */
    
39.     align-items: center; /* 子元素垂直居中 */
    
40. }
    
41. 
    
42. /* 图标样式 */
    
43. .indexnewss-tools li img {
    
44.     width: 30px; /* 图标宽度为30px */
    
45.     height: 30px; /* 图标高度为30px */
    
46. }
    
47. 
    
48. /* 文本内容样式 */
    
49. .indexnewss-tools li .text {
    
50.     display: flex;
    
51.     flex-direction: column; /* 子元素垂直排列 */
    
52.     align-items: flex-start; /* 子元素左对齐 */
    
53.     justify-content: center; /* 子元素垂直居中 */
    
54.     margin-left: 10px; /* 图标和文本之间的间距为10px */
    
55. }
    
56. 
    
57. /* 标题样式 */
    
58. .indexnewss-tools li .text h3 {
    
59.     font-size: 14px; /* 字体大小为14px */
    
60.     color: #333; /* 字体颜色为深灰色 */
    
61.     margin: 0; /* 移除默认的外边距 */
    
62.     margin-bottom: 5px; /* 底部外边距为5px */
    
63. }
    
64. 
    
65. /* 描述文本样式 */
    
66. .indexnewss-tools li .text span {
    
67.     font-size: 12px; /* 字体大小为12px */
    
68.     color: #666; /* 字体颜色为中灰色 */
    
69.     display: block; /* 显示为块级元素 */
    
70. }
    
71. 
    
72. /* 按钮样式 */
    
73. .indexnewss-tools li a.go {
    
74.     display: inline-block; /* 显示为行内块级元素 */
    
75.     padding: 8px 16px; /* 内边距为8px 16px */
    
76.     background-color: #1e90ff; /* 背景色为蓝色 */
    
77.     color: #fff; /* 字体颜色为白色 */
    
78.     text-decoration: none; /* 移除默认的下划线 */
    
79.     border-radius: 4px; /* 边框圆角为4px */
    
80.     transition: background-color 0.3s; /* 背景色变化时的过渡效果 */
    
81. }
    
82. 
    
83. /* 按钮悬停样式 */
    
84. .indexnewss-tools li a.go:hover {
    
85.     background-color: #187bcd; /* 悬停时的背景色为深蓝色 */
    
86. }
    
87. </style>
    
88. <div class="indexnews-tools">
    
89.     <ul class="indexnewss-tools layui-clear">
    
90.         <li>
    
91.             <div class="content">
    
92.                 <img src="https://www.jiubbs.cn/s/pic/qiandao.svg">
    
93.                 <div class="text">
    
94.                     <h3>签到打卡</h3>
    
95.                     <span>欢迎大家每天打卡，打卡会有积分奖励哦！</span>
    
96.                 </div>
    
97.             </div>
    
98.             <a class="go" href="/plugin.php?id=zqlj_sign" target="_blank">签到打卡</a>
    
99.         </li>
    
100.         <li>
     
101.             <div class="content">
     
102.                 <img src="https://www.jiubbs.cn/s/pic/suiji.svg">
     
103.                 <div class="text">
     
104.                     <h3>随机推荐</h3>
     
105.                     <span>随机前往一篇帖子</span>
     
106.                 </div>
     
107.             </div>
     
108.             <a class="go" href="/freeaddon_randomthread-freeaddon_randomthread.html" target="_blank">随便看看</a>
     
109.         </li>
     
110.         <li>
     
111.             <div class="content">
     
112.                 <img src="https://www.jiubbs.cn/s/pic/qqqun.svg">
     
113.                 <div class="text">
     
114.                     <h3>官方Q群</h3>
     
115.                     <span>跟社区的朋友一起吹吹牛</span>
     
116.                 </div>
     
117.             </div>
     
118.             <a class="go" href="https://qm.qq.com/q/5pWkgRfSZa" target="_blank">加入Q群</a>
     
119.         </li>
     
120.     </ul>
     
121. </div>

复制代码

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

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

我用html代码 补了一个CSS