好看的页脚
<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>
感谢楼主分享! 楼主,这个是放哪个位置? 梦淡如非 发表于 2025-1-15 09:17
楼主,这个是放哪个位置?
footer 文件里面,把原来的 注释掉 aoki 发表于 2025-1-15 12:19
footer 文件里面,把原来的 注释掉
咋跟你的不一样啊? 梦淡如非 发表于 2025-1-15 13:43
咋跟你的不一样啊?
我又重新写了一个
aoki 发表于 2025-1-15 15:01
我又重新写了一个
把你重新写了的分享一下吧,哈哈。 梦淡如非 发表于 2025-1-15 15:18
把你重新写了的分享一下吧,哈哈。
发了
页:
[1]