定制小程序开发基于 HTML5/CSS3 制作漂亮的登录页面-巴掌软件-高性价比的软件定制开发解决方案

HTML5 是对 HTML 定制小程序开发标准的第五次修订。定制小程序开发其主要的目标是将互联网语义化，定制小程序开发以便更好地被人类和机器阅读，定制小程序开发并同时提供更好地支持定制小程序开发各种媒体的嵌入。HTML5是互联网的下一代标准，被认为是互联网的核心技术之一。CSS3是CSS（层叠样式表）技术的升级版本，CSS3原CSS基础上新增了很多新特征。

此项目基于 HTML5/CSS3 制作漂亮的登录页面，教学目标：

CSS3 设置背景图像
CSS3 圆角/透明效果实现
CSS 属性选择器/伪类选择器
CSS3 过滤效果语法使用

第一步：编写登录静态默认页面布局

利用标签，实现登录静态默认页面布局。

目录结构：

pretty-login/ --根目录
├── css/ --css文件目录
└── images/ --图片文件目录
index.html --入口html文件

免费的图片库资源：

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 中属性选择器和伪类选择器的使用方法