淡蓝色风格网页美化及按钮输入框调整代码示例

由 ChatGPT4o 使用 ChatGPT 4o 回答

问题：

我需要我的一个网页进行美化，但我目前并不会使用css语言和html语言，请你使用代码的基础上添加一些好看的样式，我需要的风格是淡蓝色的，然后请你使用美化的基础上，一些按钮和输入框进行调整，最重要的是要保证我的功能不被破坏的情况下，以下是我的网页代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>TaskList</title> <style> th, td { border: 1px solid black; padding: 5px; } #queryContainer { margin-bottom: 10px; } table { text-align: center; } button { margin: 5px; } </style> </head> <body> <h1>业务处理界面</h1> 
<div id="queryContainer">
  TaskID： <input type="text" name="taskID" /> Task：
  <input type="text" name="task" /> 指派人：
  <input type="text" name="assignedToUser" />
  <button id="queryBtn">查&nbsp;询</button>
  <button id="addBtn">新&nbsp;增</button>
</div>
<div id="taskTableContainer">
  <table>
    <thead>
      <tr>
        <th>TaskID</th>
回答：

当然，我可以帮助你美化你的网页。我们将使用淡蓝色的风格，并调整按钮和输入框的样式。以下是更新后的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TaskList</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f8ff;
        color: #333;
        margin: 0;
        padding: 20px;
      }
      h1 {
        color: #4682b4;
        text-align: center;
      }
      #queryContainer {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #e6f2ff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      input[type="text"] {
        padding: 8px;
        margin: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 150px;
      }
      button {
        padding: 8px 12px;
        margin: 5px;
        border: none;
        border-radius: 4px;
        background-color: #4682b4;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      button:hover {
        background-color: #5a9bd3;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      th,
      td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
      }
      th {
        background-color: #4682b4;
        color: white;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <h1>业务处理界面</h1>

    <div id="queryContainer">
      TaskID： <input type="text" name="taskID" /> Task：
      <input type="text" name="task" /> 指派人：
      <input type="text" name="assignedToUser" />
      <button id="queryBtn">查&nbsp;询</button>
      <button id="addBtn">新&nbsp;增</button>
    </div>
    <div id="taskTableContainer">
      <table>
        <thead>
          <tr>
            <th>TaskID</th>
            <th>Task</th>
            <th>指派人</th>
          </tr>
        </thead>
        <tbody>
          <!-- 这里可以添加任务数据 -->
        </tbody>
      </table>
    </div>
  </body>
</html>

在这个更新后的代码中，我们做了以下改动：

  1. 设置了整个页面的背景颜色为淡蓝色（#f0f8ff）。
  2. 调整了标题的颜色为深蓝色（#4682b4）。
  3. 美化了输入框和按钮，使其更具吸引力。
  4. 为表格添加了阴影效果和交替行背景色，以提高可