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

    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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>shixun.onlinetitle>
    9.     
    10.     <link rel="stylesheet" href="css/style.css">
    11. head>
    12.  
    13. <body>
    14.  
    15. body>
    16.  
    17. html>

    style.css

    1. body {
    2.     margin: 0;
    3.     padding: 0;
    4.     background-image: url(../images/bg.jpg);
    5.     background-repeat: no-repeat;
    6.     background-size: cover;
    7. }

    第二步：编写登录页面主窗口

    index.html 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>shixun.onlinetitle>
    9.     
    10.     <link rel="stylesheet" href="css/style.css">
    11. head>
    12.  
    13. <body>
    14.     <form class="login-form" action="#" method="POST">
    15.         <h1>实训在线-登录h1>
    16.     form>
    17. body>
    18.  
    19. html>

    style.css

    1. ​
    2. .container {
    3.     width: 300px;
    4.     height: 400px;
    5.     /* 水平居中 */
    6.     margin: 150px auto;
    7.     padding: 20px;
    8.     /* border: 1px solid #000000; */
    9.     position: relative;
    10. }
    11.  
    12. .container h2 {
    13.     text-align: center;
    14.     font-size: 20px;
    15.     color: #478fb7;
    16. }
    17.  
    18. .container img {
    19.     width: 120px;
    20.     height: 95px;
    21.     /* 绝对定位 */
    22.     position: absolute;
    23.     top: -20%;
    24.     left: 50%;
    25.     /* 将指定元素向左移动其自身宽度的 50% ，实现将其水平居中*/
    26.     transform: translate(-50%, 0);
    27. }
    28.  
    29. .container input {
    30.     width: 100%;
    31.     padding: 10px 15px;
    32.     border: 1px solid #dddddd;
    33.     /* 添加圆角效果 */
    34.     border-radius: 50px;
    35.     margin-bottom: 20px;
    36.     /* 去掉外边框 */
    37.     outline: none;
    38.     font-size: 14px;
    39.     /* CSS3 提供的属性，设置元素的宽度包含其 padding 和 border 的宽度 */
    40.     box-sizing: border-box;
    41. }
    42.  
    43. /* > 表示设置当前元素下的直接子元素（儿子元素） */
    44.  
    45. .username>img {
    46.     /* 隐藏元素 */
    47.     display: none;
    48.     width: 120px;
    49.     height: 113px;
    50. }
    51.  
    52. /* :focus 当前元素获得焦点 */
    53.  
    54. /* :focus-within 当前元素或其子元素获得焦点 */
    55.  
    56. .username:focus-within>img {
    57.     display: block;
    58. }
    59.  
    60. .username:focus-within>input {
    61.     /* 修改输入框的边框颜色 */
    62.     border-color: #f29855;
    63. }
    64.  
    65. /* ~表示定位当前元素后的所有兄弟元素 */
    66.  
    67. /* 当前 class=username 的元素或其子元素获得焦点时，隐藏其后的同级兄弟 img 元素 */
    68.  
    69. .username:focus-within~img {
    70.     display: none;
    71. }
    72.  
    73. ​

     第三步：编写“用户名”&“密码”输入框

    index.html 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>shixun.onlinetitle>
    9.     
    10.     <link rel="stylesheet" href="css/style.css">
    11. head>
    12.  
    13. <body>
    14.     <form class="login-form" action="#" method="POST">
    15.         <h1>实训在线-登录h1>
    16.         <input type="text" name="name" placeholder="用户名...">
    17.         <input type="password" name="password" placeholder="密码...">
    18.     form>
    19. body>
    20.  
    21. html>

    style.css

    1. body {
    2.     margin: 0;
    3.     padding: 0;
    4.     background-image: url(../images/bg.jpg);
    5.     background-repeat: no-repeat;
    6.     background-size: cover;
    7. }
    8.  
    9. .login-form {
    10.     width: 300px;
    11.     background: #191919;
    12.     padding: 30px;
    13.     /* 水平居中处理 */
    14.     margin: 10% auto 0 auto;
    15.     /* 圆角效果 */
    16.     border-radius: 30px;
    17.     opacity: 0.6;
    18.     text-align: center;
    19. }
    20.  
    21. .login-form h1 {
    22.     color: white;
    23.     font-weight: 500;
    24. }
    25.  
    26. .login-form input[type="text"], .login-form input[type="password"] {
    27.     background: none;
    28.     width: 200px;
    29.     border: 2px solid #3498db;
    30.     border-radius: 25px;
    31.     font-size: 16px;
    32.     margin: 10px auto;
    33.     padding: 14px 10px;
    34.     text-align: center;
    35.     outline: none;
    36.     color: white;
    37.     /* CSS3 过渡效果，设置时长 */
    38.     transition: 0.25s;
    39. }
    40.  
    41. .login-form input[type="text"]:focus, .login-form input[type="password"]:focus {
    42.     width: 280px;
    43.     border-color: #2ecc71;
    44. }

    第四步：编写“登录”&“重置”按钮

    index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>shixun.onlinetitle>
    9.     
    10.     <link rel="stylesheet" href="css/style.css">
    11. head>
    12.  
    13. <body>
    14.     <form class="login-form" action="#" method="POST">
    15.         <h1>实训在线-登录h1>
    16.         <input type="text" name="name" placeholder="用户名...">
    17.         <input type="password" name="password" placeholder="密码...">
    18.         <input type="submit" value="登 录">
    19.         <input type="reset" value="重 置">
    20.     form>
    21. body>
    22.  
    23. html>

    style.css (同上)

    查看效果

    项目总结，通过此项目的学习了解以下知识点内容：

    • 掌握如何利用 CSS3 设置背景图片：background-image: url(../img/bg.jpg)
    • 掌握如何利用 CSS3 设置元素的透明效果：opacity: 0.6;
    • 掌握如何利用 CSS3 设置圆角效果：border-radius: 25px;
    • 掌握如何利用 CSS3 实现过渡效果：transition: 0.25s;
    • 掌握 CSS 中属性选择器和伪类选择器的使用方法
  • 相关阅读:
    Rust根据条件删除相邻元素：dedup
    1766. 互质树 DFS+桶
    Candence Virtuoso基本电路设计（一）
    微前端一：技术选型
    计算机网络知识点总结（每日更新）
    第6章 如何产生优秀的 Micro SaaS 创意
    分片并不意味着分布式
    markdown语法整理
    【TypeScript】带类型语法的JavaScript
    SpringBoot-JSR303数据校验
  • 原文地址：https://blog.csdn.net/iamcnnetiger/article/details/127107621