当前位置：首页 > news >正文

百度首页布局：固定右侧盒子不随界面缩小掉下去

news 2025/6/9 10:28:45

在前端开发中，我们经常需要实现类似百度首页的布局效果：当浏览器窗口缩小时，右侧的某些元素（如天气、用户信息等）需要保持固定位置，不会随着其他内容一起掉下去。

问题背景

在开发百度首页风格的布局时，我们遇到了几个关键问题：

下拉菜单中的最后一个链接项会掉到盒子外部
设置菜单中的链接无法正常点击
右侧盒子在界面缩小时会随之下移

解决方案

1. 下拉菜单布局优化

问题：.more ul li:last-child a掉到盒子外部

原因分析：

最后一个<li>的宽度(212px)几乎等于.more的宽度(228px)
额外的margin和padding导致溢出
高度(27px)与其他项(82px)不同影响布局

解决方案：

.more {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5px;padding: 8px;width: 228px;
}.more ul li:last-child {grid-column: 1 / -1; /* 跨所有列 */width: 100%;margin: 5px 0 0;text-align: center;
}

2. 链接修复

问题：setting ul li a不能正常作为链接标签，或打开页面后有多余a标签出现。

原因分析：

部分<a>标签缺少href属性。
行内元素与块级元素的不规范嵌套，如使用a标签包含ul标签。
浏览器不支持。
CSS样式可能覆盖了链接的默认行为。
可能的z-index或overflow问题。

解决方案：

首先要检查是否有不合格的嵌套代码，将行快元素规范，补齐标签属性。

<div class="setting"><ul><li><a class="setting1" href="/search-settings">搜索设置</a></li><!-- 其他菜单项 --></ul>
</div>

.setting ul li a {display: block;padding: 8px 12px;color: #333;text-decoration: none;cursor: pointer;
}

3. 右侧盒子固定布局

需求：界面缩小时右侧盒子保持固定

方案1：Flexbox布局

<div class="container"><div class="left-content">左侧主要内容</div><div class="right-box">右侧固定盒子</div>
</div>

.container {display: flex;min-width: 1200px;overflow-x: auto;
}.right-box {width: 200px;
}

方案2：绝对定位

.container {position: relative;
}.right-box {position: absolute;right: 0;top: 0;width: 200px;
}

技术要点总结

Flexbox：
- Flexbox适合响应式简单布局
防止溢出：
- 设置min-width防止过度压缩
- 使用overflow-x:auto处理超宽内容
- overflow：hidden保证页面整洁
链接可点击性：
- 确保<a>标签有有效的href
- 检查CSS是否覆盖了默认样式
- 检查不规范嵌套行为
- 确认没有JavaScript阻止默认行为

