基于dotnet和C#的网页项目登录界面美化方案

由 ChatGPT4o 使用 ChatGPT 4o 回答

问题：

我制作了一个基于dotnet、C#的网页小项目，现在因为我不会css和HTML，但是我想在基于我原本的功能上，让页面更好看一些，请你帮我把找到的模板写到我的代码里，以下是我原本的网页登录界面，代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>login</title> </head> <body> <!-- <form> --> <div>用户名：<input type="text" name="username" /></div> <div>密码：<input type="password" name="password" /></div> <div><input type="submit" id="submit" /></div> <div><a href="/Home?DashboardID=1">还没有账号？点击注册~</a></div> <!-- </form> --> </body> <script src="../../js/login.js"></script> <script src="../../js/common.js"></script> </html> 请你在上方代码的基础上，使用下面的模板改进一下登陆界面，模板如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./index.css" /> </head>
回答：

好的，我会将你提供的模板和原始代码结合起来，并添加一些基本的CSS样式来美化登录界面。以下是改进后的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <link rel="stylesheet" href="./index.css" />
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f2f5;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .login-container {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 300px;
      }
      .login-container h2 {
        margin-bottom: 20px;
        text-align: center;
      }
      .login-container div {
        margin-bottom: 15px;
      }
      .login-container input[type="text"],
      .login-container input[type="password"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      .login-container input[type="submit"] {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        border: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
      .login-container input[type="submit"]:hover {
        background-color: #0056b3;
      }
      .login-container a {
        display: block;
        text-align: center;
        margin-top: 10px;
        color: #007bff;
        text-decoration: none;
      }
      .login-container a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="login-container">
      <h2>Login</h2>
      <div>用户名：<input type="text" name="username" /></div>
      <div>密码：<input type="password" name="password" /></div>
      <div><input type="submit" id="submit" value="登录" /></div>
      <div><a href="/Home?DashboardID=1">还没有账号？点击注册~</a></div>
    </div>
    <script src="../../js/login.js"></script>
    <script src="../../js/common.js"></script>
  </body>
</html>

在这个改进后的代码中，我添加了一些基本的CSS样式来美化