HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。HTML5是互联网的下一代标准，被认为是互联网的核心技术之一。CSS3是CSS（层叠样式表）技术的升级版本，CSS3原CSS基础上新增了很多新特征。
此项目基于 HTML5/CSS3 制作漂亮的登录页面，教学目标：
- CSS3 设置背景图像
- CSS3 圆角/透明效果实现
- CSS 属性选择器/伪类选择器
- CSS3 过滤效果语法使用
第一步：编写登录静态默认页面布局
利用HTML基础标签，实现登录静态默认页面布局。
目录结构：
pretty-login/ --根目录
├── css/ --css文件目录
└── images/ --图片文件目录
index.html --入口html文件
免费的图片库资源：
Hippopx - beautiful free stock photos
PickPik - Beautiful Royalty-Free Photos Sorted By AI
Gratisography - Free High-Resolution Stock Photos
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shixun.online</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>style.css
body {
margin: 0;
padding: 0;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}第二步：编写登录页面主窗口
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shixun.online</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="login-form" action="#" method="POST">
<h1>实训在线-登录</h1>
</form>
</body>
</html>style.css
.container {
width: 300px;
height: 400px;
/* 水平居中 */
margin: 150px auto;
padding: 20px;
/* border: 1px solid #000000; */
position: relative;
}
.container h2 {
text-align: center;
font-size: 20px;
color: #478fb7;
}
.container img {
width: 120px;
height: 95px;
/* 绝对定位 */
position: absolute;
top: -20%;
left: 50%;
/* 将指定元素向左移动其自身宽度的 50% ，实现将其水平居中*/
transform: translate(-50%, 0);
}
.container input {
width: 100%;
padding: 10px 15px;
border: 1px solid #dddddd;
/* 添加圆角效果 */
border-radius: 50px;
margin-bottom: 20px;
/* 去掉外边框 */
outline: none;
font-size: 14px;
/* CSS3 提供的属性，设置元素的宽度包含其 padding 和 border 的宽度 */
box-sizing: border-box;
}
/* > 表示设置当前元素下的直接子元素（儿子元素） */
.username>img {
/* 隐藏元素 */
display: none;
width: 120px;
height: 113px;
}
/* :focus 当前元素获得焦点 */
/* :focus-within 当前元素或其子元素获得焦点 */
.username:focus-within>img {
display: block;
}
.username:focus-within>input {
/* 修改输入框的边框颜色 */
border-color: #f29855;
}
/* ~表示定位当前元素后的所有兄弟元素 */
/* 当前 class=username 的元素或其子元素获得焦点时，隐藏其后的同级兄弟 img 元素 */
.username:focus-within~img {
display: none;
}
第三步：编写“用户名”&“密码”输入框
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shixun.online</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="login-form" action="#" method="POST">
<h1>实训在线-登录</h1>
<input type="text" name="name" placeholder="用户名...">
<input type="password" name="password" placeholder="密码...">
</form>
</body>
</html>style.css
body {
margin: 0;
padding: 0;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.login-form {
width: 300px;
background: #191919;
padding: 30px;
/* 水平居中处理 */
margin: 10% auto 0 auto;
/* 圆角效果 */
border-radius: 30px;
opacity: 0.6;
text-align: center;
}
.login-form h1 {
color: white;
font-weight: 500;
}
.login-form input[type="text"], .login-form input[type="password"] {
background: none;
width: 200px;
border: 2px solid #3498db;
border-radius: 25px;
font-size: 16px;
margin: 10px auto;
padding: 14px 10px;
text-align: center;
outline: none;
color: white;
/* CSS3 过渡效果，设置时长 */
transition: 0.25s;
}
.login-form input[type="text"]:focus, .login-form input[type="password"]:focus {
width: 280px;
border-color: #2ecc71;
}第四步：编写“登录”&“重置”按钮
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>shixun.online</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form class="login-form" action="#" method="POST">
<h1>实训在线-登录</h1>
<input type="text" name="name" placeholder="用户名...">
<input type="password" name="password" placeholder="密码...">
<input type="submit" value="登 录">
<input type="reset" value="重 置">
</form>
</body>
</html>style.css (同上)
查看效果
项目总结，通过此项目的学习了解以下知识点内容：
- 掌握如何利用 CSS3 设置背景图片：background-image: url(../img/bg.jpg)
- 掌握如何利用 CSS3 设置元素的透明效果：opacity: 0.6;
- 掌握如何利用 CSS3 设置圆角效果：border-radius: 25px;
- 掌握如何利用 CSS3 实现过渡效果：transition: 0.25s;
- 掌握 CSS 中属性选择器和伪类选择器的使用方法
