仿谷歌首页 / 憋错料

仿谷歌首页

一做一些准备工作:

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

时间： 2024-10-14 02:14:22

仿谷歌首页的相关文章

浅谈谷歌首页

虽然谷歌舍弃中国市场百分之三十多的市场份额退出中国大陆市场,但是还是会用很多人把谷歌当做专业资料搜索引擎,这一方面得益于谷歌的强大的搜索技术,另一方面用小众的谷歌搜索会让人一种高大上的感觉. 回到谷歌首页的讨论(以下对比对象都是之前谷歌在中国最大的竞争者百度): 第一,谷歌搜索的第一个特点就是简洁,没有贴吧.知道等等百度首页上有的各种按钮,更没有百度安全卫士.百度杀毒.宝箱.换肤等等恼人的推荐,这种简洁的风格给人一种很舒服的感觉,同时也不会让用户分心,从而带来良好的用户体验. 第二,谷歌的搜索技

百度和谷歌首页排名点击率

排名 google baidu Rank1: 34.35 28.56 Rank2: 16.96 19.23Rank3: 11.42 10.20Rank4: 7.73 8.14Rank5: 6.19 7.50Rank6: 5.05 5.72Rank7: 4.02 4.01Rank8: 3.47 4.41Rank9: 2.85 5.53 Rank10: 2.71 6.70 百度和谷歌首页排名点击

CSS3实战开发:仿天猫首页图片展示动画特效实战开发

各位网友大家好,我是陌上花会开,人称陌陌.今天我带领大家开发一个仿天猫首页图片展示动画特效的案例.一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果.我这么做只为激起大伙的动手能力,望大家能明白我的用心. 好了,不废话了,直接本篇的实战开发吧. 我们看一下我们今天要做的实战案例效果图: 1. 鼠标划过前: 2. 鼠标划过右侧的图片时: 可能大伙看这个静态截

谷歌首页节日徽标收集

突然觉得谷歌首页的节日徽标看着特别漂亮,于是决定从今天开始收集谷歌的节日徽标. 2015年5月4日今天是国际青年节,同时是钢琴发明家巴尔托洛奥·克里斯托福里发明钢琴的日子.

仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/ 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base ta

仿京东首页商品分类底部色标随鼠标移动特效

原文:仿京东首页商品分类底部色标随鼠标移动特效今天扒皮下京东商品展示区的一个特效: 大家可以自行去京东看下特效,下面是这个特效的动态图(这次聪明的我懂得给图加水印了) 理下思路,每个分类选项卡宽度一致,且有一条灰色底边,然后默认有一条红色的色标让它漂浮在首个选项卡上面(其中的小三角形可以自己做个图),默认首个选项卡的文本(像上图是"AAA")为红色,其它选项卡的为灰色.默认除第一个选项卡对应的下方的内容DIV显示外,其它选项卡对应的内容DIV隐藏: 鼠标移到某个选项卡则改变该选项卡字

jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div class="

基于jQuery仿百度首页换肤功能代码

分享一款基于jQuery仿百度首页换肤功能代码.这是一款类似百度首页的自定义背景图片切换特效代码. 在线预览源码下载实现的代码. html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></d

一款基于jQuery的仿百度首页滑动选项卡

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="main-page"> <div class="left"> <div class="nav-back"> </div> <div