html+css实现百度首页（简单版）

从头开始学前端，先从小事做起，多写代码。第一版：使用基本的html和css元素，在学完《html+css快速上手》后，可以将基本的元素配齐，和基本样式基本布局，但缺少对于块元素的排版，圆角边框等等。代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name

returnadsss

10255人浏览 · 2021-12-25 16:19:32

returnadsss · 2021-12-25 16:19:32 发布

从头开始学前端，先从小事做起，多写代码。
第一版：使用基本的html和css元素，在学完《html+css快速上手》后，可以将基本的元素配齐，和基本样式基本布局，但缺少对于块元素的排版，圆角边框等等。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="nav">
		<div class="navleft">
			<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 class="navright">
	    	<a href="#">设置</a>
	    	<a href="#" id="login">登录</a>
	    </div>
	    <div class="clear"></div>
	</div>
	<div class="main">
	    <div class="pic">
		    <img src="images/1.png" alt="">
	    </div>
	    <div class="search">
		    <input type="text"/>
		    <input type="button" value="百度一下"/>
	    </div>
	</div>
	<div class="foot">
		<a href="#">关于百度</a>
		<a href="#">about BaiDu</a>
		<a href="#">使用百度必读</a>
		<a href="#">帮助中心</a>
		<a href="#">京备10212222200</a>
	</div>
</body>
</html>

Css代码

*{
	margin: 0;
	padding: 0;
}
.navleft{
	float: left;
}
.navright{
	float: right;
}
.nav a{
	text-decoration: none;
	color: black;
	margin: 10px;
	width: 30px;
	height: 20px;
}
.nav a:hover{
	color: blue;
}
#login{
	background-color: #4E6EF2;
	color: white;
}
.clear{
	clear: both;
}
.main{
	text-align: center;
}
.pic{
	text-align: center;
}
.search{
	text-align: center;
}
.foot{
	position: fixed;
	bottom: 0px;
}
.foot a{
	text-decoration: none;
	color: black;
}

第二版效果如下：
在这里插入图片描述
代码如下，基本只改了CSS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="nav ">
		<div class="navleft">
			<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 class="navright">
	    	<a href="#">设置</a>
	    	<a href="#" id="login">登录</a>
	    </div>
	</div>
	<div class="main">
	    <div class="pic">
		    <img src="images/1.png" alt="">
	    </div>
	    <div class="search">
	    	<div class="holder">
		        <input type="text" id="searchcontent"/>
		        <a href="#">百度一下</a>
		    </div>
	    </div>
	</div>
	<div class="foot">
		<a href="#">关于百度</a>
		<a href="#">about BaiDu</a>
		<a href="#">使用百度必读</a>
		<a href="#">帮助中心</a>
		<a href="#">京备10212222200</a>
	</div>
</body>
</html>

CSS代码：

*{
	margin: 0;
	padding: 0;
}
.navleft{
	float: left;
	height: 40px;
}
.navright{
	float: right;
	height: 40px;
}
.nav{
	*zoom:1;
}
.nav::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
.navleft a{
	font: 13px/23px Arial,sans-serif;
	float: left;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding: 5px;
}
.navright a{
	font: 13px/23px Arial,sans-serif;
	float: right;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding: 5px;
}
.nav a:hover{
	color: blue;
}
#login{
	background-color: #4E6EF2;
	color: white;
	border-radius: 5px;
}
.main{
	text-align: center;
}
.pic{
	text-align: center;
}
.pic img{
	width: 200px;
	height: 100px;
}
.search{
	text-align: center;
	width:100% ;
	height: 30px;
}
.foot{
	position: fixed;
	bottom: 0px;
}
.foot a{
	padding-left: 150px;
	text-decoration: none;
	color: black;
}
.search{
	text-align: center;

}
.holder{
	display: inline-block;
}
#searchcontent{
	height: 36px;
	width: 500px;
	float: left;
	border-radius: 10px 0 0 10px;
	border-width: 1px;
	border-color: CEC7C4;
	border-right: 0px;
}
.search a{
	text-decoration: none;
	display: inline-block;
	width: 100px;
	/*这里也可以使用基线对齐，height36px*/
	height: 38px;
	line-height: 36px;
	text-align: center;
	border-radius: 0px 5px 5px 0px;
	font-family: "微软雅黑";
	cursor: pointer;
	background-color: #4E6EF2;
	color: white;
	float: left;
}
.search a:hover{
	background-color: blue;
}

还有很多可以优化的，比如初始化浏览器样式，页面导航栏更加美化，注意样式表书写顺序，合并相同的定义，利用继承合并属性，去除多余标签等，这里就懒得一一实现了，毕竟模仿网页和自己构思个页面还是不一样，模仿贵在通过自己的实践达到相似效果，看源码会禁锢自己的想法，自己构思则可以多看源码，学习他人所长，这些编码细节我会多多在以后的编程实践中注意一下。按理应该优化到和百度首页一模一样的，但我决定加快进度，从下一个项目开始注意吧。
多说两句：今天看到一篇文章，大意是“程序员，别再卷了”，个人感觉，计算机和其他行业一样，都是一个很专业的职业，没有什么工作是轻松的，没有献身的决心，做什么事都做不好，世界虽大，并没有地方可供我们逃避。