生成一个登录的html页面
时间: 2023-05-19 18:07:21 浏览: 40
好的,以下是一个简单的登录页面的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
你可以将这段代码保存为一个HTML文件,然后在浏览器中打开它,就可以看到一个简单的登录页面了。
相关问题
生成一个uniapp登陆页面模板
以下是一个简单的uniapp登陆页面模板,你可以根据自己的需求进行修改:
```html
<template>
<div class="login">
<div class="login-form">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" v-model="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" v-model="password" id="password" placeholder="请输入密码">
</div>
<div class="form-group form-actions">
<button type="submit" class="btn btn-primary" @click.prevent="login">登陆</button>
</div>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
// 登陆逻辑
}
}
}
</script>
<style lang="scss" scoped>
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
.login-form {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
form {
.form-group {
margin-bottom: 20px;
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #d9d9d9;
box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.1);
transition: border-color 0.3s ease;
&:focus {
border-color: #1890ff;
}
}
.form-actions {
text-align: center;
button {
padding: 10px 20px;
border-radius: 5px;
border: none;
color: #fff;
background-color: #1890ff;
cursor: pointer;
}
}
}
}
}
}
</style>
```
这个模板包含了一个简单的登陆表单,包括用户名和密码的输入框以及一个登陆按钮。你可以根据自己的需求添加更多的表单项或者修改样式。
生成一个商城登陆注册页面
好的,以下是一个简单的商城登录注册页面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>商城登录注册页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#login">登录</a></li>
<li class="tab"><a href="#signup">注册</a></li>
</ul>
<div class="tab-content">
<div id="login">
<h1>欢迎回来!</h1>
<form action="#" method="post">
<div class="field-wrap">
<label>用户名<span class="req">*</span></label>
<input type="text" name="username" required>
</div>
<div class="field-wrap">
<label>密码<span class="req">*</span></label>
<input type="password" name="password" required>
</div>
<button type="submit" class="button button-block">登录</button>
</form>
</div>
<div id="signup">
<h1>欢迎加入!</h1>
<form action="#" method="post">
<div class="top-row">
<div class="field-wrap">
<label>姓名<span class="req">*</span></label>
<input type="text" name="name" required>
</div>
<div class="field-wrap">
<label>邮箱<span class="req">*</span></label>
<input type="email" name="email" required>
</div>
</div>
<div class="field-wrap">
<label>用户名<span class="req">*</span></label>
<input type="text" name="username" required>
</div>
<div class="field-wrap">
<label>密码<span class="req">*</span></label>
<input type="password" name="password" required>
</div>
<button type="submit" class="button button-block">注册</button>
</form>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="index.js"></script>
</body>
</html>
```
此外,需要配合一个名为 `style.css` 的 CSS 文件和一个名为 `index.js` 的 JavaScript 文件,代码如下:
`style.css`:
```css
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 30px;
color: #777;
background: #4CAF50;
}
.container {
max-width: 450px;
width: 100%;
margin: 0 auto;
position: relative;
}
#login {
position: absolute;
top: 50%;
left: 0px;
right: 0px;
margin: auto;
width: 300px;
height: 320px;
padding: 20px 30px;
background: #ffffff;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
#signup {
position: absolute;
top: 50%;
left: 0px;
right: 0px;
margin: auto;
width: 300px;
height: 400px;
padding: 20px 30px;
background: #ffffff;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2), 0 5px 5px 0px rgba(0, 0, 0, 0.24), 0 10px 10px 0px rgba(0, 0, 0, 0.22);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
position: relative;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 160, 160, 0.25);
color: #ffffff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
border-radius: 5px 5px 0px 0px;
}
.tab-group li a:hover {
background: #F5F5F5;
color: #4CAF50;
}
.tab-group .active a {
background: #4CAF50;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4CAF50;
font-weight: 300;
margin: 0 0 30px 0;
}
input {
font-family: "Roboto", Helvetica, Arial, sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.button {
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-transform: uppercase;
outline: 0;
background: #4CAF50;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
border-radius: 5px;
margin: 10px 0px;
}
.button:hover, .button:focus {
background: #43A047;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
@media (min-width: 768px) {
.container {
max-width: 1170px;
}
#login {
width: 40%;
height: 320px;
}
#signup {
width: 40%;
height: 400px;
}
}
```
`index.js`:
```javascript
$(document).ready(function() {
$('.tab a').on('click', function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
});
```