网页美化：淡蓝色风格及按钮和输入框调整

问题：

我需要对我的一个网页进行美化，但我目前并不会css语言和html语言，请你在我代码的基础上添加一些好看的样式，我需要的风格是淡蓝色的，然后请你在美化的基础上，对一些按钮和输入框进行调整，我的网页如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> #addTaskContainer div { margin: 10px; } </style> </head> <body> <h1 id="pageTitle">新增页面</h1>

<div id="addTaskContainer">
  <div style="display: none" id="taskIdDiv">
    Task ID：<input
      type="text"
      name="taskId"
      readonly="true"
      disabled="true"
    />
  </div>
  <div>Task <input type="text" name="task" /></div>
  <div>
    指派人：
    <select id="assignedToUserIdSelect"></select>
  </div>

  <div>
    Task 类型：
    <select id="taskTypeIdSelect"></select>
  </div>

  <div>
    Task 状态：
    <select id="taskStatusIdSelect"></select>
  </div>

  <div>ObjectID <input

回答：

当然，我可以帮助你美化你的网页，并添加一些样式来使其看起来更好。以下是你提供的代码的改进版本，带有淡蓝色的风格和一些按钮和输入框的调整：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f8ff;
        color: #333;
        margin: 0;
        padding: 0;
      }

      #pageTitle {
        text-align: center;
        color: #4682b4;
        margin-top: 20px;
      }

      #addTaskContainer {
        width: 50%;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      #addTaskContainer div {
        margin: 10px 0;
      }

      input[type="text"],
      select {
        width: calc(100% - 20px);
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
      }

      input[type="text"]:focus,
      select:focus {
        border-color: #4682b4;
        outline: none;
      }

      button {
        background-color: #4682b4;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
      }

      button:hover {
        background-color: #5a9bd4;
      }
    </style>
  </head>
  <body>
    <h1 id="pageTitle">新增页面</h1>

    <div id="addTaskContainer">
      <div style="display: none" id="taskIdDiv">
        Task ID：
        <input type="text" name="taskId" readonly="true" disabled="true" />
      </div>
      <div>
        Task <input type="text" name="task" />
      </div>
      <div>
        指派人：
        <select id="assignedToUserIdSelect"></select>
      </div>

      <div>
        Task 类型：
        <select id="taskTypeIdSelect"></select>
      </div>

      <div>
        Task 状态：
        <select id="taskStatusIdSelect"></select>
      </div>

      <div>
        ObjectID <input type="text" name="objectId" />
      </div>

      <div>
        <button type="button">提交</button>
      </div>
    </div>
  </body>
</html>

在这个版本中，我添加了一些基本的CSS样式来美化你的网页。主要的改动包括：

背景颜色：设置了一个淡蓝色的背景颜色。
标题样式：使标题居中并设置了颜色。
容器样式：为任务添加容器设置了背景颜色、内边距、圆角和阴影。
输入框和选择框：调整了宽度、内边距、边框和圆角，并添加了聚焦时的样式。
按钮样式：设置了背景颜色、文字颜色、内边距、边框和圆角，并添加了悬停时的样式。

你可以根据需要进一步调整这些样式。希望这些改动能让

网页美化：淡蓝色风格及按钮和输入框调整

由 ChatGPT4o 使用 ChatGPT 4o 回答