html web登录界面代码
导读：HTML Web登录界面代码以下是一个HTML Web登录界面代码的示例。此代码包含了HTML代码和CSS样式表，能够创建一个简单的登录界面。以下是HTML代码：<!DOCTYPE html><html><he...
HTML Web登录界面代码以下是一个HTML Web登录界面代码的示例。此代码包含了HTML代码和CSS样式表，能够创建一个简单的登录界面。以下是HTML代码：
!DOCTYPE html>
html>
head>
title>
登录/title>
link rel="stylesheet" type="text/css" href="style.css">
/head>
body>
div class="container">
form>
h2>
登录/h2>
label>
用户名:/label>
input type="text" placeholder="请输入用户名" name="username" required>
label>
密码:/label>
input type="password" placeholder="请输入密码" name="password" required>
button type="submit">
登录/button>
/form>
/div>
/body>
/html>
以下是CSS样式表：
.container {
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
form {
width: 400px;
padding: 40px;
border: 1px solid #dddddd;
border-radius: 3px;
box-shadow: 0px 2px 10px #dddddd;
}
h2 {
margin-bottom: 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #dddddd;
border-radius: 3px;
}
button[type="submit"] {
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
在这个例子中，我们使用了HTML5的doctype声明。接下来我们定义了一个HTML代码块，并且在头部引入了一个样式表。在HTML代码块中，我们先创建了一个div容器，并且在样式表中设置了它的margin-top、display、justify-content和align-items属性。然后我们创建了一个表单，用于用户登录，包含了用户名、密码和一个登录按钮。在这些元素中我们使用了诸如type、placeholder、name和required等属性。最后，在CSS样式表中我们设置了容器的样式、表单的样式、标题的样式、标签的样式、文本框的样式、按钮的样式以及其他一些样式。这个CSS样式表是用来美化我们的登录表单。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html web登录界面代码
本文地址： https://pptw.com/jishu/303355.html