[成都|内门弟子]JS-韦骁|2022年08月09日的日报-技能树.IT修真院

发表于： 2022-08-09 19:31:17

1 512

查找了脱离文档的知识：

脱离文档流是指，该元素脱离了文档中。不再占据默认分配的空间，它下面的元素会上去补位。

可以理解为脱离文档流的元素离开了它的座位，后面的同学可以坐前面，坐它的位置。

查询资料过程中发现一个比较有意思的标签

用于对文档中的行内元素进行组合。

标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 应用样式，

那么 元素中的文本与其他文本不会任何视觉上的差异。

标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

该标签可以改变一段文字当中某些特殊字形的颜色元素

示例：

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有
    <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

今天按照示图将任务图整理了一遍：

css代码：

* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100vh;
    background-color: #eff0f4;
    margin: 0 auto;
}

.top {
    height: 40px;
    background-color: #5fc0cd;
}

.head {
    width: 100%;
    padding: 14px 14px 0 14px;
}

.title {
    height: 104px;
    background-color: #5fc0cd;
    margin-bottom: 18px;
}

.close {
    font-size: 32px;
    color: white;
    float: left;
    padding: 24px 30px 27px;
}

.sign-in {
    font-size: 36px;
    color: white;
    float: left;
    margin: 26px 200px;
}

.register {
    font-size: 32px;
    color: white;
    float: right;
    padding: 30px 30px 23px;
}


.user {
    height: 285px;
}

.account {
    height: 100px;
    background-color: white;

}

.account p {
    font-size: 32px;
    color: #e7eaec;
    float: left;
    margin-top: 25px;

}

.account em {
    font-style: normal;
    color: #eaedee;
    font-size: 32px;
    float: left;
    margin: 25px 40px;
}

.password {
    height: 100px;
    background-color: white;
    margin-top: 14px;

}

.password p {
    color: #e7eaec;
    font-size: 32px;
    float: left;
    margin-top: 25px;
}

.password em {
    font-style: normal;
    color: #eaedee;
    font-size: 32px;
    float: left;
    margin: 25px 40px;
}

.mobile-phone {
    float: left;
    margin: 30px;
}

.lock {
    float: left;
    margin: 30px;

}

.confirm {
    height: 321px;

}

.confirm p {
    font-size: 32px;
    color: #83ccd7;
    float: right;
    margin-top: 20px;
    margin-right: 30px;
}

.rectangle {
    height: 96px;
    background-color: #5fc0cd;
}

.rectangle p{
    font-size: 36px;
    color: white;
    float: left;
    margin-left: 315px;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=100%, initial-scale=1.0 ">
    <link rel="stylesheet" href="Landing-page.css">
    <title>Title</title>
</head>
<body>

<div class="box">
    <div class="top">
        <img class="head" src="tupian/Status%20Bar.png" alt="顶部">
    </div>
    <div class="title">
        <p class="close">关闭</p>
        <p class="sign-in">登录</p>
        <p class="register">注册</p>
    </div>
    <div class="user">
        <div class="account">
            <img class="mobile-phone" src="tupian/iphone.png" alt="手机号">
            <em>|</em>
            <p>请输入手机号</p>
        </div>
        <div class="password">
            <img class="lock" src="tupian/locked%202.png" alt="密码">
            <em>|</em>
            <p>请输入密码</p>
        </div>
    </div>
    <div class="confirm">
        <div class="rectangle">
            <p>登 录</p>
        </div>
        <p>忘记密码？</p>
    </div>

</div>
</body>
</html>