实战演练—另类登录网页（2）

本文链接：https://blog.csdn.net/weixin_42190209/article/details/104812774

文章目录

前言

大家一定要注意选择器是选择的那块内容也就是css对html中的那部分动手
很多属性第一篇都以说过就不再过多赘述，
忘记了可以看一下第一篇。回顾一下
一定要重视css的盒子模型！

运行效果

在这里插入图片描述

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
<!--    这是fontawesomeCDN CDN就是内容分发网络。效果就是不用下载就可以用下面代码中引用的图标
        具体大家可以自行百度了解-->
    <link href="https://cdn.bootcss.com/font-awesome/5.12.1/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="loginBox">
        <img class="user" src="../img/user.jpg" width="100px" height="100px">
        <h3>Sign in here</h3>
        <form>
            <div class="inputBox">
<!--                引用的图标，大家可以百度搜索fontawesome，下面是网站
                http://www.fontawesome.com.cn/faicons/-->
                <span><i class="fa fa-user" aria-hidden="true"></i></span>
                <input type="text" name="" placeholder="Username">
            </div>
            <div class="inputBox">
                <span><i class="fa fa-lock" aria-hidden="true"></i></span>
                <input type="password" name="" placeholder="Password">
            </div>
                <input type="submit" name="" value="Login">
        </form>
        <a href="#">Forget Password</a>
    </div>
</body>
</html>

css部分

body
{
    /*这里就是设置边界的不多说了*/
    margin: 0;
    padding: 0;
    /*背景图片*/
    background: url("../img/bg2.jpg");
    /*font-family 规定元素的字体系列。
     sans-serif就是无衬线字体，是一种通用字体族。*/
    font-family: sans-serif;
    /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
    background-size: cover;
}
.loginBox
{
    /*下面四行代码实现居中*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    /*min-height属性设置元素的最低高度*/
    min-height: 200px;
    background: #fff;
    /*圆润度*/
    border-radius: 10px;
    /*内边距*/
    padding: 40px;
    /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度*/
    box-sizing: border-box;
}
.user
{
    /*auto	浏览器计算外边距。*/
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}
h3
{
    margin: 0;
    padding: 0 0 20px;
    color: #262626;
    text-align: center;
}
/*后代选择器*/
.loginBox input
{
    width: 100%;
    margin-bottom: 20px;
}
/*又出现了--属性选择器
    注意input后没有空格！！！*/
.loginBox input[type="text"],
.loginBox input[type="password"]
{
    border: none;
    border-bottom: 2px solid #262626;
    outline: none;
    height: 40px;
    color: #262626;
    background: transparent;
    font-size: 16px;
    padding-left: 20px;
    box-sizing: border-box;
}
/* :focus 选择器用于选择具有焦点的元素*/
.loginBox input[type="text"]:focus,
.loginBox input[type="password"]:focus
{
    border-bottom: 2px solid #f00;
}
.inputBox
{
    position: relative;
}
.inputBox span
{
    position: absolute;
    top: 10px;
    color: #262626;
}
.loginBox input[type="submit"]
{
    border: none;
    outline: none;
    height: 40px;
    font-size: 16px;
    background: #ed292a;
    color: #fff;
    border-radius: 20px;
    /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
    pointer	光标呈现为指示链接的指针（一只手）*/
    cursor: pointer;
}
.loginBox a
{
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    /*去掉连接下划线*/
    text-decoration: none;
    text-align: center;
    /*display 属性规定元素应该生成的框的类型。
    block	此元素将显示为块级元素，此元素前后会带有换行符。*/
    display: block;
}