[郑州|结业弟子]CSS-刘高阳|2019年11月01日的日报-技能树.IT修真院

发表于： 2019-11-01 23:17:15

1 988

今天做的事

今天把任务4做完了

开始思路很迷不知道从哪里做

然后看了之前师兄的日报心里大概有了流程

从上到下一个一个盒子写

由于对整体的认知还不是很清晰

步骤有些部分繁琐有些部分取巧

效果如图

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="task.4.css">

</head>
<body>
<div class="boss">

    <div class="one">
        <div class="one1">
            注册
        </div>
        <div class="one2">
            登录
        </div>
        <div class="one3">
            关闭
        </div>
    </div>


        <div class="two">
            <img class="two1" src="../img/iphone2.png" height="50" width="35"/>
             <div class="two2">
             </div>

                <input class="two3" type placeholder="请输入手机号"
                       maxlength="11">


        </div>
    <div class="there">

        <img class="there1" src="../img/locked 23.png" height="43" width="29"/>
        <div class="there2">
        </div>

        <input class="there3" type =password placeholder="请输入密码"
               maxlength="20"
        >
    </div>
<div class="four">
           登录
           </div>
    <div class="five">
        忘记密码?
    </div>







</div>

</body>

body{
    margin: 0;
    background: #eff0f4;


}
.one{
    background: #5fc0cd;
    height: 90px;
    display: flex;
    justify-content:space-between;
    align-items: center;

}
.one1{

    color: azure;
    font-size: 32px;
margin-left: 25px;
}
.one2{

    color: azure;
    font-size: 32px;


}
.one3{

    color: azure;
    font-size: 32px;
margin-right: 25px;

}
.two{
    background: #ffffff;
    height: 100px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.two1{
    margin-left: 45px;

}
.two2{

    margin-left: 50px;
    height:40px; border:1px
     solid #e9eced;

}
.two3{
    margin-left: 50px;

    border:none;
  height: 25px;
    outline: none;
    font-size: 30px;

}
.there{  background: #ffffff;
    height: 100px;
    margin-top: 20px;
    display: flex;
    align-items: center;

}
.there1 {
    margin-left: 45px;
}
.there2
{margin-left: 50px;
    height:40px; border:1px
solid #e9eced;

}
.there3{
    margin-left: 50px;

    border:none;
    height: 25px;
    outline: none;
    font-size: 30px;

}
.four{
    margin-top: 20px;
    background: #5fc0cd;
    height: 90px;
    display: flex;
    justify-content: center;
    color: azure;
    font-size: 32px;
    align-items: center;

}
.five{
    color: #5fc0cd;
    float: right;
    margin: 13px 20px;
    font-size: 30px;
}