自己仿制谷歌和百度首页

有些链接会指向别处,直接上代码,算是给前端开个头

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		#div1{
			position: absolute; 
			width:350dp; 
			height:200dp; 
			left: 38%; 
			top: 17%;
		}
		#div2{
			position: relative;
			width: 602px;
			height: 30px;
			left: -100px;
			top: 0px;
		}
		#input{
			position: relative;
			width: 542px;
			height: 40px;
			left: 0px;
		}
		#p{
			font-size: 12px;
			color: gray;
		}
	</style>
	<title>Google</title>
</head>
<body>
	<div id="div0" style="text-align: right;">
		<a style=" color: gray;font-size: 12px;" href="https://mail.qq.com/">Gmail</a>
		<a style=" color: gray;font-size: 12px;" href="http://image.baidu.com/">图片</a>
		<img src="google\photo.jpg" style="height: 12px;width: 12px">
	</div>
	<div id="div1" >
		<img src="google\googlelogo_color_120x44dp.png">
		<div id="div2">
			<input id="input" type="text" value="">
			<img src="google\huatong.png" style="width: 50px;height: 40px">
		</div>
		<br>
		<br>
		<br>
		<div id="div3">
			                 
			<input id="btn1" type="button" value="google搜索" οnclick="window.location.href='https://www.baidu.com'" style="width: 100px;height: 40px;color:  gray; text-align: center; background-color: white ">
			<input id="btn2" type="button" value="试试手气" οnclick="window.location.href='http://www.xidian.edu.cn/'" style="width: 100px;height: 40px;color:  gray; text-align: center; background-color: white ">
			                 
		</div>
	</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<p id="p">   广告   商务   Google大全                                                                                                                                                                                                                                                                                           隐私权   条款   设置   Google.com  in  English</p>
</body>
</html>

下面是假百度


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度一下,你就知道</title>
	<style type="text/css">
		#div1{
			position: absolute; 
			width:550dp; 
			height:200dp; 
			left: 40%; 
			top: 10%;
		}
		#div2{
			position: relative;
			width: 600px;
			height: 30px;
			left: -110px;
			top: 0px;
		}
	</style>
	<script type="text/javascript">
		var div0 = document.getElementById('div0');
		function show(){

		}

		function gone(){

		}
	</script>
</head>
<body>
	<div id="div" style=" font-size: 12px;color: black;">
		  西安:天气|    <a href="http://vip.baidu.com/act/xuyuan" style="color: black;font-size: 12px">宝箱</a>    <a href="" style="color: black;font-size: 12px">换肤</a>    <a href="" style="color: black;font-size: 12px">消息</a>
	</div>
	<div id="div0" style="text-align:right;font-size: 12px;color: black;position: absolute;left:69%;top: 0%">
			<a href="http://news.baidu.com/" style="color: black;font-size: 12px">新闻</a>    <a href="https://www.hao123.com/" style="color: black;font-size: 12px">hao123</a>    <a href="http://map.baidu.com/" style="color: black;font-size: 12px">	地图</a>    <a href="http://v.baidu.com/" style="color: black;font-size: 12px">视频</a>    <a href="http://tieba.baidu.com/" style="color: black;font-size: 12px">贴吧</a>    
			<a href="http://xueshu.baidu.com/" style="color: black;font-size: 12px">学术</a>    <a href="http://i.baidu.com/" style="color: black;font-size: 12px">诺坎普的酋长</a>  <a href="" style="color: black;font-size: 12px">设置</a>    
			<input type="button" value="更多产品" style="color: white;background: blue" οnmοuseοver="show()" οnmοuseοut="gone()">
	</div>
	<hr>
	<div id="div6">
		
	</div>
	<div id="div1">
		<img src="google\bd_logo1_31bdc765.png" style="height: 155px;width: 324px;">
		<div id="div2">
			<input type="text" value="" style="width: 500px;height: 35px">
			<input type="button" value="百度一下" style="height:40px;width: 80px;color:white;background: blue" οnclick="window.location.href='https://www.baidu.com'">
		</div>
	</div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<p style="text-align: center;color: gray;font-size: 12px">设为首页  @2017BaiDu  使用百度前必读  意见反馈  京IPC证 
		<br>北京公安备号
	</p>
</body>
</html>

效果就不上图了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值