简易版百度首页的制作

先给出我的网页成品图：

先说我的网页布局的几个要点:

为了防止各个块之间互相造成影响，我们几乎整个网页都用div模块组合而成.
为了在不同分辨率的屏幕和缩放的网页上保持原网页各元素相对位置不产生改变，居中的要么选择<center>居中，要么使用margin属性，不过要使用百分比。
小图标都是用的截图抓取，使用div包含其，然后调整布局就可以。
具体字体大小，字体颜色等到百度页面F12开发者模式抓取就可以了。

网页布局的分块：

top分块：包含新闻，hao123等div，input模块也在其中。

百度图标分块：<center>居中。

复合模块：包含输入框，摄像机图片div，百度一下提交框三个组成。此处因为设计的问题并不好看，可以进行改进，改进方法如下:

先使用一个大的div包含上述所提到的三个模块。

输入框居中且去边框。

相机图片居中。

后直接跟提交框，改变提交框像素以和div符合。

end模块：包含二维码和后两行。我将二维码看作一个div，下面两行各看作一个div，其中的每组文字也看成一组div，然后根据观察的像素调整div大小进行适配组合以达到效果。但不建议采用此方法。最后两行div内，各行中每组文字都用<a>元素包含，有空格处用&nbsp调整就好。

form表单提交的action为https://www.baidu.com/s，为什么要加s呢，因为我们搜索是模拟提交百度搜索请求。

使用form表单提交请求，?后附加的参数name为input的name，value为input中输入的值，name=value。而我们观察上方图片，可以发现?后加的是wd=CSDN,所以我们使input得name为wd即可。

以下为代码：

<html>
	<head>
		<title>
			百度一下,你就知道
		</title>
		<link href="../images/icon.ico" rel="shortcut icon" type="image/x-icon"/>
		<style>
			.top{
				height:100px;
				width:100%;
			}
			.menu{
				text-decoration:underline;
				height:50px;
				width:50px;
				line-height:50px;
				float:right;
				font-size:13px;

			}
			.more{
				float:right;
				height:50px;
				width:50px;
				font-size:14px;
				margin-right:20px;
				margin-top:15px;
			}
			.bTitle{
				width:100%;
				margin-top:10%;
			}
			._all{
				height:40px;
				width:645px;
			}
			._in{
				float:left;
				height:40px;
				width:500px;
			}
			._photo{
				height:40px;
				width:40px;
				margin-left:-2px;				
				float:left;		
			}
			._search{
				float:left;
			}
			._bottom{
				margin-top:13%;
				width:100%;
			}
			._dimension{
				width:100%;
				height:108px;
			}
			._four{
				width:400px;
				height:25px;
				margin-top:10px;
			}
			._more2{
				width:93px;
				height:25px;
				line-height:25px;
				text-decoration:underline;
				float:left;
				font-size:10px;
				color:#999;
			}
			._five{
				width:545px;
				hight:22px;
			}
			._more3{
				float:left;
				line-height:22px;
				font-size:10px;
				color:#999;
				height:22px;
			}
			._picture{
				float:left;
				height:22px;
				width:22px;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div class="more">
				<input style="background-color:#38f;color:#fff;border:none;width:60px;height:23px" type="button" value= "更多产品">
			</div>
			<div class="menu">设置</div>
			<div class="menu">登录</div>
			<div class="menu"><b>学术</b></div>
			<div class="menu"><b>贴吧</b></div>
			<div class="menu"><b>视频</b></div>
			<div class="menu"><b>地图</b></div>
			<div class="menu"><b>hao123</b></div>
			<div class="menu"><b>新闻</b></div>
		</div>
		<center>
		<div class="bTitle">
			<img src="../images/baidu.png"/>
		</div>
		</center>
		<form action="https://www.baidu.com/s">
			<center>
				<div class="_all">
					<div class="_in"><input id="wd" name="wd" type="text" 								style="height:40px;width:500px;"></div>
					<div class="_photo"><img src="../images/photo.png" height=40 width=40/></div>
					<div class="_search"><input type="submit" value="百度一下" style="background-color:#38f;color:#fff;width:107px;height:40px;"><div>
				</div>
			</center>
		</form>
		<div class="_bottom">
			<center>
				<div class="_dimension">
					<img src="../images/二维码.png"/>
				</div>
				<div class="_four">
					<div class="_more2" style="width:121px">把百度设为主页</div>
					<div class="_more2">关于百度</div>
					<div class="_more2">About Baidu</div>
					<div class="_more2">百度推广</div>
				</div>
				<div class="_five">
					<div style="width:85px;" class="_more3">©2018 Baidu</div>
					<div style="width:87px;" class="_more3"><ins>使用百度前必读</ins></div>
					<div style="width:53px;" class="_more3"><ins>意见反馈</ins></div>
					<div style="width:102px" class="_more3">京ICP证030173号 </div>
					<div class="_picture"><img src="../images/small1.png"/></div>
					<div style="width:174px;" class="_more3"><ins>京公网安备11000002000001号</ins></div>
					<div class="_picture"><img src="../images/small2.png"/></div>
				</div>
			</center>
		</div>	
	</body>
</html>

简易版百度首页的制作

猜你喜欢