自己动手做百度首页
任务介绍
在本文中你将跟着笔者一步一步从零开始开发一个百度首页出来，如果想靠自己真正的开发出一个百度首页，你需要了解一些HTML和CSS的基本知识，例如什么是元素的浮动？什么是元素的定位？CSS中的伪类是什么？本文不涉及JavaScript的开发，所以本次开发出来的网页是一个静态网页，即便是静态网页我们做出来后也可以进行搜索，我们可以把搜索框中输入的数据提交给百度，让它帮我们处理即可，这项功能不是本文的核心，所以在文末仅做演示。要想创建一个自己的百度首页，需要一定的HTML+CSS的知识，如果你在阅读中遇到不理解的地方，请留言或私信笔者，笔者将很乐意为你解答。
效果预览
需要哪些前提条件？
工欲善其事必先利其器，所以我们需要准备一个开发工具，如果你是一个纯新手（人在床上躺，技术心中涨的不算哈），建议你使用功能完善的开发工具，如 VS Code，这是一个开源免费的编辑器，如果在访问或下载 VS Code 过程中非常缓慢，可以考虑通过其他软件下载站来下载，不过要注意甄别（一些不良下载站会有很多捆绑软件），如果有过网页开发经验的可以使用电脑系统自带的记事本即可进行编辑，笔者使用的是 VS Code，在此次开发中本文的代码结构和百度官网并不一致，而是笔者根据自己的理解进行的临摹开发。本文也会提供此次开发中的源代码文件，如果本文对你产生了帮助，不妨给笔者点个赞。
准备开始：
-
再开发前你可能需要一些素材，比如百度的logo文件，icon文件等。笔者对素材和源代码进行了整理，提供 免费下载 的支持，点击这里下载笔者的源代码文件 ，所以免费的大拇指能给点点吗？/doge
-
需要注意的是：提供的压缩包的代码文件可能和文章有细微差异，因为文章可能会进行优化修改，如阅读中遇到疑问可联系笔者。
-
本文在代码中会对一些需要注意的点以注释的方式进行说明，可留意查看。
-
文件的目录结构如下图所示，都处在同一目录下，这样我们可以方便的通过相对路径引入到我们的网页中
-
文件清单如下图所示
第一步：创建文件
- 创建文件并用记事本打开 你的右键菜单可能和图中不一致，不过笔者相信这并不能成为你新建html文件的障碍
- 如果是使用 VS Code 的小伙伴，右键文件时选择使用 Visual Studio Code 打开即可。
第二步：创建基本的网页结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
<link rel="stylesheet" href="/index.css">
<title>百度一下，你就知道</title>
</head>
<body>
</body>
</html>
现在我们来讲解一下各个标签代表的含义，帮助大家进行回忆一下之前的所学，算是热热身吧，考虑文章的篇幅问题，后面只针对重点内容进行解释，如有疑问请联系笔者
<!DOCTYPE html>声明文档的类型，在这里声明为一个html文档<html lang="zh">一个网页的根标签，lang="zh"则声明这是一个中文网页，如果写lang="en"部分浏览器会询问你是否翻译此网页<head>头标签，里面的内容是给浏览器看的，一般并不呈现给用户（<title></title>标签除外）<meta charset="UTF-8">声明文件的编码格式<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >添加网页标题的小图标，让我们的网页看起来和真正的百度看起来更像！href属性里面填写我们的文件地址，这里笔者用了一个相对路径<link rel="stylesheet" href="/index.css">引入我们的样式表<title>标签，网页的标题
第三步：网页结构分析
第四步：书写HTML结构代码
我们来看看实际的html结构长什么样子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/index.css">
<title>百度一下，你就知道</title>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="right-bar">
<a href="#">设置</a>
<a class="login-btn" href="#">登录</a>
</div>
<div class="left-bar">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">贴吧</a>
<a href="#">视频</a>
<a href="#">图片</a>
<a href="#">网盘</a>
<a href="#">更多</a>
</div>
</div>
<div class="center">
<div class="box logo">
<img src="Logo.png" alt="百度大logo">
</div>
<div class="box search">
<span></span>
<!-- 此处我们将提交网址设置为：https://www.baidu.com/s，将输入框的name属性设置为 wd，
例如输入：“你好”，提交时，系统会自动拼接为：https://www.baidu.com/s?wd=你好
然后跳转到百度的页面，百度进行搜索处理，就这样，我们自己的页面实现了搜索功能
-->
<form action="https://www.baidu.com/s">
<input type="text" name="wd" id="key"><input type="button" value="百度一下">
</form>
</div>
<div class="box hotkey">
<div class="title">
<a href="#" class="baidu-hot-search">百度热搜 ></a>
<a href="#">✌ 换一换 ✌</a>
</div>
<div class="list">
<ul>
<li class="one">1<a href="#">笔者究竟是何方神圣？</a></li>
<li class="two">2<a href="#">自己动手开发一个百度首页</a></li>
<li class="three">3<a href="#">笔者身高竟接近两米！</a></li>
</ul>
<ul>
<li>4<a href="#">这个网页也能进行搜索？何妨一试</a></li>
<li>5<a href="#">读完文章后，你会点赞吗？</a></li>
<li>6<a href="#">快来打造属于自己的首页吧！</a></li>
</ul>
</div>
</div>
</div>
<div class="foot">
<p>
<a href="#">且将新火试新茶</a>
<a href="#">诗酒趁年华</a>
<a href="#">百度的网页做好了</a>
<a href="#">我们一起加油吧</a>
<a href="#">一起向未来</a>
</p>
</div>
</div>
</body>
<script>
/* 获取到输入框中用户输入的文本传递给百度进行搜索处理 */
document.getElementsByTagName("input")[1].addEventListener('click', function() {
let searchTxt = document.getElementsByTagName("input")[0].value;
window.location.href = "https://www.baidu.com/s?wd=" + searchTxt;
})
</script>
</html>
书写玩HTML的结构以后用浏览器打开我们的文件可以看到如下图的样子，这和真正的百度还有很大的差异，接下来我们给网页添加样式
第五步：编写CSS样式表
让我们来看看样式文件的代码吧
* {
/* 清除元素的一些默认行为，因为我们实际开发过程中并不希望元素具有默认样式，而是应该由我们来控制元素应该怎么显示 */
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
font: 13px Arial, sans-serif;
min-width: 768px; /*设置界面的最小宽度
，防止过小导致的布局错乱*/
}
.wrap .top {
font-size: 0;/* 已知空白字符在网页中会输出一个空格，
会对我们的网页布局产生一定的影响，
所以我们把字体大小改为0，在子元素上
设置需要的字体大小来解决空白符导致
的布局不准确问题 */
padding: 5px 24px 0;
}
.wrap .top .left-bar {
height: 60px;
line-height: 60px;
}
/*注意标签摆放的位置，我们此处只用浮动右边的元素，让元素脱离标准文档流，后面的div会自动跑去左边*/
.wrap .top .right-bar {
float: right;
height: 60px;
line-height: 60px;
}
.wrap .top .right-bar .login-btn {
padding: 5px 10px;
margin-left: 10px;
text-align: center;
background-color: #4e6ef2;
color: #fff;
border-radius: 5px;
}
.wrap .top .right-bar .login-btn:hover {
background-color: #4662d9;
}
.wrap .top a {
font-size: 13px;
line-height: 23px;
color: #343434;
margin: 19px 24px 0 0;
}
.wrap .top a.login-btn {
margin-right: 0;
}
.wrap .top a:hover {
color: #315efb;
}
/* 搜索区 */
.wrap .center {
width: 656px;
margin: 0 auto;
overflow: hidden;
}
.wrap .center .box {
width: 654px;
}
.wrap .center .logo {
width: 270px;
margin: 20px auto 0;
}
.wrap .center img {
width: 270px;
height: 129px;
}
/* 搜索框 */
.wrap .center .search {
padding: 10px 0 20px;
position: relative;/*子元素如果是绝对定位，
会以最近的一个定位属性值非static的元素进行定位，
我们希望子元素已这个div为基准进行定位，
而relative又不会影响原有的文档布局，
所以设置为relative*/
}
.wrap .center .search span {
position: absolute;
top: 22px;
right: 120px;
width: 24px; /*一个inline的元素绝对定位后会变为block元素，
所以此处的宽高是会生效的*/
height: 20px;
background: url(/iconlist.png) 0 47px;
}
.wrap .center .search span:hover {
background: url(/iconlist.png) 0 23px;
/*通过改变背景图片的定位，来决定显示长图片中的哪一部分
可称为CSS精灵图*/
}
.wrap .center form #key {
width: 550px;
height: 44px;
border-radius: 10px 0 0 10px;
border-color: #c4c7ce;
border-style: solid;
box-sizing: border-box;
border-right: none;
vertical-align: middle;/*解决按钮和输入框高度不一致的问题，
让两个元素在同一基线进行对齐，输入框和按钮都要加*/
outline: none;/*去除输入框选中后的边框样式*/
padding: 12px 87px 12px 16px;
}
.wrap .center form #key:hover {
border-color: #a7aab5;
}
.wrap .center form #key:active {
border-color: #4e6ef2;
}
.wrap .center form input[type="button"] {
background-color: #4e6ef2;
color: white;
border: none;
border-radius: 0 10px 10px 0;
height: 44px;
width: 104px;
vertical-align: middle;/*解决按钮和输入框高度不一致的问题，
让两个元素在同一基线进行对齐，输入框和按钮都要加*/
font-size: 17px;
font-weight: 400;
}
.wrap .center form input[type="button"]:hover{
background-color: #4662d9;
}
/* 热搜区 */
.wrap .hotkey {
padding-top: 20px;
}
.wrap .hotkey .title a {
color: #000;
font-weight: bolder;
font-size: 15px;
}
.wrap .hotkey .title a:last-child {
color: #626675;
font-weight: normal;
font-size: 14px;
float: right;
}
.wrap .hotkey .title a:hover {
color: #00e;
}
.wrap .center .hotkey ul {
padding-top: 5px;
width: 325px;
display: inline-block;
}
.wrap .center .hotkey ul li{
height: 36px;
line-height: 36px;
font-size: 18px;
color: #9195a3;
}
.wrap .center .hotkey ul li a{
color: #222;
font-size: 16px;
padding-left: 20px;
}
.wrap .center .hotkey ul li a:hover{
color: #00e;
text-decoration: underline;
}
/*预定义热搜前三名的数字显示颜色，
因为这里只是预定了一个类样式，
优先级不够高，所以我们加!important关
键字提升优先级，确保样式生效*/
.one{
color: #fe2d46!important;
}
.two{
color: #f60!important;
}
.three{
color: #faa90e!important;
}
.wrap .foot{
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
height: 40px;
line-height: 40px;
}
.wrap .foot a{
color: #bbb;
margin-right: 14px;
font-size: 12px;
}
.wrap .foot a:hover{
color: #222;
}
现在我们看看加上样式后的网页，怎么样？有没有被惊艳到。CSS的魅力就是这么的大，我们没有再对html做修改，仅仅使用CSS对网页进行了如下的布局
第六步：小结
本文使用到的技术主要涉及：html常用标签 、 边框边距 、字体 、元素浮动、元素定位、form表单、元素显示模式display、伪类、CSS精灵、元素的垂直对齐、标签选择器、类选择器、属性选择器、父子选择器 、背景与颜色 等，算是学习 HTML 和 CSS 过程中的一次小练习，巩固一下之前所学的知识并做以记录备查，百度首页想要临摹并不复杂，布局简单易上手，再配合一些小手段（让自己的百度可以进行搜索），容易获得成就感，也算是对学习结果的一种肯定。
不积跬步，无以至千里；不积小流，无以成江海。 ——荀子
学习没有捷径，对笔者而言，多练习多积累才是学习的正确方式，此文是学习前端的一次综合练习，分享出来和大家一起进步，学习的路途中我们并不孤独，一起加油向未来！
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
