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

发表于： 2019-10-15 06:55:18

1 1026

今天完成的事

1.架构个人主页部分

2.架构缩略图像与姓名部分

<div class="div1">
    <div class="div1-1">
        <div class="div1-1-1">
            <img class="img1" src="椭圆1.png">
        </div>
        <div class="div-1-1">
            <p class="p">高素雅 51岁</p>
            <br>
            <img class="img2" src="Shape4.png">
            京城 · 四方 · 报纸林
        </div>
    </div>

</div>

3.引入样式

.div1 {
    margin: 0;
    padding: 50px 0;
    overflow-y: auto;
    .widht(100%);
    .flex-d-column;
    .flex;
    .div1-1 {
        background: url("p1.png");
        .back-size(105% auto);
        .bcak-no-r;
        .center;
        font-size: 12px;
        .inline-flex;
        .div1-1-1 {
            margin: 35px 0 35px 20px;
            .white;
            .img1 {
                .height(80px);
            }
            .name {
                font-size: 18px;
                margin: 0;
            }
            .img2 {
                .height(14px);
            }
        }
    }
}

4.架构专业技能部分

<div class="div2">
        <p class="p1">专业技能</p>
    </div>

5.引入样式并使用伪元素before

.div2 {
        .inline-flex;
        .center;
        padding: 15px;
        font-size: 12px;
        .p1 {
            padding-left: 10px;
        }
    }
    .div2::before {
        content: "";
        .block;
        .width(2px);
        .height(14px);
        background-color: rgb(95, 192, 205);
    }

6.架构住宿饮食部分

    <div class="div3">
        <img src="形状4.png" class="img">
        <p class="p">住家</p>
        <img src="形状4.png" class="img">
        <p class="p">不含餐</p>  
    </div>

7.引入样式

    .div3 {
        .div2;
        .div2::before {
            display: none;
        }
        .img {
            .height(14px);
            padding-left: 10px;
        }
        .p {
            padding-left: 10px;
        }
    }

8.完成剩余主体部分架构

    <div class="div3">
        <p class="nowrap color4">从业年限</p>
        <p class="color4">|</p>
        <p class="c">0～3年</p>
    </div>
    <div class="div3">
        <p class="nowrap color4">工作时间</p>
        <p class="color4">|</p>
        <p class="c">全天</p>
    </div>
    <div class="div3">
        <p class="nowrap color4">服务价格</p>
        <p class="color4">|</p>
        <p class="red">25元/小时</p>
    </div>
    <div class="div3">
        <p class="nowrap color4">自我介绍</p>
        <p class="color4">|</p>
        <p class="c">可以洗衣做饭照顾老人，
            可以洗衣做饭照顾老人，
            可以洗衣做饭照顾老人，
            可以洗衣做饭照顾老人，
        </p>
    </div>

9.重复引入样式

    .div3 {
        .div2;
        .div2::before {
            display: none;
        }
        .img {
            .height(14px);
            padding-left: 10px;
        }
        p {
            padding-left: 10px;
        }
        .nowrap {
            white-space: nowrap;
        }
        .red {
            color: red;
        }
    }

10.架构footer部分

<footer>
        <input type="button"
               class="i1"
               value="留言">
        <input type="button"
               class="i1 i2"
               value="电话联系">
</footer>

11.引入样式

footer {
    .flex;
    .fixed;
    .white-b;
    bottom: 0;
    .width(100%);
    .height(50px);
    flex-direction: row;
    .i1 {
        .width(100%);
        flex-grow: 1;
        margin: 4px;
        .white-b;
        outline: medium;
        border: 2px solid .color5;
        border-radius: 5px;
        .color5;
    }
    .i2 {
        .white;
        .color3;
    }

}