博客系统的四个页面展示效果:

  .child1{
            background-color:red;
            height:300px;
            width:300px;
            margin-bottom:30px;
        }
        .child2{
            background-color:green;
            height:300px;
            width:300px;
            margin-top:20px;;
        }
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

1.先做一个练习实现一个登陆界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing:border-box;
        }
        .father1{
            background-color:grey;
            height:300px;
            width:500px;
            /* 实现块级元素在水平方向上垂直居中 */
            margin:0 auto;
            /* 控制登陆界面的大的背景在父亲背景中水平垂直居中 */
            display:flex;
            justify-content:center;
            align-items:center;   
        }
        .father2{
            /* background-color:red; */
            width:500px;
            height:100px;
        }
        .child{
            /* 实现水平两个h3 input标签实现弹性布局 */
            display:flex;
            justify-content:center;
            align-items:center;
            padding:10px;
        }
        h3{
            /* 控制在背景图中垂直水平居中 */
            text-align:center;
            line-height:10px;
             width:180px;
             height:10px;        
        }
        input{
           
            width:260px;
            height:25px;
            /* 控制输入框字体变大 */
            font-size:20px;
        }
        button{
            width:150px;
            height:40px;
            background-color:orange;
            border:3px ridge grey
        }
        button:active{
            background-color:black;
            color:red;
        }
        .father3{
            display:flex;
            /* 我们发现使用margin:0 auto是无法控制按钮垂直水平居中 */
            justify-content:center;
            align-items:center;
        }   
      
    </style>
</head>
<body>
    <div class="father1">
        <div class="father2">
        <div class="child">
            <h3>用户名</h3><input type="text" class="username">
        </div>
     
    <div class="child">
        <h3>密码</h3> <input type="text" class="password">
    </div>
    <div class="father3">
        <button>提交</button>
    </div>
    </div>
</body>
</html>