Google搜索首页静态页面

YI Chen521

已于 2023-10-15 00:01:18 修改

阅读量180

点赞数 1

文章标签： html5 css css3

于 2023-10-12 23:28:28 首次发布

本文链接：https://blog.csdn.net/wychh85/article/details/133801280

版权

本作品运用了HTML和CSS做出来的Google搜索首页（语音和摄像头的图标代码是从谷歌搜索网页中复制下来的）

作品归本人所有，未经允许请勿转载！！！

图片资源需要自己去谷歌搜索网页去寻找，本人暂不提供素材。

HTML代码：

/*html*/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="tab-daohang">
        <div class="header">
            <button class="login">登录</button>
        </div>
        <div class="button1">
            <svg class="jiugongge" focusable="false" viewBox="0 0 24 24">
                <path
                    d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
                </path>
            </svg>
        </div>
        <div class="button2">
            <div class="gmail">
                <a class="gmail-btn" href="">Gmail</a>
            </div>
            <div class="tupian">
                <a class="tupian-btn" href="">图片</a></a>
            </div>
        </div>
    </div>
    <div class="google">
        <img src="./img/googlelogo_color_272x92dp.png" alt="Google" height="92px">
            <div id="input-btn">
                <textarea id="input" name="" cols="30" rows="10"></textarea>
                <img id="image" src="./img/搜索.png" alt="">
                <div class="icon">
                    <svg class="yuyin-search-btn" focusable="false" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill="#4285f4"
                            d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
                        </path>
                        <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
                        <path fill="#fbbc05"
                            d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
                        </path>
                        <path fill="#ea4335"
                            d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
                        </path>
                    </svg>
                    <svg class="search-btn" focusable="false" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
                        <rect fill="none" height="192" width="192"></rect>
                        <g>
                            <circle fill="#34a853" cx="144.07" cy="144" r="16"></circle>
                            <circle fill="#4285f4" cx="96.07" cy="104" r="24"></circle>
                            <path fill="#ea4335"
                                d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z">
                            </path>
                            <path fill="#fbbc05"
                                d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z">
                            </path>
                            <path fill="#4285f4"
                                d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z">
                            </path>
                        </g>
                    </svg>
                </div>
            </div>
        <input class="btn2" value="Google 搜索" type="submit" aria-label="Google 搜索">
        <input class="btn2" value="手气不错" type="submit" aria-label="手气不错">
    </div>
    <div class="text">
        Google提供：
        <a href="https://www.baidu.com">Engish</a>
        <a href="#">Bahasa Melayu</a>
        <a href="#">தமிழ்</a>
    </div>
    <div class="footer">
        <div class="row row1">
            <p class="country">新加坡</p>
        </div>
        <div class="row row2">
            <ul>
                <li><a href="#">关于Google</a></li>
                <li><a href="#">广告</a></li>
                <li><a href="#">商务</a></li>
                <li><a href="#">Google搜索的运作方式</a></li>
            </ul>
            <ul>
                <li><a href="#">隐私权</a></li>
                <li><a href="#">条款</a></li>
                <li><a href="#">设置</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS代码：

/*css*/
*{
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    padding: 0;
}
.tab-daohang{
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    background: white;
}
.login{
    width: 93px;
    height: 36px;
    background-color: #1a73e8;
    border: 1px solid transparent;
    border-radius: 4px;
    color:white;
    font-size: 15px;
    text-align: center;
    margin-top: 6px;
    margin-right: 6px;
}
.login:hover{
    background-color:#2366bd;
}
.button1{
    float: right;
    margin-top: -3px;
}
.button2{
    float: right;
    margin-top: 14px;
}
.gmail{
    display: inline-block; 
}
.gmail-btn{
    display: inline-block;
    color: black;
    font-size: 13px;
}
.tupian{
    display: inline-block;
}
.tupian-btn{
    display: inline-block;
    color: black;
    font-size: 13px;
}
.jiugongge{
    width: 26px;
    height: 57px;
    padding: 0px 28px;
    color: #5f6368;
    opacity: 1;
    fill: currentColor;
}
.header{
    text-align: center;
    float: right;
}
.google{
    text-align: center;
}
#input{
    width: 365px;
    height: 23px;
    outline: none;
    font-size: 16px;
    margin-top: 12px;
    margin-right: 60px;
    resize: none;
    border:none;
}
#input-btn{
    width: 520px;
    height: 42px;
    border-radius: 18px;
    border: 1px solid #c4c7ce;
    margin: 0 auto;
}
#input-btn:hover{
    border: 1px solid white;
    box-shadow: 0 5px 10px 0 #c4c7ce, 0 5px 10px 0 #c4c7ce;
    background-color: white;
    cursor: pointer;
}
#image{
    width: 16px;
    height: 16px;
    float: left;
    position: relative;
    left: 18px;
    top:14px;
}
.icon{
    display: flex;
    width: 71px;
    align-items: center;
    height: 44px;
    position: relative;
    bottom:40px;
    left:441px;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    justify-content: space-evenly;
}
.yuyin-search-btn{
    width: 24px;
    height: 24px;
    padding: 0px 6px;
}
.search-btn{
    height: 24px;
    width: 24px;
    padding: 0px 6px;
    vertical-align: middle;
}
.btn2{
    border: 1px solid #f8f9fa;
    width: 100px;
    height: 36px;
    background-color: #f8f9fa;
    font-size: 15px;
    font-family: Arial, sans-serif;
    color:#3c4043;
    padding: 0 6px;
    margin: 11px 4px;
    border-radius: 5px;
}
.btn2:hover{
    border: 1px solid #c4c7ce;
    background-color: #f8f9fa;
    cursor: pointer;
}
.text{
    font-size: small;
    font-family: arial,sans-serif;
    text-align: center;
    line-height: 120px;
}
a{
    padding: 0 3px;
    text-decoration: none;
    color:rgba(32, 32, 171, 0.858);
}
a:hover{
    text-decoration: underline;
}
.footer{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    background: #f2f2f2;
}
.footer .row{
    padding: 15px 25px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.footer .row .country{
    font-size:14px;
    color:#5f6368;
}
.footer .row .country:hover{
   cursor: pointer;
}
.footer .row.row2{
    display: flex;
    justify-content: space-between;
}
.footer .row.row2 ul{
    display: flex;
}
.footer .row.row2 ul li{
    list-style: none;
}
.footer .row.row2 ul li a{
    text-decoration: none;
    font-size: 14px;
    color:#5f6368;
    margin-right: 25px;
}
.footer .row.row2 ul:nth-child(2) li a{
    text-decoration: none;
    font-size: 14px;
    color:#5f6368;
    margin-right: 0px;
    margin-left: 25px;
}
.footer .row.row2 ul li a:hover{
    text-decoration: underline;
}

最终效果如下：