aoki 发表于 2025-1-13 09:03:47

好看的页脚







<div class="comiis_footer">
<div id="ft" class="wp comiis_bottom wlnw">
<div id="frt">
<p class="km_fnv"><span class="pipe">|</span><a href="javascript:;"onclick="showWindow('miscreport', 'misc.php?mod=report&url='+REPORTURL);return false;">举报</a><span class="pipe">|</span><a href="archiver/" >Archiver</a><span class="pipe">|</span><a href="forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><a href="forum.php?mod=misc&action=showdarkroom" >小黑屋</a>
</p>
</div>
<div class="comiis_demail">
<p><em>投诉/建议联系邮箱</em></p><a href="mailto:kefu@foxccs.com" rel="nofollow">kefu@foxccs.com</a>
</div>

<ul class="comiis_dico">
    <li>
      <a href="javascript:;"title="微信公众号">
            <img src="{IMGDIR}/ewm_a.jpg" class="vm">
      </a>
      <div class="comiis_icon_name">微信公众号</div>
    </li>
    <li>
      <a href="javascript:;" title="官方微博">
            <img src="{IMGDIR}/ewm_b.jpg" class="vm">
      </a>
      <div class="comiis_icon_name">官方微博</div>
    </li>
    <li>
      <a href="javascript:;" title="官方抖音号">
            <img src="{IMGDIR}/ewm_b.jpg" class="vm">
      </a>
      <div class="comiis_icon_name">官方抖音号</div>
    </li>
</ul>
</div>
</div>

<style>
/* 整体容器样式 */
.comiis_footer {
    width: 100%;
    background-color: #f2f2f2; /* 浅灰色背景 */
    padding: 15px 0;
    border-top: 1px solid #ddd; /* 顶部细边框 */
    box-sizing: border-box;
}

/* 底部内容区域 */
#ft {
    width: 1200px; /* 假设最大宽度为1200px，可根据实际需求修改 */
    margin: 0 auto; /* 水平居中 */
    display: flex;
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 垂直居中 */
}

/* 底部链接区域 */
.km_fnv {
    display: flex;
    align-items: center;
}

.km_fnv a {
    color: #333; /* 链接文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    margin: 0 10px; /* 链接间间距 */
}

.km_fnv a:hover {
    text-decoration: underline; /* 鼠标悬停时下划线 */
}

.pipe {
    color: #999; /* 分隔符颜色 */
    margin: 0 0px; /* 分隔符间距 */
}

/* 投诉建议联系微信区域 */
.comiis_demail {
    display: flex;
    flex-direction: column; /* 子元素上下排列 */
    align-items: flex-start; /* 子元素起始端对齐 */
    justify-content: center; /* 子元素居中对齐 */
}

.comiis_demail p {
    margin: 0 0 5px 0; /* 调整与下方链接的间距 */
    color: #666; /* 文字颜色 */
    font-size: 14px; /* 字体大小 */
}

.comiis_demail a {
    color: #007bff; /* 微信链接颜色 */
    text-decoration: none; /* 去掉下划线 */
}

.comiis_demail a:hover {
    text-decoration: underline; /* 鼠标悬停时下划线 */
}

/* 社交媒体图标列表区域 */
.comiis_dico {
    list-style: none; /* 去掉列表默认样式 */
    padding: 0;
    display: flex;
    align-items: center;
}

.comiis_dico li {
    display: flex;
    flex-direction: column; /* 子元素上下排列 */
    align-items: center; /* 子元素居中对齐 */
    margin-left: 10px; /* 图标间距 */
}

.comiis_dico a {
    display: inline-block;
}

/* 图片样式，添加圆角效果 */
.comiis_dico .vm {
    width: 80px; /* 图片大小，可根据实际图标尺寸调整 */
    height: 80px;
    border-radius: 8px; /* 添加圆角效果 */
}

/* 图标名称样式 */
.comiis_icon_name {
    margin-top: 5px; /* 与图标间距 */
    color: #666; /* 文字颜色 */
    font-size: 12px; /* 字体大小 */
}
</style>

22331144 发表于 2025-1-13 10:05:54

感谢楼主分享！

梦淡如非 发表于 2025-1-15 09:17:26

楼主，这个是放哪个位置？

aoki 发表于 2025-1-15 12:19:46

梦淡如非 发表于 2025-1-15 09:17
楼主，这个是放哪个位置？

footer 文件里面，把原来的 注释掉

梦淡如非 发表于 2025-1-15 13:43:47

aoki 发表于 2025-1-15 12:19
footer 文件里面，把原来的 注释掉

咋跟你的不一样啊？

aoki 发表于 2025-1-15 15:01:05

梦淡如非 发表于 2025-1-15 13:43
咋跟你的不一样啊？

我又重新写了一个

梦淡如非 发表于 2025-1-15 15:18:54

aoki 发表于 2025-1-15 15:01
我又重新写了一个

把你重新写了的分享一下吧，哈哈。

aoki 发表于 2025-1-15 17:14:47

梦淡如非 发表于 2025-1-15 15:18
把你重新写了的分享一下吧，哈哈。

发了
页: [1]
查看完整版本: 好看的页脚