当前位置：首页 > CSS

css制作goole

2026-02-12 18:17:56CSS

CSS 制作 Google 首页样式

以下是一个简单的 CSS 代码示例，用于模仿 Google 首页的基本样式。这段代码可以用于创建一个类似 Google 的搜索页面。

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #fff;
}

.logo {
    margin-top: 150px;
    margin-bottom: 30px;
}

.search-container {
    width: 582px;
    height: 44px;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

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

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

.buttons {
    margin-top: 30px;
}

.button {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #3c4043;
    font-size: 14px;
    padding: 0 16px;
    height: 36px;
    margin: 0 4px;
    cursor: pointer;
}

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

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f2f2f2;
    padding: 15px 0;
    border-top: 1px solid #e4e4e4;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.footer-link {
    color: #5f6368;
    text-decoration: none;
    font-size: 14px;
    margin: 0 10px;
}

.footer-link:hover {
    text-decoration: underline;
}

HTML 结构示例

配合上述 CSS 的 HTML 结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="logo">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google">
    </div>
    <div class="search-container">
        <input type="text" class="search-input">
    </div>
    <div class="buttons">
        <button class="button">Google Search</button>
        <button class="button">I'm Feeling Lucky</button>
    </div>
    <div class="footer">
        <div class="footer-links">
            <a href="#" class="footer-link">About</a>
            <a href="#" class="footer-link">Advertising</a>
            <a href="#" class="footer-link">Business</a>
            <a href="#" class="footer-link">How Search works</a>
        </div>
        <div class="footer-links">
            <a href="#" class="footer-link">Privacy</a>
            <a href="#" class="footer-link">Terms</a>
            <a href="#" class="footer-link">Settings</a>
        </div>
    </div>
</body>
</html>

关键样式说明

整体布局：使用 flexbox 实现垂直居中布局，高度设置为 100vh 使内容占据整个视口高度。
搜索框：宽度设置为 582px，高度 44px，圆角边框，悬停时添加阴影效果。
按钮样式：背景色为浅灰色，无边框，悬停时添加轻微阴影和边框。
页脚：固定在页面底部，背景色为浅灰色，包含两行链接。

响应式调整

要使页面在移动设备上表现良好，可以添加以下媒体查询：

css制作goole

@media (max-width: 600px) {
    .search-container {
        width: 90%;
    }

    .logo {
        margin-top: 100px;
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
    }
}

这段代码将创建一个简洁的 Google 首页样式，包含 logo、搜索框、按钮和页脚等基本元素。可以根据需要进一步调整样式和布局。