百度页面仿写总结
一、项目概述
本次百度页面仿写项目主要聚焦于 HTML 结构和 CSS 样式的实现，涵盖了搜索框、导航栏、热搜榜、页脚、浮动导航等核心模块。
二、搜索框设计
1. 占位符左上角对齐
默认的 input 占位符是垂直居中的，想要左上角对齐需要用 textarea 替代 input。
.search-input{padding:12px 16px;vertical-align:top;}2. 语音输入悬浮提示
鼠标悬停显示"语音输入"提示文字。
.tubiao i p{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:200px;white-space:normal;visibility:hidden;}.tubiao i:hover p{visibility:visible;}三、导航栏设计
1. 导航栏文字垂直对齐
确保导航栏左右两端的文字在同一水平线上，关键在于给容器和子元素都设置垂直居中。
.nav{display:flex;justify-content:space-between;align-items:center;height:48px;}.nav .left ul{display:flex;align-items:center;height:100%;}.nav .right{display:flex;align-items:center;}2. 下拉菜单设计
鼠标悬停显示下拉菜单，使用 visibility 而不是 display，避免子元素无法点击。
.nav li{position:relative;}.nav li .dropdown{position:absolute;top:100%;right:0;visibility:hidden;opacity:0;transition:all 0.3s;}.nav li:hover .dropdown{visibility:visible;opacity:1;}3. 悬浮窗与导航栏间隙处理
悬浮窗与导航栏保持一定间隙，但不能因此导致悬浮窗无法点击。解决方案是使用伪元素扩大 hover 区域。
.nav .left ul li:last-child{position:relative;}/* 使用伪元素扩大hover区域 */.nav .left ul li:last-child::after{content:'';position:absolute;bottom:-10px;left:0;right:0;height:18px;}.nav .left ul li:last-child .floatbox{position:absolute;top:calc(100% + 8px);right:0;}四、热搜榜布局
1. 双列垂直排列
使用 CSS Grid 实现热搜内容的双列布局，关键在于 grid-auto-flow: column 实现垂直为主轴的排列。
.resou ul{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,30px);grid-auto-flow:column;gap:10px;}2. 热搜切换（纯 CSS 实现）
使用 checkbox 配合兄弟选择器实现两组内容的切换，无需 JavaScript。
.hot-toggle{display:none;}.comment2{display:none;}.hot-toggle:checked ~ .resou .comment1{display:none;}.hot-toggle:checked ~ .resou .comment2{display:block;}五、页脚响应式设计
1. 内容居中与不换行
.footer{display:inline-flex;justify-content:center;gap:10px;white-space:nowrap;}2. 窗口缩小时依次隐藏内容
使用媒体查询从右往左依次隐藏内容，在换行之前就隐藏，保证页面布局美观。
@media(max-width:1000px){.hide-4{display:none;}}@media(max-width:900px){.hide-3{display:none;}}@media(max-width:800px){.hide-2{display:none;}}@media(max-width:700px){.hide-1{display:none;}}六、页面级滚动条
页面缩小时出现水平滚动条，方便查看完整内容。
html, body{min-width:1200px;overflow-x:auto;}注意：只需要在 body 设置 overflow-x，不要在 html 也设置，否则会出现两个滚动条。
七、浮动导航按钮
1. 悬浮内容显示
.floatp1, .floatp2{position:absolute;right:100%;margin-right:15px;opacity:0;visibility:hidden;transition:all 0.3s;}.floatnav:nth-child(1):hover ~ .floatp1{opacity:1;visibility:visible;}八、字体图标应用
1. 引入多个图标库
通过不同的类名前缀区分不同图标库。
.iconfont{font-family:'iconfont';}.iconfont2{font-family:'iconfont2';}
