html5+css3+vue2 网易云邮箱登录页面完整代码
时间: 2023-07-31 09:03:39 浏览: 77
下面是一个使用HTML5、CSS3和Vue 2创建的简单网易云邮箱登录页面的完整代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易云邮箱登录</title>
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.form-group button:hover {
background-color: #40a9ff;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<h2>网易云邮箱登录</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="email">邮箱地址:</label>
<input type="email" id="email" v-model="email" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" required>
</div>
<div class="form-group">
<button type="submit">登录</button>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue实例
new Vue({
el: '#app',
data: {
email: '',
password: ''
},
methods: {
login() {
// 在这里添加登录逻辑
console.log('邮箱地址:', this.email);
console.log('密码:', this.password);
}
}
});
</script>
</body>
</html>
```
这是一个简单的网易云邮箱登录页面,包含一个表单,用户可以输入邮箱地址和密码进行登录。当用户点击登录按钮时,会触发`login`方法,你可以在该方法中添加自定义的登录逻辑。在这个示例中,我只是简单地在控制台打印出输入的邮箱地址和密码。
你可以将上述代码复制到一个HTML文件中,并在浏览器中运行该文件,即可看到网易云邮箱登录页面的效果。记得将`<script>`标签中的Vue.js链接替换为你自己的链接,或者使用本地的Vue.js文件。
希望这个示例对你有帮助!如果还有其他问题,请随时提问。