基于AI协助的web前端UI设计
大二初学时写的web外观很简陋，基本就是几个条条框框。在如今算法强力的AI加持下，我们可以很轻松地利用AI工具来美化我们的web页面，使其至少能登上台面。
于是乎我记录下了个人比较偏好的AI命令，让AI协助美化网页外观：
请给下面jsp做一个简洁的外观设计，要求主色调为湖蓝色与白色：
<!--your_code-->
参考以下代码：
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2024/12/9
Time: 16:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #E0F7FA; /* 浅湖蓝色背景 /
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
form {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.button {
background-color: #00ACC1; / 湖蓝色按钮 /
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
.button:hover {
background-color: #0097A7; / 深湖蓝色悬停效果 /
}
a {
color: #00ACC1; / 湖蓝色链接 */
text-decoration: none;
display: block;
margin-top: 10px;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<form action="/2025217/loginServlet" name="form" method="post">
<p>身份证号<input type="text" name="id" id="id"></p>
<p>密码<input type="password" name="password" id="password"></p>
<input type="submit" class="button" value="登录">
<a href="register.jsp">注册</a>
</form>
</body>
</html>
设计说明：
背景颜色：页面背景使用了浅湖蓝色（#E0F7FA），给人一种清新、舒适的感觉。
表单样式：表单背景为白色，带有圆角和阴影，使其在页面上突出显示。
输入框：输入框宽度为100%，带有内边距和圆角，提升用户体验。
按钮：登录按钮使用了湖蓝色（#00ACC1），并在悬停时变为深湖蓝色（#0097A7），增加交互感。
链接：注册链接也使用了湖蓝色，并在悬停时显示下划线，保持整体风格一致。
这个设计简洁、现代，符合湖蓝色与白色的主色调要求。
生成后基本类似，微调后使风格统一
浙公网安备 33010602011771号