实战演练—另类登录网页(3)【选自b站】

文章目录

      • 运行效果
      • html代码
      • css代码

运行效果

html代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <div class="loginBox">
        <img src="../img/user.jpg" class="user">
        <h2>Login in hereh2>
        <form>
            <p>Usernamep>
            <input type="text" name="" placeholder="Username">
            <p>Passwordp>
            <input type="password" name="" placeholder="Password">
            <input type="submit" name="" value="Sign in">
            <a href="#">Forget Passworda>
        form>
    div>
body>
html>

css代码

我没有加注释,前两篇都有详细的注释,这里可以自测一下

body
{
    margin: 0;
    padding: 0;
    background: url("../img/bg2.jpg");
    background-size: cover;
    font-family: sans-serif;
}
.loginBox
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 420px;
    padding: 80px 40px;
    box-sizing: border-box;
    background: rgba(0,0,0,.5);
}
.user
{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: calc(-100px/2);
    left: calc(50% - 50px);
}
h2{
    margin: 0;
    padding: 0 0 20px;
    color: #fff;
    text-align: center;
}
.loginBox p{
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #fff;
}
.loginBox input{
    width: 100%;
    margin-bottom: 20px;
}

.loginBox input[type="text"],
.loginBox input[type="password"]{
    border: none;
    border-bottom: 2px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}
.loginBox input[type="submit"]{
    border: none;
    outline: none;
    height: 40px;
    color: #ffffff;
    font-size: 16px;
    background: #ff6347;
    cursor: pointer;
    border-radius: 20px;
}
.loginBox input[type="submit"]:hover{
    background: #32cd32;
    color: #ffffff;
}
.loginBox a
{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

代码示例都在b站可以找到视频,我是跟着视频敲的。自我学习。

你可能感兴趣的:(个人总结)