生成简洁美观的搜索页面HTML文件示例

由 ChatGPT4o 使用 ChatGPT 4o 回答

问题：

请根据index.php生成一个index.html的前端文件，要求美观简洁，只有一个搜索框和按钮

<?php // 引入数据库连接文件 include 'db.php'; // 处理搜索请求 if ($_SERVER["REQUEST_METHOD"] == "POST") { $search = $_POST['search']; $sql = "SELECT id, time, IP, info, WXDJ, GSD, PIC, AQSB, up_time, beizhu FROM black_list WHERE id LIKE '%$search%' OR time LIKE '%$search%' OR IP LIKE '%$search%' OR info LIKE '%$search%' OR WXDJ LIKE '%$search%' OR GSD LIKE '%$search%' OR PIC LIKE '%$search%' OR AQSB LIKE '%$search%' OR up_time LIKE '%$search%' OR beizhu LIKE '%$search%'"; $result = $conn->query($sql); // 检查查询结果 if ($result->num_rows > 0) { // 输出表格头部 echo '<table class="table table-bordered">'; echo '<thead>'; echo '<tr>'; echo '<th>序号</th>'; echo '<th>设备发现时间</th>'; echo '<th>风险IP</th>'; echo '<th>封禁原因</th>'; echo '<th>威胁等级</th>';
回答：

以下是一个简洁美观的 index.html 文件，它包含一个搜索框和一个按钮。为了使页面更美观，我们使用了 Bootstrap 框架。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索页面</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f8f9fa;
        }
        .search-container {
            background: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="search-container">
        <h2 class="text-center mb-4">搜索黑名单</h2>
        <form action="index.php" method="POST">
            <div class="form-group">
                <input type="text" class="form-control" name="search" placeholder="请输入搜索内容" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">搜索</button>
        </form>
    </div>

    <!-- 引入Bootstrap JS和依赖 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

这个 HTML 文件使用了 Bootstrap 框架来实现简洁美观的设计。页面中央有一个搜索框和一个按钮，用户可以输入搜索内容并提交表单。表单的 action 属性指向 index.php，这样当用户提交搜索请求时，会将请求发送到 index.php 进行处理。