登录界面是Web应用程序中最基础的部分之一。而CSS则是网页设计中的重要组成部分之一。下面是一个简单的CSS登陆界面代码示例。
body {
background-color: #C9D6FF;
}
h1 {
text-align: center;
color: #4B0082;
}
#login-form {
width: 50%;
margin: 0 auto;
background-color: #F0FFF0;
border: 2px solid #4B0082;
padding: 20px;
}
#login-form label {
display: block;
margin-bottom: 10px;
}
#login-form input[type="text"], #login-form input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 2px solid #4B0082;
border-radius: 5px;
}
#login-form input[type="submit"] {
background-color: #4B0082;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
}
#login-form input[type="submit"]:hover {
background-color: #8A2BE2;
}
上述代码使用CSS来样式化HTML表单,使其看起来更加美观和现代化。其中,body, h1 和 #login-form 选择器都定义了相应的样式。在#login-form样式中,我们使用了margin:auto将表单居中并给背景色添加了轻微的填充。
表单项的样式在选择器#login-form input[type="text"], #login-form input[type="password"]中定义,其中包括居中对齐、圆角边框以及鼠标样式的定义。submit按钮的样式在选择器#login-form input[type="submit"]中定义,包括背景色、颜色、边框、鼠标指针样式以及鼠标悬停时按钮的反馈效果。
总体而言,这个CSS登陆界面代码示例是非常基础和简单的,但演示了很多css样式和元素,可以帮助web开发者更好的理解css的应用,从而创作更加美观和高效的登录界面。