标签：
一 做一些准备工作:
1 编辑器:webstorm,浏览器:Chrome;
2 利用Chrome的Image downloader插件抓取谷歌首页的图片，作为素材。
3编程实现
二 项目的文件结构
.
├── images
│ ├── favicon.png
│ ├── googlelogo.png
│ ├── microphone.png
│ ├── settings.png
│ └── userphoto.jpg
├── index.css
└── index.html
三 代码
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google</title> <link rel="short icon" href="images/favicon.png"/> <link rel="stylesheet" href="index.css"/> </head> <body> <div id="header"> <div id="header-left"> <a href="#"><span>Google+</span></a> <a href="#" id="search-button"><span>搜索</span></a> <a href="#"><span>图片</span></a> <a href="#"><span>地图</span></a> <a href="#"><span>Play</span></a> <a href="#"><span>YouTube</span></a> <a href="#"><span>新闻</span></a> <a href="#"><span>Gmail</span></a> <a href="#" id="more-link"> <span>更多<span id="toggle"></span></span> <div id="more-div" style="display:none;"> <a href="#">云端硬盘</a> <a href="#">日历</a> <a href="#">翻译</a> <a href="#">Blogger</a> <a href="#">财经</a> <a href="#">相册</a> <a href="#">视频</a> <a href="#">Google文档</a> <div id="line"></div> <a href="#">更多》》</a> </div> </a> </div> <div id="header-right"> <a href="#" id="login"><span>登录</span></a> <a href="#" id="settings"><span></span></a> <!-- <a href="#" id="username"><span>Kerita Chan</span></a> <a href="#" id="notice"><span>0</span></a> <a href="#" id="share"><span>分享...</span></a> <a href="#" id="userphoto"><img src="images/userphoto.jpg" /></a> <a href="#" id="settings"><span></span></a>--> </div> </div> <!--中间内容--> <div id="container"> <div id="logo"> <img src="images/googlelogo.png" alt=""/> <div> 谷歌 </div> </div> <div id="search"> <div id="search-input"> <!-- 使用该代码即表示您同意接受 Google 自定义搜索服务条款。 --> <!-- 相关服务条款请见 http://www.google.com//cse/docs/tos.html?hl=zh-CN --> <form name="cse" id="searchbox_demo" action="https://www.google.com/cse"> <input type="hidden" name="cref" value="" /> <input type="hidden" name="ie" value="utf-8" /> <input type="hidden" name="hl" value="zh-CN" /> <input name="q" type="text" size="40" id="search-text"/> <div> <input type="submit" name="sa" value="Google搜索" id="search-button" /> <input type="submit" id="lucky-search" value="手气不错"/> </div> </form> <script type="text/javascript" src="https%3A%2F%2Fcse.google.com%2Fcse/tools/onthefly?form=searchbox_demo&lang=zh-CN"></script> </div> </div> <div id="language"> <span>Google.com.hk 使用下列语言:</span> <a href="#"> 中文（繁體）</a><a href="#">English</a> </div> </div> <div id="footer"> <ul id="footer-left"> <li><a href="#">广告</a></li> <li><a href="#">商务</a></li> <li><a href="#">Google大全</a></li> </ul> <ul id="footer-right"> <li><a href="#">隐私权</a></li> <li><a href="#">条款</a></li> <li><a href="#">设置</a></li> </ul> </div> <script> window.onload = function () { var more_link = document.getElementById("more-link"); if (more_link != null) { more_link.onclick = function () { var more_div = document.getElementById("more_div"); if (more_div != null) { more_div.style.display = "block"; } } } } </script> </body> </html>
index.css
* { margin: 0; padding: 0; } body { font-size: 13px; font-family: arial, sans-serif; } /*头部*/ div#header { background-color: #2d2d2d; border-bottom: 1px solid black; float: left; height: 29px; width: 100%; position: absolute; top: 0; left: 0; padding: 0 5px; } div#header a { text-decoration: none; color: #ccc; text-align: left; white-space: nowrap; } /*左边*/ div#header div#header-left { float: left; } div#header div#header-left a { line-height: 27px; height: 29px; display: inline-block; } div#header div#headr-left a:focus, div#header div#header-left a:hover { background-color: #4c4c4c; height: 28px; border-top: 2px solid #4c4c4c; } div#header div#header-left a#search-button { border-top: 2px solid #dd4b39; font-weight: bold; color: #ffffff; } div#header div#header-left a span { padding: 0 5px; } div#header div#header-left span#toggle { position: relative; top: -1px; border-style: solid dashed dashed; border-color: transparent; border-top-color: #c0c0c0; display: -moz-inline-box; display: inline-block; font-size: 0; height: 0; line-height: 0; width: 0; border-width: 3px 3px 0; padding: 1px 0 0 0; left: 4px; } div#header div#header-left a#more-link { padding-right: 5px; padding-left: 9px; } /*头部右边*/ div#header div#header-right { float: right; } div#header div#header-right a { line-height: 27px; height: 27px; display: inline-block; padding: 0 5px; margin-top: 2px; } div#header div#header-right a:last-child span { padding-right: 30px; content: ""; width: 16px; height: 16px; background: url("images/settings.png") left top; } div#container { width: 659px; margin: 0 auto; text-align: center; } div#container div#logo { margin-top: 90px; padding-top: 109px; height: 92px; text-align: center; } div#container div#logo img { height: 92px; width: 272px; } div#container div#logo div{ font-size:16px; color:#4285f4; bottom: 23px; left: 95px; position: relative; } div#container div#search{ height: 121px; width:571px; padding:8px 284px 0 284px; position: relative; right: 284px; } div#container div#search div#search-input{ width: 590px; height: 40px; padding: 5px 9px 0 9px; margin-top: 25px; } div#container div#search div#search-input input#search-text{ width: 590px; height: 38px; font-size: 17px; background: url(images/microphone.png) 565px 5px no-repeat; -webkit-background-size: 23px 17px; background-size: 24px 24px; border: 1px solid #49d0fe; } div#container div#search div#search-input input#search-button { height: 40px; font-size: 27px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 5px; } div#container div#search div#search-input input#search-button,input#lucky-search{ height: 36px; margin: 11px 4px; padding: 0 16px; background-color: #f8f8f8; font-size: 13px; font-weight: bold; color: #757575; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; } input#search-button:hover,input#lucky-search:focus,input#search-button,input#lucky-search:focus{ border: 1px solid black; } div#container div#search div#search-input form{ text-align: center; } div#container div#search div#search-input form div{ margin-top: 20px; } div#container div#language{ height:28px; line-height: 28px; margin-top: 40px; } div#container div#language a{ text-decoration: none; padding: 0 3px; color:#1a0dab; } div#container div#language a:hover,div#container div#language a:focus{ text-decoration: underline; } div#footer{ position: absolute; bottom: 0px; border-top: 1px solid #c6c6c6; width: 100%; height: 40px; line-height: 40px; } div#footer a{ text-decoration: none; color: #666666; } div#footer ul li{ display: inline; } div#footer ul#footer-left{ float: left; } div#footer ul#footer-right{ float: right; } div#footer a{ padding: 0 0 0 27px; } div#footer ul#footer-right li:last-child a{ padding-right: 27px; }
四 源码下载（待上传）
转载请注明出处：http://www.cnblogs.com/kerita/p/4969349.html
标签：
原文地址：http://www.cnblogs.com/kerita/p/4969349.html
