ZVVQ代理分享网

一个简单的HTML5登录页面源代码示例

作者:zvvq博客网
导读background-color:fff;background-color:fff;containerinput[type="text"],containerinput[type="password"]{

HTML是一种用于构建和呈现Web页面的标准。它提供了一种更灵活、更强大的方式来创建网页,并提供了许多新的功能和特性。其中之一是HTML登录页面,它是一种用于用户登录的网页设计。下面是一个简单的HTML登录页面的源代码示例:

```html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-">

<meta name="viewport" content="width=device-width, initial-scale=.0">

<title>登录</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: fff;

}

.container {

max-width: 00px;

margin: 0 auto;

padding: px;

background-color: fff;

border-radius: px;

box-shadow: 0 px px rgba(0, 0, 0, 0.);

}

.container h{

text-align: center;

margin-bottom: px;

}

.container input[type="text"],

.container input[type="password"] {

width: 00%;

padding: 0px;

margin-bottom: px;

border: px solid ccc;

border-radius: px;

}

.container input[type="submit"] {

width: 00%;

padding: 0px;

background-color: CAF0;

color: fff;

border: none;

border-radius: px;

cursor: pointer;

}

.container input[type="submit"]:hover {

background-color: a0;

}

</style>

</head>

<body>

<div class="container">

<h>用户登录</h>

<form action="/login" method="post">

<input type="text" name="username" placeholder="用户名" required>

<input type="password" name="password" placeholder="密码" required>

<input type="submit" value="登录">

</form>

</div>

</body>

</html>

```

这段代码创建了一个简单的登录页面,包含一个标题、用户名输入框、密码输入框和登录按钮。页面使用了CSS样式来设置背景颜色、边框、阴影等效果,以及响应式设计,使得页面在不同设备上都能良好显示。

登录页面的HTML结构包括一个`<div>`容器,内部包含一个标题`<h>`和一个表单`<form>`。表单中有两个输入框`<input>`,分别用于输入用户名和密码,以及一个提交按钮`<input type="submit">`。

通过这个简单的HTML登录页面源代码示例,你可以开始构建自己的登录页面,并根据需要进行修改和定制。HTML提供了丰富的标签和功能,可以帮助你打造出更加优雅和交互性强的用户登录体验。