[散修弟子]CSS-7961|2019年10月12日的日报-技能树.IT修真院

发表于： 2019-10-12 07:17:46

1 933

今天完成的事

1.根据网上的思路解决git的账号密码问题成功将修改推送到gitee

2.码云需要手动重新部署更新pages服务来更新网站 git是自动更新

后面看到了自动更新pages是收费服务

3.继续完成护工列表在less中的样式架构

4.重新优化架构单行

<div class="p">
        <span class="span1">服务日期</span>
        <div class="pp">
            <p1 class="t1 text">
                2015-7-5至2015-7-12
            </p1>
            <p1 class="t2 text">
                25元/小时
            </p1>
        </div>
        <span class="span2">北京.通州.果园</span>
    </div>

5.在less中添加样式

.div1 {
    .flex;
    flex-direction: column;
    padding: 100px 0px 50px 0px;
    margin: 0px;
    overflow-y: hidden;
    z-index: -1;
    .p {
        .widht(100%);
        .border-silver;
        padding: 20px 0 19px 0;
        span {
            .flex;
            .widht(0);
            flex-direction: column;
            height: 20px;
            background-image: url(列表页.png);
            background-repeat: no-repeat;
            background-size: 400px;
        }
        .span1 {
            background-position: -10px 5px;
            white-space: nowrap;
            padding-left: 25px;
            color: silver;
        }
        div {
            .flex;
            .widht(100%);
            justify-content: space-between;
            padding-left: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 21px;
            font-size: 0;
            padding-top: 4px;
            .text {
                .block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                vertical-align: middle;
            }
            .t1 {
                font-size: 14px;
                height: 16px;
            }
            .t2 {
                font-size: 16px;
                color: red;
                background-image: url(矢量智能对象.png);
                background-repeat: no-repeat;
                background-position: 80px;
                padding-right: 70px;
            }
        }
        span {
            background-position: -10px -50px;
            white-space: nowrap;
            padding-left: 25px;
            color: silver;
        }
    }
}

6.重新优化架构footer部分

<footer class="footer">
    <input type="submit" value="首页">
    <input class="i2" type="submit" value="">
    <input class="i3" type="submit" value="我的">
</footer

7.添加样式

.footer {
    .inline-flex;
    .fixed;
    .widht(100%);
    .height(60px);
    bottom: 0px;
    background-color: rgb(248, 250, 251);
    align-items: center;
    justify-content: space-around;
    input {
        .pointer;
        margin-top: 20px;
        height: 100%;
        background: url("home.png") no-repeat center top;
        background-size: 20px;
        font-size: 10px;
        border: solid rgb(248, 250, 251)
    }
    .i2 {
        margin: 0px;
        width: 60px;
        background: url("task5.jpg") no-repeat center top;
        background-size: 50px;
    }
    .i3 {
        background: url("man.png") no-repeat center top;
        background-size: 20px;
    }

}

8.优化less中的代码并将公用类添加到单独less文件中

.back-s(@back-s) {
    background-size: @back-s;
}
.bcak-no-r {
    background-repeat: no-repeat;
}
.back-size(@back-size) {
    background-size: @back-size;
}
.back-pos(@back-pos) {
    background-position: @back-pos;
}

9.在设置中添加修改选中行的颜色设为白色

10.开始个人主页部分

11.架构个人主页header部分

<header>
    <div>
        <
    </div>
    <div>
        个人主页
    </div>
</header>

12.添加样式

header {
    .widht(100%);
    background-color: rgb(95, 192, 205);
    .fixed;
    .height(50px);
    div {
        margin-top: 12px;
        .absolute;
        color: white;
        font-size: 18px;
        left: 10px;
    }
    .text {
        left: 50%;
        margin-left: -28px;
        font-size: 14px;
        margin-top: 14px;
    }
}