使用html制作一个登录页面,使用一个css样式使登录页面在左边注册页面在右边
时间: 2024-02-21 14:01:49 浏览: 27
以下是一个简单的登录和注册页面的 HTML 和 CSS 代码,使用了 `float` 属性将登录页面向左浮动,注册页面向右浮动,从而实现了左右两个页面并排显示的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login and Register Page</title>
<style>
/* 公共样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 登录页面样式 */
.login {
float: left;
width: 50%;
height: 100vh;
background-color: #f2f2f2;
padding: 20px;
}
/* 注册页面样式 */
.register {
float: right;
width: 50%;
height: 100vh;
background-color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<!-- 这里放置登录表单的 HTML 代码 -->
</form>
</div>
<div class="register">
<h2>Register</h2>
<form>
<!-- 这里放置注册表单的 HTML 代码 -->
</form>
</div>
</body>
</html>
```
这里将整个页面分成了两个部分,左边是登录页面,右边是注册页面,分别使用了 `.login` 和 `.register` 两个类进行样式定义。其中,使用了 `float` 属性将登录页面向左浮动,注册页面向右浮动,从而实现了左右两个页面并排显示的效果。