Web前端：百度首页克隆 - 前端开发练习-CSDN博客

本文链接：https://blog.csdn.net/2401_87008233/article/details/147374041

一、项目概述

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.css

3.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;

}