基于 HTML5/CSS3 制作漂亮的登录页面

admin • • 5G

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 中属性选择器和伪类选择器的使用方法
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>