完整示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"><title>百度一下，你就知道</title><link rel="stylesheet" href="index.css"><link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head><body><!--头部--><header><div class="head_left"><ul><li><a href="https://news.baidu.com/">新闻</a></li><li><a href="https://www.hao123.com/?src=from_pc_logon">hao123</a></li><li><a href="https://map.baidu.com/">地图</a></li><li><ahref="https://tieba.baidu.com/index.html?__pc2ps_ab=1915bHA3q4fU1KQ5tBy7mPRbne571%2BTYsDzqbr05ntRRjfSNdQXqlUfdYT10gcYIKJR%2BDInC5yBqh50S0yGR3e10WQ6RX4P2Nw9dTV7p%2BquEb9u0DKqwEFj6x%2B7LQnOaJqv%2Ff0SmWrwgPSrWQdNstHoyOxZCzrm8%2F07%2BnT2eNcdrd1I%3D%7C1749375417%7Cedf78213eb781ede0dc53ed0393576d2%7Cedf78213eb781ede0dc53ed0393576d2&p_sign=edf78213eb781ede0dc53ed0393576d2&p_signature=edf78213eb781ede0dc53ed0393576d2&p_timestamp=1749375417&p_tk=1915bHA3q4fU1KQ5tBy7mPRbne571%2BTYsDzqbr05ntRRjfSNdQXqlUfdYT10gcYIKJR%2BDInC5yBqh50S0yGR3e10WQ6RX4P2Nw9dTV7p%2BquEb9u0DKqwEFj6x%2B7LQnOaJqv%2Ff0SmWrwgPSrWQdNstHoyOxZCzrm8%2F07%2BnT2eNcdrd1I%3D">贴吧</a></li><li><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a></li><li><a href="https://image.baidu.com/">图片</a></li><li><a href="https://pan.baidu.com/?from=1026962h">网盘</a></li><li><a href="https://wenku.baidu.com/?fr=bdpcindex&_wkts_=1749375445377">文库</a></li><li><ahref="https://chat.baidu.com/search?isShowHello=1&pd=csaitab&setype=csaitab&extParamsJson=%7B%22enter_type%22%3A%22home_tab%22%7D"><img src="img/ai.png" class="ai" alt=""></a></li><li><a href="https://www.baidu.com/more/">更多</a><div class="more"><ul><li><a href="https://fanyi.baidu.com/mtpe-individual/multimodal?ext_channel=DuSearch#/"><img src="img/trans.png" alt=""><div>翻译</div></a></li><li><a href="https://xueshu.baidu.com/"><img src="img/academic.png" alt=""><div>学术</div></a></li><li><a href="https://baike.baidu.com/"><img src="img/baike.png" alt=""><div>百科</div></a></li><li><a href="https://zhidao.baidu.com/"><img src="img/zhidao.png" alt=""><div>知道</div></a></li><li><a href="https://jiankang.baidu.com/widescreen/home"><img src="img/health.png" alt=""><div>健康</div></a></li><li><a href="https://e.baidu.com/ebaidu/home?refer=887"><img src="img/yingxiao.png" alt=""><div>营销推广</div></a></li><li><a href="https://live.baidu.com/"><img src="img/live.png" alt=""><div>直播</div></a></li><li><a href="https://music.taihe.com/"><img src="img/music.png" alt=""><div>音乐</div></a></li><li><a href="https://cp.baidu.com/?sa=bdindex"><img src="img/orange.png" alt=""><div>橙篇</div></a></li><li><a href="https://www.baidu.com/more/">查看全部百度产品</a></li></ul></div></li></ul></div><div class="head_right"><ul><li><a class="answer" href=""></a></li><li><a href="" class="weather"><span>北京</span><img src="img/cloud.png" alt=""><span>27℃</span><span class="polution">优</span><div class="week_header"><div class="weather_head"><div class="weather_head_left"><span class="date1">06月06日</span><span class="date2">农历 五月十一</span><a href="https://www.weather.com.cn/weather/101010100.shtml#7d"class="date3">未来七天天气</a></div><div class="weather_head_right"><span class="change">切换</span></div></div><div class="weekly"><a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5"class="day1"><div class="date">今天(周五)</div><img src="img/cloud.png" class="date_weather"></img><div class="tempretrue">22~35</div><div class="date_weather_word">多云转晴</div><div class="wind">东北风1级</div></a><a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5"class="day2"><div class="date">明天(周六)</div><img src="img/cloud.png" class="date_weather"></img><div class="tempretrue">19~33</div><div class="date_weather_word">多云转晴</div><div class="wind">南风1级</div></a><a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5"class="day3"><div class="date">后天(周日)</div><img src="img/sun.png" class="date_weather"></img><div class="tempretrue">22~33</div><div class="date_weather_word">晴</div><div class="wind">南风1级</div></a><a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5"class="day4"><div class="date">周一</div><img src="img/thunder.png" class="date_weather"></img><div class="tempretrue">22~33</div><div class="date_weather_word">雷阵雨转晴</div><div class="wind">北风3级</div></a><a href="https://www.baidu.com/s?tn=baidutop10&rsv_idx=2&wd=%E5%8C%97%E4%BA%AC%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5"class="day5"><div class="date">周二</div><img src="img/sun.png" class="date_weather"></img><div class="tempretrue">22~32</div><div class="date_weather_word">晴</div><div class="wind">北风1级</div></a></div></div></a></li><li><a href="">设置</a><div class="setting"><ul><li><a class="setting1" href="#">搜索设置</a></li><li><a class="setting1" href="#">首页设置</a></li><li><a class="setting1" href="#">高级搜索</a></li><li><a class="setting1" href="#">关闭预测</a></li><li><a class="setting1" href="https://www.baidu.com/duty/privacysettings.html">隐私设置</a></li><li><a class="setting1" href="#">隐藏热搜</a></li><li "><span></span></li><li><a class=" setting2" href="#">更换皮肤</a></li></ul></div></li><li><a href="https://www.baidu.com/my/index" class="user"><img src="img/user.jpg" alt=""><span>user</span></a><div class="user_center"><ul><li><a href="https://www.baidu.com/my/index">个人中心</a></li><li><a href="#">账号设置</a></li><li><a href="https://passport.baidu.com/v6/ucenter?_t=1749366923">切换账号</a></li><li><a href="#">退出登录</a></li></ul></div></li></ul></div></header><!--百度logo和搜索栏--><div class="new_index"><!--百度logo--><div class="logo w"><img src="img/baidu.png" alt=""></div><!--搜索栏--><div class="search w"><div class="search-container"><input type="text" placeholder="百度一下，你就知道" class="search_input" autocomplete="on"><div class="camera"></div><button class="search_btn">百度一下</button></div></div><!--百度AI--><div class="baidu_ai_box"><div class="baidu_ai"><div class="ai_img"><img src="img/baiduAI.png" alt=""></div><div class="solve">今日已解决642852个问题</div><a href="https://chat.baidu.com/search?extParams=%7B%22enter_type%22%3A%22ai_explore_home%22%7D&isShowHello=1"class="arrow"></a></div></div></div><!--热搜板块--><div class="hot w"><div class="imfor"><div class="focus">我的关注</div><a href="javascript:void(0)" class="heat">百度热搜</a><div class="heat_arrow"></div><a href="javascript:void(0)" class="change"><span class="icomoon"></span>换一换</a></div><div class="topic"><ul><li><a href=""><span class="top"></span>我们的名字叫“长江”</a></li><li><a href=""><span class="hot1">1</span>台湾旅行团整团被卖到缅甸<span class="topic_hot">热</span></a></li><li><a href=""><span class="hot2">2</span>未来5年地球将遇“致命高温”</a></li><li><a href=""><span class="hot3">3</span>央行多措并举6月流动性整体无虞</a></li><li><a href=""><span>4</span>郑钦文不敌萨巴伦卡止步法网8强<span class="topic_hot">热</span></a></li><li><a href=""><span>5</span>乌克兰袭击克里米亚大桥画面曝光 <span class="topic_new">新</span></a></li><li><a href=""><span>6</span>胡歌新身份正式官宣</a></li><li><a href=""><span>7</span>韩国总统选举投票结束<span class="topic_hot">热</span></a></li><li><a href=""><span>8</span>27岁女游客在三亚被蛇咬伤身亡</a></li><li><a href=""><span>9</span>2025年高考举报电话已开通<span class="topic_new">新</span></a></li></ul></div></div><aside><div class="aside_box"><div class="up"><img src="img/data_image_png;base….png"></img><div class="mood">辅助模式</div></div><div class="down"><img src="img/qrcode1.png"></img><div class="qrcode"><div class="qrcode_left"><p>扫码下载百度APP</p><span>百度一下 生活更好</span></div><div class="qrcode_right"><img src="img/qrcode_baidu.png" alt=""></div></div></div></div></aside><footer><ul class="left"><li><a href="https://home.baidu.com/">关于百度</a></li><li><a href="https://ir.baidu.com/">About Baidu</a></li><li><a href="https://www.baidu.com/duty">使用百度前必读</a></li><li><a href="https://help.baidu.com/question?prod_id=1">帮助中心</a></li><li><a href="https://e.baidu.com/?refer=1271">企业推广</a></li><li><a href="https://beian.mps.gov.cn/#/query/webSearch?code=11000002000001">京公网安备11000002000001号</a></li><li><a href="https://beian.miit.gov.cn/">京ICP证030173号</a></li><li>互联网新闻信息服务许可证11220180008</li><li>网络文化经营许可证：京网文(2023)1034-029号</li><li><a href="https://www.baidu.com/licence/">信息网络传播视听节目许可证0110516</a></li></ul><div class="right"><div class="chair"><img src="img/handicapped-304424_1280.webp" alt=""></div><div class="bottom_right"><a class="arrow2"></a><div class="imformation"><div>互联网宗教信息服务许可证编号：京（2022)0000043</div><div>药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号</div><div>医疗器械网络交易服务第三方平台备案凭证（京）网械平台备字（2020）第00002号</div><div>药品网络交易服务第三方平台备案凭证（京）网药平台备字〔2023】第000002号</div><div>@2025 Baidu</div></div></div></div>
</body></html>

