hello，大家好，我是wangzirui32，今天我们来学习如何设计一个网站登录页面。
开始学习吧！
1. 项目架构
demo/login.html 网页文件backgrond.png 登录背景图片style.css CSS样式文件
按照以上创建即可。
2. 编写代码
2.1 网页文件编写
HTML代码不多，如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>wangzirui32网站首页</title><!-- 导入CSS文件 --><link rel="stylesheet" href="style.css" /></head><body><div class="login"><!-- 登录区域 --><h1 class="login-title">Wangzirui32网站登录</h1><form name="login-form-data" action="#" method="post"><div class="login-data"><!-- 表单数据获取 --><h3>用户名：<input name="username" class="username-input" placeholder="请输入用户名"/></h3><h3>密码：<input name="password" type="password" class="password-input" placeholder="请输入密码"/></h3></div><button class="login-btn">登录</button></form></div></body></html>
以上代码设置了登录区域的相关标签，接下来开始编写CSS样式。
2.2 CSS样式编写
代码：（不懂看注释）
.login {position: absolute; /* 设置位置为绝对位置 */top: 100px; /* 位置距离屏幕顶部100px */left: 200px; /* 位置距离屏幕左边200px */border-radius:30px; /* 圆角边框 */border: #000000 solid 3px; /* 设置边框颜色以及厚度 */width: 700px; /* 宽为700px */height: 300px; /* 长为300px */background-image: url(background.png); /* 设置登录背景 */background-repeat: no-repeat; /* 设置不允许重复图片 */background-size: 700px 300px; /* 设置图片背景的长宽 覆盖整个登录区域 */}.login-title {color: #ffffff; /* 标题文字为白色 */text-align: center; /* 设置标签居中 */}.login-data {text-align: center;}.username-input {width: 200px;height: 30px;font-size: 17px;background-color: #d5d5d5;border: none; /* 取消点击输入框时的颜色变化 */border-radius: 5px;}.password-input {width: 200px;height: 30px;font-size: 17px;background-color: #d5d5d5;border: none;border-radius: 5px;}.login-btn {position: absolute;background-color: #008ec2;border-radius:10px;width: 100px;height: 50px;font-size: 21px;color: #fefefe;border: #dcd4ba solid 3px;right: 100px;}
3. 效果展示
如图：
好了，今天的课程就到这里，喜欢的可以点个收藏和关注，再见！
