登陆界面html
body {
font-family: Arial
sans-serif;
background-color: #f2f2f2;
}
.container {
background-color: #ffffff;
width: 400px;
margin: 0 auto;
margin-top: 100px;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0
0
0
0.1);
}
h1 {
text-align: center;
margin: 0;
}
#loginForm {
margin-top: 20px;
}
#loginForm input {
width: *;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
#loginForm button {
width: *;
padding: 10px;
margin-top: 20px;
border: none;
background-color: #4CAF50;
color: white;
border-radius: 5px;
cursor: pointer;
}
#loginForm button:hover {
background-color: #45a049;
}
#loginForm p {
text-align: center;
font-size: 12px;
}
Login
本示例代码是一个简单的登录界面的HTML代码,以下为详细解释:
第2-5行:定义了文档类型以及HTML基本语言设置。
第7-11行:设置了页面的标题,以及引入了外部CSS样式表。
第13-36行:定义了页面的样式,包括登录框的背景色、大小、居中、内边距、圆角和阴影效果。
第18行:定义了标题的样式,居中显示且无边距。
第20行:设置登录表单与上方标题的间距。
第23-29行:定义了表单输入框的样式,包括宽度、内边距、外边距、边框和圆角。
第31-35行:定义了登录按钮的样式,包括宽度、内边距、外边距、无边框、背景颜色、文字颜色、圆角和鼠标悬停效果。
第38-43行:创建了一个登录表单,包括用户名和密码的输入框,以及一个登录按钮和一个提示信息。
第41行:使用"required"属性要求输入框不能为空。
第42行:使用"type"属性将密码输入框的内容隐藏。
第43行:使用"type"属性将按钮设置为提交按钮。
第44行:创建一个提示文字,提醒用户可以通过"Sign up"链接进行注册。
这段代码展示了一个简单的登录界面,用户可以通过输入用户名和密码进行登录操作,同时也提供了一个注册的入口。