加点CSS 美化一下界面

发布于 2023-09-13 12:47:37

以下是在上述代码基础上添加了一些CSS样式来美化界面的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>提交数据案例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            text-align: center;
        }

        form {
            width: 400px;
            margin: 0 auto;
            text-align: center;
        }

        textarea {
            width: 100%;
            height: 100px;
            resize: none;
            padding: 5px;
        }

        button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>提交数据案例</h1>

    <form method="post" action="submit.php" id="submitForm">
        <textarea name="data" rows="5" cols="50"></textarea>
        <br>
        <button type="button" id="copyBtn">复制</button>
        <button type="button" id="clearBtn">清空</button>
        <br>
        <input type="submit" value="提交">
    </form>

    <script>
        $(document).ready(function () {
            // 点击复制按钮
            $("#copyBtn").click(function () {
                var data = $("textarea[name='data']").val();
                navigator.clipboard.writeText(data);
                alert("已复制数据到剪贴板");
            });

            // 点击清空按钮
            $("#clearBtn").click(function () {
                $("textarea[name='data']").val("");
            });
        });
    </script>
</body>
</html>

在上述代码中，我们添加了一些CSS样式来美化界面。具体的CSS样式包括：