百度首页模仿制作（html）详解

相信大姐学习html这一门语言的第一步一般都是做一个百度首页或者菜鸟教程首页（菜鸟教程首页模仿戳这里）什么的吧，下面就来分享一下我所写的百度首页的模仿过程：

1、分析布局，这里我将他的布局分为三大块，上中下各一个div块

2、往div块中添加详细内容，设置样式等等

效果图：

百度首页模仿制作（html）详解

源代码：

<!DOCTYPR html>
<html>
	<head>
		<title>百度一下，你就知道</title>
		<style type="text/css">
			body{
				height:100%; 
				width:100%;  
				margin:0; 
				padding:0;
			}
			
			.main{
				width:100%; 
				height:100%;
				margin:0; 
				padding:0;
			}
			
			.menu{
				text-align:right;
			}
			
			a{
				text-decoration:none;
			}
			
			.middle{
				text-align:center;
				width:100%; 
				height:100px;
				margin-top:130px;
			}
			
			.input{
				    border: 1px solid #b6b6b6;
				width:474px;
				height:36px;
				font-size:20px;
			}
			.img{
				align:middle;
				border:0;  
				width:275px;
				height:140px;
			}
			.submit{
				background-color:#3385ff;
				height:38px;
				font-size:20px;
				color:white;
				border:0
			}
		</style>
	</head>
	<body>
	<div style="text-align:right;">
		<div class="menu">
			<a href="http://www.nuomi.com/?cid=002540">糯米</a>
			<a href="http://news.baidu.com">新闻</a>
			<a href="http://www.hao123.com">hao123</a>
			<a href="http://map.baidu.com">地图</a>
			<a href="http://v.baidu.com">视频</a>
			<a href="http://tieba.baidu.com">贴吧</a>
			<a href="https://passport.baidu.com/v2/?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
			<a href="http://www.baidu.com/gaoji/preferences.html">设置</a>
			<a href="http://www.baidu.com/more/">更多产品</a>
		</div>
	</div>

	<div class="middle">
		<form action="http://www.baidu.com/baidu" target="_blank">
			<a href="https://www.baidu.com/" target="_blank"  align="center">
				<img src="https://www.baidu.com/img/bd_logo1.png" alt="Baidu" class="img">
			</a>
			<br>
			<input type="text" class="input"  name="word">
			<input type="submit" value="百度一下" class="submit" href="https://www.baidu.com/" > 
		</form>
	</div>
	<div align="center" style="bottom:0;margin-top:300px;">
		<div>
			<a id="setf" href="//www.baidu.com/cache/sethelp/help.html" target="blank">把百度设为主页</a>
			<a href="http://home.baidu.com">关于百度</a>
			<a href="http://ir.baidu.com">About&nbsp;&nbsp;Baidu</a>
			<a href="http://e.baidu.com/?refer=888">百度推广</a></p>
			<p>©2016&nbsp;Baidu&nbsp;<a href="http://www.baidu.com/duty/">使用百度前必读</a>&nbsp;<a href="http://jianyi.baidu.com/">意见反馈</a>&nbsp;京ICP证030173号&nbsp;</p>
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
		</div>
	</div>
	</body>
</html>

百度首页模仿制作（html）详解

相关推荐