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

发表于： 2022-08-17 19:30:51

0 809

今天将任务五第一版示图完成了个大概。

css代码：


* {
    margin: 0;
    padding: 0;
}

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

.navigation {
    background-color: #5fc0cd;
    height: 100px;

}

.navigation img {
    float: left;
    margin: 25px 30px;
}


.navigation p {
    color: white;
    font-size: 36px;
    text-align: center;
    padding-top: 19px;
}


.background {
    height: 329px;
    position: relative;
}

.background img {
    width: 100%;
    height: 328px;
}

.background p {
    /*display: inline-block;*/
    position: absolute;
    color: white;
    top: 0;
    /*left: 0;*/
    font-size: 32px;
}

.skill {
    height: 100px;
}

.skill em {
    display: inline-block;
    font-style: normal;
    font-size: 32px;
    color: #5fc0cd;
    margin: 32px 27px 0 30px;
}

.skill p{
    display: inline-block;
    font-size: 32px;
    color: #333333;
    font-weight:bold;

}

.introduce {
    height: 74px;
}

.introduce p {
    display: inline-block;
    font-size: 32px;
}

.introduce em {
    font-size: 32px;
    display: inline-block;
    font-style: normal;
    color: #e1e5e7;
    margin: 0 17px 0 19px;

}

.dormitory {
    display: inline-block;
    margin: 36px 9px 0 60px;
}

.restaurant {
    display: inline-block;
    margin: 0 9px 0 0;
}

.working-age {
    height: 125px;
}

.demand {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    margin-left: 60px;

}

.content {
    display: inline-block;
    font-size: 32px;

}

.working-age em {
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    margin: 33px 23px 0 23px;

}

.working-hours {
    height: 104px;
}

.working-hours em {
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    margin: 33px 23px 0 23px;
}

.work {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    margin-left: 60px;
}

.time {
    display: inline-block;
    font-size: 32px;
}

.price {
    height: 103px;
}

.price em {
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    margin: 33px 23px 0 23px;

}

.service {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    margin-left: 60px;

}

.hourly-wage {
    display: inline-block;
    font-size: 32px;
    color: red;

}

.self-introduction {
    height: 150px;

}

.self-introduction em{
    display: inline-block;
    font-size: 32px;
    font-style: normal;
    color: #e1e5e7;
    margin: 33px 23px 0 23px;

}

.self {
    display: inline-block;
    font-size: 32px;
    color: #a6a6a6;
    margin-left: 60px;
}

.introduce {
    display: inline-block;
    font-size: 28px;
    width: 50%;
    margin-top: 30px;

}

.contact-information {
    height: 100%;
}

.respond {
    display: inline-block;
    float: left;
    border-style: solid;
    border-color: #5fc0cd;
    width: 45%;
    height: 5%;
    border-radius: 10px;
    margin: 10% 2%;

}

.respond p {
    text-align: center;
    color: #5fc0cd;
    font-size: 32px;
    margin-top: 17px;
}

.telephone {
    display: inline-block;
    background-color: #5fc0cd;
    float: right;
    width: 45%;
    height: 5%;
    border-radius: 10px;
    margin: 10% 2%;

}

.telephone p {
    text-align: center;
    color: white;
    font-size: 32px;
    margin-top: 17px;
}

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="homepage.css">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="navigation">
        <img src="tupian/150%25%20返回.png" alt="返回">
        <p>个人页面</p>
    </div>
    <div class="background">
        <img src="tupian/38a17cec12b0df5f8a4188382ba0e279e7c6e6def0df-X2hc7H.png"alt="背景">
        <p>高素雅 51岁 北京.通州.果园</p>
    </div>
    <div class="skill">
        <em>|</em>
        <p>专业技能</p>
    </div>
    <div class="introduce">
        <img class="dormitory" src="tupian/形状%204%20拷贝%203.png" alt="小图标">
        <p>住家</p>
        <em>|</em>
        <img class="restaurant" src="tupian/形状%204%20拷贝%204.png" alt="小图标">
        <p>不含餐</p>
    </div>
    <div class="working-age">
        <hr style="border: 1px solid #a6a6a6; margin-top: 27px; margin-left: 30px"/>
        <p class="demand">从业年龄</p>
        <em>|</em>
        <p class="content">0~3年</p>
    </div>
    <div class="working-hours">
        <hr style="border: 1px solid #a6a6a6; margin-left: 30px"/>
        <p class="work">工作时间</p>
        <em>|</em>
        <p class="time">全天</p>
    </div>
    <div class="price">
        <hr style="border: 1px solid #a6a6a6; margin-left: 30px"/>
        <p class="service">服务价格</p>
        <em>|</em>
        <p class="hourly-wage">25元/小时</p>
    </div>
    <div class="self-introduction">
        <hr style="border: 1px solid #a6a6a6; margin-left: 30px"/>
        <p class="self">自我介绍</p>
        <em>|</em>
        <p class="introduce">可以洗衣、做饭、照顾老人。在护工方面有五年的经验，经验丰富。</p>
    </div>
    <div class="contact-information">
        <hr style="border: 1px solid #a6a6a6"/>
        <div class="respond">
            <p>留言</p>
        </div>
        <div class="telephone">
            <p>电话联系</p>
        </div>
    </div>
</div>
</body>
</html>