用HTML和css模仿百度首页

 

 

 

html

 

 

<!DOCTYPE html>
<html>
	<head>
		<title>百度一下,你就知道</title> 
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/css1.css" />
	</head>
	<body>
		<div style="width:100%;height:760px;">
			<div style="width:100%;height:80px;">   <!-- 头 -->
				<div style="width:540px;height:60px;float:right;margin-top:20px;">
					<div style="width:90px;height:60px;float:left;text-align:center">
						<a href="http://news.baidu.com/" target="_blank"><b>新闻</b></a>
					</div>
					<div style="width:90px;height:60px;float:left">
						<a href="https://www.hao123.com/" target="_blank"><b>hao123</b></a>
					</div>
					<div style="width:90px;height:60px;float:left">
						<a href="https://map.baidu.com/" target="_blank"><b>地图</b></a>
					</div>
					<div style="width:90px;height:60px;float:left">
						<a href="https://tieba.baidu.com/index.html" target="_blank"><b>贴吧</b></a>
					</div >
					<div style="width:90px;height:60px;float:left">
						<a href="http://xueshu.baidu.com/" target="_blank"><b>学术</b></a>
					</div>
					<div style="width:90px;height:60px;float:left">
						<a href="https://www.baidu.com/more/" target="_blank"><b>更多产品</b></a>
					</div>
				</div>
			</div>
			<div style="width:100%;height:680px;">   <!-- 身体 -->
				<div style="width:600px;height:190px;float:left;margin-left:450px;margin-top:100px;">  <!-- 上 -->
					<div style="width:600px;height:120px;">
						<div style="width:300px;height:100px;margin-left:150px;margin-top:10px;float:left">  <!-- logo -->
							<img src="img/logo.png" alt="logo"  width="300"  height="100" />
						</div>
					</div>
					<div style="width:603px;height:40px;border:1px solid gray;">
						<form action="http://www.baidu.com/s" method="get" target="_blank">
							<input name="wd" type="text" class="text_s" />
							<img src="img/1.png" height="40px" width="40px" class="img_camer" /><input name="ok" type="submit" class="submit_ok" value="百度一下" />
						</form>
					</div>
				</div>
				<div style="width:600px;height:190px;float:left;margin-left:450px;margin-top:200px;">  <!-- 下 -->
					<div style="width:80px;height:102px;float:left;margin-left:260px;margin-top:0px;">
						<img src="img/80102.png" height="102" width="80" />
					</div>
					<div style="width:500px;height:25px;float:left;margin-left:50px;margin-top:10px;">
						<a href="https://www.baidu.com/cache/sethelp/help.html" target="_blank" class="botto_a" >把百度设为主页</a>
						<a href="http://home.baidu.com/" target="_blank" class="botto_a" >关于百度</a>
						<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome" target="_blank" class="botto_a" >About Baidu</a>
						<a href="http://e.baidu.com/?refer=888" target="_blank" class="botto_a" >百度推广</a>
					</div>
					<div style="width:500px;height:25px;float:left;margin-left:50px;margin-top:10px;">
						<a href="https://www.baidu.com/duty/" target="_blank" class="botto_a" >使用百度前必读</a>
						<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank" class="botto_a" >京公网安备11000002000001号</a>
					</div>
				</div>
			</div>
		</div>		
	</body>
</html>

 

 

css

 

 

*{
	margin:0;
	padding:0;
}
.botto_a{
	margin-left:40px;
	font-size:13px;
	color:gray;
}
.text_s{
	float:left;
	width:500px;
	height:40px;
	margin-left:0;
	margin-top:0;
	border:none;
}
.submit_ok{
	float:left;
	width:63px;
	height:41px;
	background:#3385ff;
	letter-spacing:1px;
	color:white;
	border:none;
}
.img_camer{
	float:left;
}

 

 

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值