* {box-sizing: border-box;margin: 0;padding: 0;position: relative;
}@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?tomleg');src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?tomleg') format('truetype'),url('fonts/icomoon.woff?tomleg') format('woff'),url('fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}html,
body {min-width: 1250px;width: 100%;height: 100%;scrollbar-width: none;
}/* 添加水平滚动条当内容超出时 */
body {overflow-x: auto;
}ul li {list-style: none;
}a {text-decoration: none;
}img {vertical-align: middle;
}.w {margin: 0 auto;width: 654px;
}header {height: 60px;}.head_left {float: left;height: 60px;
}.head_left ul li a {display: inline-block;
}.head_left ul li {float: left;line-height: 60px;}.head_left ul li a {margin: 0 15px;font-size: 13px;color: #222222;
}.head_left ul li a:hover {color: #38f;
}.head_left li a .ai {height: 14px;width: 26px;
}.more {visibility: collapse;z-index: 1000;display: flex;flex-wrap: wrap;position: absolute;top: 55px;right: 10px;height: 298px;width: 228px;font-size: 12px;text-align: center;background-color: #fff;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .15);border-radius: 12px;
}.head_left ul li:last-child:hover .more {visibility: visible;
}.more ul li a {margin: 0;padding: 0;
}.more ul li {margin-top: 3px;height: 82px;width: 60px;margin-left: 13px;padding: 0;
}.more li:hover {background-color: #f1f3fd;border-radius: 8px;
}.more ul li:last-child,
.more ul li:last-child a {margin: 0;padding: 0;color: #9195a3;width: 212px;height: 27px;
}.more ul li:last-child {margin-left: 9px;margin-top: 7px;
}.more li div {margin-top: -20px;
}.more ul li:last-child a {display: flex;justify-content: center;align-items: center;padding: 0 10px;height: 27px;line-height: 27px;font-size: 13px;
}.more ul li:last-child a::after {content: "";font-family: 'icomoon';font-size: 16px;height: 27px;line-height: 27px;
}.more ul li:hover,
.more ul li:last-child a:hover {color: #315efb;
}header .more img {border: 1px solid #f0f0f0;border-radius: 5px;height: 42px;width: 42px;
}header .head_right {position: absolute;margin: 0 24px 0 200px;right: 0;top: 0;height: 60px;
}header .head_right ul {display: flex;
}header .head_right ul li:nth-child(n+1) {margin-left: 20px;
}.head_right ul li a {text-align: center;font-size: 14px;color: #222222;height: 60px;line-height: 60px;
}.head_right ul li a:hover {color: #38f;
}.head_right ul li .answer {margin-top: 1px;width: 27px;display: inline-block;background: url(img/answer.png) no-repeat center center;background-size: 27px;
}.head_right ul li .answer:hover {background: url(img/answer_hover.png) no-repeat center center;background-size: 27px;
}.head_right ul li .user img {height: 28px;border: 1px solid #4e71f2;border-radius: 50%;overflow: hidden;
}.weather {position: relative;}.weather img {width: 23px;height: 23px;
}.weather .polution {display: inline-block;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;width: 23px;color: #fff;border-radius: 9px;padding: 1px 6px 0px;height: 14px;line-height: 12px;font-size: 11px;background-color: #40c057;
}li:hover .week_header {visibility: visible;z-index: 1000;
}.week_header {visibility: hidden;position: absolute;top: 48px;right: -170px;width: 496px;height: 198px;border-radius: 12px;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);background-color: #fff;
}.weather_head {height: 38px;line-height: 38px;
}.weather_head_left {float: left;height: 38px;}.weather_head_right {float: right;height: 38px;
}.weather_head_left span {margin-left: 15px;float: left;
}.weather_head_left .date1 {line-height: 38px;font-size: 13px;color: #222;font-family: Arial, Helvetica, sans-serif;
}.weather_head_left .date2 {color: #999;line-height: 38px;font-size: 13px;
}.weather_head_left .date3 {float: left;margin-left: 15px;color: #4e71f2;font-size: 13px;line-height: 38px;
}.weather_head_right .change::before {content: "";font-family: icomoon;color: #4e71f2;margin: 0 5px;
}.weather_head_right .change {float: right;margin-right: 15px;font-size: 13px;color: #999;
}.weather_head_right .change:hover {color: #4e71f2;
}.weekly {display: flex;width: 496px;margin-top: 8px;text-align: center;font-size: 12px;line-height: 25px;font-family: Arial, Helvetica, sans-serif;justify-content: space-between;
}.weekly a[class*="day"] {display: block;width: 85px;height: 140px;border-radius: 5px;font-size: 13px;line-height: 25px;
}.weekly a[class*="day"] img {width: 30px;height: 30px;
}.weekly a[class*="day"]:hover {background-color: rgba(245, 245, 246);
}.weekly .day1 {margin-left: 15px;
}.weekly .day5 {margin-right: 15px;
}li:hover .setting {visibility: visible;z-index: 1000;
}.setting {visibility: hidden;margin: 0;left: -50px;position: absolute;text-align: center;height: 240px;width: 90px;border-radius: 12px;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);background-color: #fff;
}.setting ul {display: flex;flex-direction: column;justify-content: flex-start;padding: 0;margin: 0;margin-top: 8px;
}.setting li {padding: 5px 0;margin: 0 !important;
}.setting li span {display: block;margin-left: 15px;background-color: #BBBBBB;height: 1px;width: 60px;
}.setting li a[class*="setting"] {display: block;float: none;height: 20px;line-height: 20px;font-size: 14px;color: #222;text-align: center;
}.setting2::after {content: "";position: absolute;left: 75px;top: 0;display: block;height: 5px;width: 5px;border-radius: 50%;background-color: red;
}.user_center {margin: 0;visibility: hidden;position: absolute;text-align: center;height: 140px;width: 90px;border-radius: 12px;box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);background-color: #fff;
}.user_center ul {display: flex;flex-direction: column;justify-content: flex-start;padding: 0;margin: 0;margin-top: 8px;
}.user_center li {padding: 5px 0;margin: 0 !important;
}.user_center ul li a {display: block;float: none;height: 20px;line-height: 20px;font-size: 14px;color: #222;text-align: center;
}li:hover .user_center {visibility: visible;z-index: 1000;
}.new_index {height: 450px;
}.logo {width: 640px;height: 225px;display: flex;justify-content: center;align-items: flex-end;
}.logo img {height: 129px;width: 270px;
}.search-container {display: flex;/* 使用flex布局替代浮动 */width: 100%;height: 44px;
}.search {margin-top: 20px;height: 44px;text-align: center;line-height: 44px;
}.search input {position: relative;border-radius: 10px 0 0 10px;box-sizing: border-box;padding: 18px;height: 44px;width: 548px;border: 2px solid #c4c7ce;float: left;
}.search .camera {position: absolute;right: 124px;top: 9px;height: 20px;width: 20px;background: url(img/camera.png) no-repeat center center;background-position: 0px 4px;
}.search .camera:hover {background-position: 0px -16px;overflow: hidden;
}.search input:hover {border-color: rgba(167, 170, 181);
}.search input:focus {outline: none;border-color: #4e6ef2;
}.search input::placeholder {font-family: Arial, sans-serif;font-size: 16px;
}.search_btn {font-size: 18px;margin-left: -2px;float: left;border-radius: 0 10px 10px 0;;width: 108px;height: 44px;border: none;color: #fff;background-color: #4e6ef2;
}.search_btn:hover {background-color: #3b4cd9;
}.baidu_ai_box {box-sizing: border-box;display: inline-flex;width: 100%;margin-top: 35px;padding: 8px;justify-content: center;align-items: center;font-size: 16px;line-height: 16px;
}.baidu_ai {display: flex;height: 40px;border-radius: 29px;padding: 0 10px;background-color: rgba(212, 222, 255, .3);text-align: left;
}.ai_img {width: 63px;height: 18px;margin-top: 9px;margin-left: 6px;margin-right: 7px;margin-bottom: -1px;}.ai_img img {width: 63px;height: 15px;vertical-align: middle;}.solve {font-family: Arial, sans-serif;font-size: 16px;line-height: 40px;
}.arrow {margin-top: 8px;margin-left: 6px;height: 24px;width: 24px;background-color: rgba(62, 75, 255, .1);border-radius: 50%;
}.arrow::before {content: "";font-size: 12px;line-height: 24px;padding-left: 6px;color: #000;font-family: icomoon;
}.hot {font-size: 16px;height: 244px;
}.hot .imfor {height: 30px;}.hot .focus {margin-top: 4px;margin-right: 24px;float: left;
}.hot .heat {color: #000;font-family: 'cIconfont';font-weight: bold;margin-top: 4px;float: left;border-bottom: 2px solid #4e7ef2;}.hot .heat_arrow {float: left;margin-top: 2px;line-height: 30px;height: 30px;
}.hot .heat_arrow::after {font-size: 20px;font-weight: 100;color: #9195A3;content: "";font-family: icomoon;
}.hot .change {color: #9195A3;margin-top: 4px;float: right;
}.hot .change:hover {color: #4e71f2;
}.hot .change span {font-size: 13px;margin-right: 3px;font-family: icomoon;display: inline-block;transform: rotate(-30deg);
}.hot .change:focus span {animation: rotate 0.3s ease backwards;
}@keyframes rotate {0% {transform: rotate(-30deg);}100% {transform: rotate(150deg);}
}.hot .topic {padding: 18px;height: 180px;width: 654px;padding-left: 0px;margin-left: 0px;
}.hot .topic ul {box-sizing: border-box;padding-bottom: 15px;display: flex;flex-direction: column;flex-wrap: wrap;height: 198px;}.hot .topic ul li {width: 306px;height: 36px;line-height: 36px;
}.topic ul li a {color: #222;
}body .hot .topic ul li a:hover {color: #315efb;text-decoration: underline;
}.hot .topic ul li:nth-child(n+1) span {display: inline-block;width: 22px;height: 18px;line-height: 18px;font-size: 18px;font-family: Arial, Helvetica, sans-serif;
}.hot .topic ul li .top::before {padding: 1px 0 0 0;font-weight: 600;color: #f63051;content: "";font-family: 'icomoon';font-size: 12px;border-top: 2px solid #f63051;
}.hot .topic ul li .hot1 {color: #fe2d46
}.hot .topic ul li .hot2 {color: #f60;
}.hot .topic ul li .hot3 {color: #faa90e;
}.hot .topic ul li:nth-child(n+5) span {color: #9195a3;
}body .hot .topic ul li .topic_hot {margin-left: 6px;height: 16px;width: 16px;line-height: 16px;font-size: 12px;color: #fff;text-align: center;border-radius: 4px;font-weight: 200;background-color: #f60;
}body .hot .topic ul li .topic_new {margin-left: 6px;height: 16px;width: 16px;line-height: 16px;font-size: 12px;color: #fff;text-align: center;border-radius: 4px;font-weight: 200;background-color: #ff455b;}.aside_box {border-radius: 22px;position: fixed;background-color: #fbfbfb;right: 24px;bottom: 64px;height: 88px;width: 44px;
}.up {height: 44px;width: 44px;text-align: center;border-radius: 22px;
}.up:hover {box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1)
}.up img {margin-top: 12px;height: 20px;
}.mood {visibility: hidden;top: 5px;right: 50px;line-height: 30px;font-size: 13px;border-radius: 6px;box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1);width: 84px;height: 34px;position: absolute;background-color: #fff;
}.up:hover .mood {z-index: 1000;visibility: visible;
}.down {height: 44px;width: 44px;text-align: center;border-radius: 22px;
}.down:hover {box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1)
}.down img {margin-top: 12px;height: 24px;
}.qrcode {visibility: hidden;position: absolute;bottom: 0px;right: 50px;height: 102px;width: 279px;line-height: 30px;font-size: 13px;border-radius: 12px;box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1);background-color: #fff;
}.qrcode .qrcode_left {float: left;
}.qrcode .qrcode_left p {margin: 20px 0 0 20px;font-size: 20px;
}.qrcode .qrcode_left span {margin-left: -30px;color: #9195A3;
}.qrcode .qrcode_right {float: right;
}.qrcode .qrcode_right img {margin: 15px;height: 70px;
}.down:hover .qrcode {z-index: 1000;visibility: visible;
}footer {display: flex;justify-content: center;position: fixed;background-color: #fff;bottom: 0;height: 41px;width: 100%;align-content: center;text-align: center;
}footer ul {height: 41px;line-height: 41px;
}@media screen and (max-width: 1250px) {footer ul {height: 41px;}
}footer ul li div[class*="icon"],
footer ul li a,
footer ul li {color: #BBBBBB;display: inline-block;font-size: 10px;
}footer ul li a:hover {color: #222;
}.right{width: 50px;
}.chair {margin-top: 10px;margin-left: 15px;float: left;
}.chair img {height: 13px;
}.bottom_right{margin-top: 10px;float: left;height: 13px;width: 13px;
}footer .right .arrow2 {color: #000;height: 13px;width: 13px;
}footer .right .arrow2::after {content: "";font-size: 16px;color: #000;font-family: 'icomoon';
}
.imformation{visibility: hidden;text-align: left;z-index: 1000;height: 120px;width: 500px;position: absolute;top:-120px ;right: -50px;padding-top: 10px;font-size: 13px;border-radius: 12px;background-color: #fff;color: rgba(105,109,124);box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1);
}.imformation div{margin-left: 10px;
}.bottom_right:hover .imformation{z-index: 1000;visibility: visible;
}