Web前端：百度首页克隆 - 前端开发练习
一、项目概述
1.1 练习目标：通过实现百度首页经典布局掌握HTML+CSS基础布局能力
1.2 功能要求：
- 顶部导航栏布局
- 中央搜索区布局
- 底部信息栏布局
- 基础交互效果
二、技术栈
- HTML5 语义化标签
- CSS3 样式
- 传统布局方案（浮动布局）
- 基础CSS Reset
三、实现步骤
3.1 项目初始化
mkdir baidu-clone
cd baidu-clone
touch index.html
mkdir css img
touch css/reset.css css/home.css3.2 文件结构
├── css/
│ ├── reset.css # 浏览器样式重置
│ └── home.css # 主样式文件
├── img/ # 图片资源
├── index.html # 主页面3.3 HTML结构解析
<!-- 顶部导航区 -->
<div class="top-nav"><ul class="nav-list"><li><a href="#">更多产品</a></li><!-- 其他导航项... --></ul>
</div><!-- 搜索区 -->
<div class="search-area"><div class="logo"><img src="./img/baidu.png" alt="百度LOGO"></div><div class="search-box"><input type="text"><button>百度一下</button></div>
</div><!-- 底部信息 -->
<footer class="footer"><!-- 二维码和版权信息 -->
</footer>3.4 CSS核心实现要点
3.4.1 导航栏布局
/* 右浮动布局实现 */
.nav-list li {float: right;margin-right: 25px;
}/* 悬停交互效果 */
.nav-list li:hover {background: #315efb;color: white;
}3.4.2 搜索框布局
.search-box {width: 682px;border: 1px solid #ccc;position: relative;
}.search-box input {width: 100%;height: 52px;padding-left: 15px;
}.camera-icon {position: absolute;right: 28px;top: 16px;
}3.5 核心挑战与解决方案
1.浮动布局管理
- 问题：浮动元素导致父容器高度塌陷
- 方案：使用
clear: both清除浮动
<div style="clear: both;"></div>2.垂直居中实现
- 使用
margin: 0 auto实现水平居中 - 使用padding调整垂直间距
3.跨浏览器样式一致性
- 使用CSS Reset初始化默认样式
/* 重置所有元素的内外边距 */
body, html, ul, li,... {margin: 0;padding: 0;
}四、完整代码展示
1.index.html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="./css/reset.css" /><link rel="stylesheet" href="./css/home.css" /></head><body><!-- 右上角内容 --><div><ul class="new"><li><a href="">更多产品</a></li><li><a href="">设置</a></li><li><a href="">登录</a></li><li><a href="">学术</a></li><li><a href="">贴吧</a></li><li><a href="">视频</a></li><li><a href="">hao123地图</a></li><li><a href="">新闻</a></li></ul></div><!-- 清除浮动 --><div style="clear: both;"></div><!-- 中间大LOGO --><div class="logo"><img src="./img/baidu.png" alt="百度" /></div><!-- 搜素栏 --><div><div class="sousuo"><input class="text" type="text" /><a href="https://www.baidu.com"><img src="./img/camera.png" alt="照相机" /></a></div><button class="button"> 百度一下</button></div><!-- 清除浮动 --><div style="clear: both;"></div><!-- 底部标签 --><footer class="dibu"><div><img src="./img/erweima.png" alt="二维码" /></div><p style="color: #9f9f9f; margin-top: 10px;">百度</p><div class="dibuneiron"><p class="xiahuaxian">把百度设为主页</p><p class="xiahuaxian">关于百度</p><p class="xiahuaxian">About Baidu</p><p class="xiahuaxian">百度推广</p></div><div class="dibuneiron"><p>©2018 Baidu</p><p class="xiahuaxian">使用百度前必读</p><p class="xiahuaxian">意见反馈</p><p class="xiahuaxian">京ICP证030173号</p><p>京公网安备11000002000001</p></div></footer></body>
</html>2.rest.css代码：
body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
header,
menu,
section,
p,
input,
td,
th,
ins {padding: 0;margin: 0;
}a {text-decoration: none;color: #333;
}img {vertical-align: top;
}ul,
li {list-style: none;
}button {outline: none;border: none;
}3.home.css代码：
.new>li {font-size: 14px;float: right;margin-right: 25px;text-decoration: black underline;
}.new>li:hover a {background-color: #315efb;text-decoration: white underline;color: white;}.logo {text-align: center;
}.logo>img {image-rendering: auto;
}.sousuo {border: 1px solid #ccc;height: 52px;width: 682px;margin-left: 320px;float: left;
}.text {padding-left: 15px;font-size: 16px;border: 0;height: 52px;width: 682px;
}.text:active {border: 0;
}.sousuo a>img {width: 20px;height: 20px;float: right;margin-top: 16px;margin-right: 28px;z-index: 1;position: relative;top: -52px;}.button {float: left;height: 54px;width: 140px;font-size: 20px;color: white;background-color: #4e6ef2;
}.dibu {margin: 0px auto;text-align: center;margin-top: 247px;
}.dibu div>img {width: 100px;height: 100px;
}.dibuneiron {margin-top: 15px;
}.dibuneiron>p {color: #9f9f9f;display: inline-block;
}.xiahuaxian {text-decoration: #9f9f9f underline;}