百度页面的HTML和CSS代码示例

by：码农分类：前端开发时间：2024/12/21 阅读：4 评论：0

本文将介绍如何制作一个基本的百度页面，包括HTML和CSS部分的实现。

基本HTML结构

一个典型的百度页面，需要定义HTML的基础结构。我们可以使用以下代码作为基础：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度</title>
</head>
<body>
    <div class="header">
        <h1>欢迎来到百度</h1>
        <form action="https://www.baidu.com/s" method="get">
            <input type="text" name="wd" placeholder="请输入搜索内容...">
            <input type="submit" value="百度一下">
        </form>
    </div>
</body>
</html>

CSS样式设计

为了使页面看起来更加美观，我们需添加一些CSS样式。下面的代码可以用来美化该页面：

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
    }
    .header {
        text-align: center;
        margin-top: 100px;
    }
    h1 {
        color: #333;
    }
    input[type="text"] {
        width: 300px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    input[type="submit"] {
        padding: 10px 20px;
        background-color: #3385ff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: #0073e6;
    }
</style>

页面效果展示

通过上述HTML和CSS代码，我们可以创建一个简单的百度风格页面，包含一个搜索框及按钮。用户可以在搜索框中输入内容，点击按钮后进行搜索。

本文介绍了制作百度页面的基本HTML和CSS代码结构，帮助大家快速上手网页开发。

非特殊说明，本文版权归原作者所有，转载请注明出处

本文地址：https://chinaasp.com/2024129444.html

<<上一篇