|
|
body {
|
|
|
background-color: #f5f5f5; /* 设置页面背景颜色为浅灰色 */
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
margin-top: 150px; /* 设置主内容区域的上边距为150像素 */
|
|
|
font-family: system-ui, cursive, sans-serif; /* 设置字体样式，优先使用系统默认UI字体，其次是手写体和无衬线体 */
|
|
|
}
|
|
|
|
|
|
#login {
|
|
|
max-width: 500px; /* 设置登录框的最大宽度为500像素 */
|
|
|
margin: 0 auto; /* 水平居中对齐 */
|
|
|
padding: 25px 45px 45px 45px; /* 设置内边距：上、右、下、左均为45像素 */
|
|
|
box-shadow: 8px 8px #b3e5fc; /* 设置阴影效果，偏移量为8像素，颜色为#b3e5fc */
|
|
|
border-radius: 15px; /* 设置边框圆角半径为15像素 */
|
|
|
background-image: -webkit-linear-gradient(to top left, #ffd6e7, #cdfcf9); /* 设置背景渐变色，从左上角到右下角，颜色从#ffd6e7渐变到#cdfcf9 */
|
|
|
background-image: -o-linear-gradient(to top left, #ffd6e7, #cdfcf9); /* 兼容旧版Opera浏览器的渐变色设置 */
|
|
|
background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9); /* 标准渐变色设置，从左下角到右上角，颜色从#ffd6e7渐变到#cdfcf9 */
|
|
|
font-size: 16px; /* 设置字体大小为16像素 */
|
|
|
}
|
|
|
|
|
|
#login h1 {
|
|
|
color: #4dd0e1; /* 设置标题文字颜色为#4dd0e1 */
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
font-size: 30px; /* 设置标题字体大小为30像素 */
|
|
|
}
|
|
|
|
|
|
#login .my_input {
|
|
|
margin-top: 25px; /* 设置输入框的上边距为25像素 */
|
|
|
border: none; /* 移除边框 */
|
|
|
background-color: rgba(0, 0, 0, 0); /* 设置背景颜色为透明 */
|
|
|
box-shadow: none; /* 移除阴影效果 */
|
|
|
border-bottom: 2px solid white; /* 设置底部边框为2像素宽的白色实线 */
|
|
|
border-radius: 0px; /* 设置边框圆角半径为0像素 */
|
|
|
font-size: 20px; /* 设置字体大小为20像素 */
|
|
|
transition: all 0.3s; /* 设置所有属性的过渡时间为0.3秒 */
|
|
|
}
|
|
|
|
|
|
#login .my_input:hover {
|
|
|
border-bottom: 2px solid #ff9c6e; /* 当鼠标悬停时，底部边框变为2像素宽的橙色实线 */
|
|
|
}
|
|
|
|
|
|
#login input[type=submit] {
|
|
|
margin-top: 45px; /* 设置提交按钮的上边距为45像素 */
|
|
|
background-color: #fce4ec; /* 设置按钮背景颜色为#fce4ec */
|
|
|
font-size: 18px; /* 设置按钮字体大小为18像素 */
|
|
|
transition: all 0.5s; /* 设置所有属性的过渡时间为0.5秒 */
|
|
|
border-radius: 15px; /* 设置按钮边框圆角半径为15像素 */
|
|
|
}
|
|
|
|
|
|
#login input[type=submit]:hover {
|
|
|
background-color: #ffd6e7; /* 当鼠标悬停时，按钮背景颜色变为#ffd6e7 */
|
|
|
}
|
