新手求助：如何用HTML/CSS还原Google UI页面布局？

你的代码主要在HTML结构和样式布局上存在问题，以下是修正后的完整实现，包含头部导航、居中搜索区、底部导航，尽可能贴近Google原生UI：

问题梳理 #

• HTML标签闭合错误：<div id="header">未闭合，<p>内的最后一个<a>标签缺少闭合
• 元素顺序混乱：Google logo应该放在搜索栏上方，而非下方
• 无布局样式：没有控制元素的位置、间距、外观，导致完全没有Google的排版逻辑
• 细节缺失：缺少底部导航、搜索栏的圆角/阴影、按钮的默认样式重置等

修正后的完整代码 #

<!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="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-icon">
    <style>
        /* 全局样式重置，消除默认边距和样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* 头部导航 */
        #header {
            display: flex;
            justify-content: flex-end;
            padding: 16px 20px;
            gap: 18px;
            align-items: center;
            font-size: 13px;
        }

        #header a {
            color: #202124;
            text-decoration: none;
        }

        #header a:hover {
            text-decoration: underline;
        }

        #header img {
            width: 24px;
            height: 24px;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
        }

        #header img:hover {
            background-color: rgba(60,64,67,0.1);
        }

        /* 主内容区 */
        main {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }

        .google-logo {
            width: 272px;
            height: 92px;
        }

        /* 搜索栏容器 */
        .search-container {
            display: flex;
            align-items: center;
            width: 580px;
            height: 46px;
            border: 1px solid #dfe1e5;
            border-radius: 24px;
            padding: 0 16px;
            gap: 12px;
        }

        .search-container:hover {
            box-shadow: 0 1px 6px rgba(32,33,36,0.28);
        }

        .search-container input {
            flex: 1;
            height: 100%;
            border: none;
            outline: none;
            font-size: 16px;
        }

        .search-container img {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

        /* 按钮组 */
        .btn-group {
            display: flex;
            gap: 12px;
        }

        .btn-group button {
            padding: 10px 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            background-color: #f8f9fa;
            color: #3c4043;
            font-size: 14px;
            cursor: pointer;
        }

        .btn-group button:hover {
            border: 1px solid #dadce0;
            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
        }

        /* 语言提示 */
        .lang-tip {
            font-size: 13px;
            color: #3c4043;
            margin-top: 12px;
        }

        .lang-tip a {
            color: #1a0dab;
            text-decoration: none;
        }

        .lang-tip a:hover {
            text-decoration: underline;
        }

        /* 底部导航 */
        footer {
            background-color: #f2f2f2;
            padding: 12px 24px;
            font-size: 14px;
            color: #70757a;
        }

        .footer-top {
            padding-bottom: 12px;
            border-bottom: 1px solid #dadce0;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
        }

        .footer-bottom a {
            color: #70757a;
            text-decoration: none;
            margin-right: 24px;
        }

        .footer-bottom a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="header">
        <a href="#">Gmail</a>
        <a href="#">Images</a>
        <img src="pad.png" alt="Apps">
        <img src="cs-logo.png" alt="Profile">
    </div>

    <main>
        <img class="google-logo" src="googlelogo_color_272x92dp.png" alt="Google">
        <div class="search-container">
            <input type="search" placeholder="Search Google or type a URL">
            <img src="google-voice-search-icon.png" alt="Voice Search">
        </div>
        <div class="btn-group">
            <button>Google Search</button>
            <button>I'm feeling lucky</button>
        </div>
        <div class="lang-tip">
            Google offered in: <a href="#">Filipino</a> <a href="#">Cebuano</a>
        </div>
    </main>

    <footer>
        <div class="footer-top">Philippines</div>
        <div class="footer-bottom">
            <div class="footer-left">
                <a href="#">About</a>
                <a href="#">Advertising</a>
                <a href="#">Business</a>
                <a href="#">How Search works</a>
            </div>
            <div class="footer-right">
                <a href="#">Privacy</a>
                <a href="#">Terms</a>
                <a href="#">Settings</a>
            </div>
        </div>
    </footer>
</body>
</html>

关键修正说明 #

1. HTML结构优化：修复了标签闭合错误，调整了元素顺序，新增了底部导航的完整结构
2. Flex布局实现：通过display: flex实现头部靠右、主内容居中、底部固定在页面底部的布局逻辑
3. 细节样式还原：添加了搜索栏的圆角和悬浮阴影、按钮的悬浮效果、导航文字的下划线交互
4. 全局样式重置：消除浏览器默认的边距和样式，保证跨浏览器表现一致

内容的提问来源于stack exchange，提问作者Pau