百度页面仿写总结

百度页面仿写总结一、项目概述本次百度页面仿写项目主要聚焦于 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;}