自制模仿谷歌搜索UI的网页

里面比较重要、有难度的知识点很少，就不作解释了，先看代码吧！
*由于这是自己随便编的一个页面，因此一切图片装在文件夹：index_files里，不是从其他网站上下载的！

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Google
</title>
<link rel="shortcut icon" href="./index_files/googleg.png">
<style>
.writebox {background-color:#fff;border-radius:40px;padding:5px;width:500px;height:33px;border:1px solid #ccc;transition:box-shadow 0.4s;
}
.writebox:hover {box-shadow:0 0 10px #CCC;
}
.lnk {color:#000;text-decoration:none;font-size:12.5px;
}
.lnk:hover {color:#CCC;
}a {color:#000;
}
a:hover {color:#CCC;
}input {outline:none;
}button{outline:none;border-radius:2px;background:#0078D7;border:none;padding:8px;padding-left:15px;padding-right:15px;color:#fff;font-size:13px;
}
.selbtn {border:none;padding:8px;padding-left:15px;padding-right:15px;border-radius:5px;background-color:#efefef;cursor:pointer;
}
.selbtn:hover {box-shadow:1px 1px 1px #ccc;
}
</style>
</head>
<body><table align=right colspan="1"><tr><td width="95px" align="left"><a class="lnk" href="https://mail.google.com/mail/?tab=wm&ogbl">Gmail</a>&nbsp;&nbsp;<a class="lnk" href="https://www.google.com/imghp?hl=zh-CN&tab=wi&ogbl">图片</a></td><td width="35px" height="15px"><img src="index_files/more.png" onclick="" width="16px"/></td><td width="73px"><button onclick="location.href='https://accounts.google.com/ServiceLogin?hl=zh-CN&passive=true&continue=https://www.google.com/'">&nbsp;登录&nbsp;</button></td></tr>
</table><br><center style="margin-top:11%;">
<img src="./index_files/googlelogo.png"/><br><br><form method="get" action="articles.asp" align="left" class="writebox"><table colspan="1" width="100%" cellspacing="3" cellpadding="0"><tr width="100%" align="left" colspan=0><td><img src="./index_files/searchicon.png" style="height:27px;"/></td><td width="95%"><input type="text" autofocus autocomplete="off" name="s" style="width:100%;height:100%;border:0;padding:3px;background:#fff;border-radius:10px;"></td><td><img src="./index_files/voiceicon.png" style="height:27px;"/></td></tr></table>
</form><br><div><input type="button" class="selbtn" onclick="location.href='https://www.google.com/'" value="Google搜索">&nbsp;<input type="button" class="selbtn" onclick="location.href='https://www.google.com/doodles/'" value="手气不错">
</div><br><br><div style="font-size:13px;">Google 提供： <a href="">简体中文</a>
</div></center>
</body>
</html>

这个就是页面主体，但是没有图片，为了大家的方便以及对页面大小的兼容，这里提供图片下载：
(右击图片，点击“将图像另存为”)

googleg.png

2.googlelogo.png

3.more.png

4.searchicon.png

5.voiceicon.png

效果图是这样的：

如果模仿的不太像，大家可以自行到谷歌镜像网页的主页上对照修改
注：谷歌镜像网站是给开发者需要提供的，请勿用于非法用途！

自制模仿谷歌搜索UI的网页相关推荐

谷歌搜索：几乎所有的英文搜索都用上BERT了
点击上方"视学算法",选择"星标"公众号第一时间获取价值内容来自:机器之心在前段时间举办的「Search On」活动中,谷歌宣布,BERT 现在几乎为谷歌 ...
谷歌搜索白痴出来特朗普 CEO解释:算法匹配是这样
当地时间11号,谷歌CEO桑达尔·皮查伊出席了美国国会众议院司法委员会的听证会,就谷歌搜索保守派内容是否遭到歧视.数据安全等议题接受了质询.被问及为什么通过谷歌搜索英文单词"idiot&qu ...
谷歌搜索将于 2019 年年底停止索引任何 Flash 内容
周一,谷歌宣布谷歌搜索将不再支持 Flash,这意味着谷歌搜索将不再索引 Flash SWF 文件中的内容,无论是在完全使用 Flash 设计的网站上,还是包含 Flash 内容的网页,谷歌搜索会自动 ...
谷歌搜索网站流量_Google搜索升级使网站更难赢得流量
谷歌搜索网站流量 By Gerrit De Vynck 杰里特·德温克(Gerrit De Vynck) Type a query into the Google search bar on a sm ...
从谷歌搜获更多~[一些谷歌搜索的提示和技巧]
内容很是丰富,一下子吸收不了,收藏下来,慢慢吸收!希望给你们也有帮助! 搜索引擎可能是我们大家每天都会使用的工具,搜索引擎确实给我们带来了很多方便.不过大多数人可能都没有较好的利用搜索引擎,下面与大家 ...
谷歌搜索的灵魂！BERT模型的崛起与荣耀
本文转载自智东西刷榜各NLP任务.超70种语言搜索,起底搜索帝国谷歌的"引擎工程师"BERT! 如果你在谷歌上搜索"如何在没有马路的山上停车",谷歌会告诉你 ...
外贸在谷歌搜索客户，为什么搜索出来的都是同行？
外贸通过google搜索客户是近年来比较流行的开发客户方式之一.谷歌搜索是适合没客户资源支持,从无到有的开发方式.而谷歌搜索开发客户的基本流程是:输入产品关键词,找到含有我们目标信息的网页,进而挖掘有 ...
在谷歌搜索中胜出的视频缩略图
你有没有注意到,越来越多的视频结果显示在谷歌搜索结果?我到处转,似乎谷歌提供视频的选项,我看在其搜索结果的第一页.作为一个用户,我很欣赏视频内容,往往会点击视频结果.作为一个营销人员,我难以置信的这些 ...
chrome自制插件--百度搜索结果去广告1.0
chrome自制插件--百度搜索结果去广告1.0 一.前言二.效果三.说明四.安装五.下载一.前言国内用户用百度的占绝大多数,但是百度搜索结果的广告真烦人,特别是搜索"黄金&qu ...
[图文讲解]强大的谷歌搜索技巧，百度360搜狗什么的就是渣渣
首先推荐篇关于谷歌搜索的大体文章给大家看看,望大家对谷歌搜索有个初步的印象和了解谷歌免翻墙地址: 请戳我吧,我是传送门善用GOOGLE -- 從入門到精通 (DOC 簡體字版由網站下載,原作者 ...

自制模仿谷歌搜索UI的网页

自制模仿谷歌搜索UI的网页相关推荐

最新文章

热门文章