自己仿制谷歌和百度首页
2017-05-12 16:05
239 查看
有些链接会指向别处，直接上代码，算是给前端开个头
<!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搜索" onclick="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="试试手气" onclick="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
9ca8
;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" onmouseover="show()" onmouseout="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" onclick="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>
效果就不上图了
<!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搜索" onclick="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="试试手气" onclick="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
9ca8
;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" onmouseover="show()" onmouseout="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" onclick="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>
效果就不上图了
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微软、谷歌、百度等公司经典面试100题[第1-60题]——自己的实现
- 谷歌和百度首页上的春节logo
- 如何让百度和谷歌搜索到自己的网站或博客
- 如何自己搭建百度，谷歌的网站
- 微软、谷歌、百度等公司经典面试100题[第1-60题]——自己的实现[转]
- 怎样才能让百度，谷歌等收录自己的网页
- 谷歌与百度首页图标搜集
- Java写的爬虫爬百度首页Code《转自零基础写Java知乎爬虫之先拿百度首页练练手》
- 【web基础2】别老打开百度了，自己做一个试试？
- 如何保持百度首页的关键字排名
- 【转】百度首页html练习
- 原生js编写设为首页兼容ie、火狐和谷歌
- 全新整理：微软、谷歌、百度等公司经典面试100题[第101-160题]
- 经典面试题（四）附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯
- 经典面试题（一）附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯
- 百度 谷歌 Twitter，这么多短链接服务（Short Url）到底哪家强？
- 网站排名百度首页的二三事
- 从零开始编写自己的C#框架（17）——Web层后端首页
- 百度——LBS.云 v2.0——创建自己的地理云数据