作者：许婉玟秀贤 | 来源：互联网 | 2023-08-23 18:39
创建一个HTML，CSS登录页面
前端
login.html
代码：
<html lang="en">
<head>
<title>学籍管理登录title>
<link href="style.css" rel="stylesheet">
head>
<body>
<div class="sign-up-from">
<img src="default.jpg">
<h1>系统登录h1>
<form>
<input type="email" class="input-box" placeholder="请输入账号">
<input type="password" class="input-box" placeholder="请输入密码">
<p><span>span> 我同意服务条款p>
<button type="button" class="signUp-btn">登录button>
<hr>
<p class="or">ORp>
<p>没有账号点击这里 <a href="register.html" >注册a>p>
<p class="cyjt">© 创业锦泰信息科技2020-20xxp>
form>
div>
body>
html>
style.css
代码：
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url(background1.jpg);
background-size: cover;
background-position: center;
} .sign-up-from
{
width: 300px;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
background: #fff;
padding: 20px;
margin: 8% auto 0;
text-align: center;
}
.sign-up-from h1
{
color: #1c8abc;
margin-bottom: 30px;
}
.input-box
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none; }
.input-box2
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none; }
.input-box3
{
border-radius: 20px;
padding: 10px;
margin: 10px 0;
width: 90%;
border: 1px solid #999;
outline: none; }
button
{
color: #fff;
width: 100%;
padding: 10px;
border-radius: 20px;
font-size: 15px;
margin: 10px 0;
border: none;
outline: none;
cursor: pointer; }
.signUp-btn
{
background-color: #1c8abc;
}
.twitter-btn
{
background-color: #21afde;
}
a
{
text-decoration: none; }
hr
{
margin-top: 20px;
width: 80%;
}
.or
{
background: #fff;
width: 30px;
margin: -19px auto 10px;
}
img
{
width: 70px;
border-radius: 30px;
margin-top: -70px;
}
.cyjt
{
font-size: 15px;
color: ##;
}
参考图片：
default.jpg
background1.jpg
登录页面源码：
【已经个人分享，粉丝可下载】
![前端库Bootstrap框架：「11]使用 span 创建行内元素](https://img6.php1.cn/3cdc5/9921/243/17a6062cb49e163c.png)
京公网安备 11010802041100号