pug模板引擎登录注册页面代码
时间: 2024-06-11 19:02:02 浏览: 11
Pug是一种模板引擎,可用于生成HTML。您可以使用Pug轻松地创建登录注册页面。以下是一个示例代码:
```
doctype html
html(lang="en")
head
title Login/Register Page
style.
body {
background-color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
}
.container {
background-color: #fff;
width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
body
.container
h1 Login/Register
form(action="/login" method="post")
label(for="username") Username
input(type="text" placeholder="Enter Username" name="username" required)
label(for="password") Password
input(type="password" placeholder="Enter Password" name="password" required)
button(type="submit") Login
form(action="/register" method="post")
label(for="username") Username
input(type="text" placeholder="Enter Username" name="username" required)
label(for="password") Password
input(type="password" placeholder="Enter Password" name="password" required)
label(for="password") Confirm Password
input(type="password" placeholder="Confirm Password" name="confirm_password" required)
button(type="submit") Register
```
这段代码使用Pug语法构建了一个登录注册页面。其中,使用了HTML元素和Pug独有的缩进语法。在这个示例中,我们使用了两个表单来实现登录和注册功能。在每个表单中,我们使用了`label`元素和`input`元素来实现表单输入。我们还使用了CSS样式来美化页面。
如果您有任何问题或需要更多帮助,请告诉我。我会尽力回答您的问题。