一、项目概述
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;
}
