[真传弟子]JS-赵立鼐|2019年11月03日的日报-技能树.IT修真院

发表于： 2019-11-03 20:15:24

1 937

今日完成：

完成任务5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task5</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=no">
    <link rel="stylesheet" type="text/css" href="../css/task5.css">
</head>
<body>

<header>
    <a href=""><div class="rollback"></div></a>    个人主页
</header>
<div class="top">
    <img src="../img/photo.png" class="photo">
    <div class="personal">
        <div class="name">高素雅</div>
        <div class="age">51岁</div>
        <div>
            <img src="../img/icon.png" class="icon">
            <div class="address">北京.通州.果园</div>
        </div>
    </div>
</div>
<div class="skill">
<div class="l"></div>
   <strong>专业技能</strong>
</div>
<div class="other">
<img src="../img/star.png" class="star">
    <span>住家</span>
    <div class="barrier"></div>
    <img src="../img/star.png" class="star">
    <span>不含餐</span>
</div>
<div class="other">
<span class="title">从业年限</span>
    <div class="barrier"></div>
    <span class="content">0-3年</span>
</div><div class="other">
    <span class="title">工作时间</span>
    <div class="barrier"></div>
    <span class="content">全天</span>

</div><div class="other">
    <span class="title">服务价格</span>
    <div class="barrier"></div>
    <span class="price">25元/小时</span>
</div>
<div class="introduction">
    <span class="title1">自我介绍</span>
     <div class="last"></div>
       <div  class="intro">可以洗衣、做饭、照顾老人。在护工方面有5年经验，经验丰富。 </div>
</div>

<button type="button"  class="message">留言</button>
<button type="button"  class="phone">电话联系</button>

</body>
</html>


* {
    padding: 0;
    margin: 0;
}

header {
    height: 7vh;
    background-color: rgb(95, 192, 205);
    position: relative;
    text-align: center;
    color: white;
    line-height: 7vh;
    font-size: 3vh;
}

a {
    width: 20px;
    text-decoration: none;
    font-size: x-large;
    color: white;
    display: block;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translate(-50%, -50%);
}

div.rollback {
    height: 15px;
    width: 15px;
    border-radius: 3px;
    transform: rotate(45deg);
    border-left: 2px solid white;
    border-bottom: 2px solid white;
}

div.top {
    height: 26vh;
    /*width: 100%;*/
    background: url("../img/back.png") no-repeat;
    background-size: cover;
    position: relative;

}

.photo {
    position: absolute;
    top: 50%;
    width: 85px;
    transform: translate(0, -50%);
    margin-left: 30px;

}

.personal {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 130px;
}

div.name {
    font-size: 18px;
    color: white;
    display: inline-block;
}

div.age {
    font-size: 14px;
    margin-left: 2px;
    color: white;
    display: inline-block;
}

.icon {
    height: 12px;
    display: inline-block;
}

div.address {

    font-size: 12px;
    margin-top: 5px;
    color: white;
    display: inline-block;
}


div.skill {
    width: auto;
    height: 8vh;
    border: 1px solid transparent;
    border-bottom-color: rgb(225, 229, 231);
    position: relative;
}

div.l {
    width: 20px;
    height: 15px;
    border-right: 2px solid rgb(95, 192, 205);
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    /*display: inline-block;*/
}

strong {
    /*display: inline-block;*/
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin-left: 40px;
}

div.other {
    width: auto;
    height: 8vh;
    position: relative;
    border: 1px solid transparent;
    border-bottom-color: rgb(225, 229, 231);
    margin-left: 3vh;
    line-height: 8vh;
}


.star {
    width: 15px;
    margin-left: 20px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: inline-block;
}

span {
    margin-left: 40px;
}




div.content {
    margin-left: 40px;
    display: inline-block;
}

span.price {
    color: rgb(228, 96, 96);
    margin-left: 40px;
}

button.message {
    width: 40vw;
    height: 6.8vh;
    margin-top: 7vh;
    margin-left: 3vh;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border: 1px solid rgb(90, 192, 206);
    color: rgb(90, 192, 206);
}

button:focus {
    outline: none;
}

button.phone {
    width: 40vw;
    height: 6.8vh;
    margin-top: 7vh;
    margin-right: 3vh;
    background-color: rgb(90, 192, 206);
    border: 1px solid rgb(90, 192, 206);
    border-radius: 10px;
    float: right;
    color: white;
}

div.introduction {
    display: flex;
    /*display: -webkit-flex;*/
    /*align-items : center;*/
    width: auto;
    min-height: 8vh;
    /*position: relative;*/
    border: 1px solid transparent;
    border-bottom-color: rgb(225, 229, 231);
    margin-left: 3vh;
    line-height: 8vh;
    align-items:center;

}

span.title {
    display: inline-block;
    order: 1;
    margin-left: 20px;
    color: rgb(153, 153, 153);
}
span.title1 {
    /*display: inline-block;*/
    order: 1;
    margin-left: 20px;
    color: rgb(153, 153, 153);
    flex-shrink:0;
}
.barrier {
    order: 2;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: inline-block;
    width: 10px;
    height: 17px;
    border-right: 1px solid rgb(225, 229, 231);

}
.last {
    order: 2;
    /*position: absolute;*/
    /*top: 50%;*/
    /*transform: translate(0, -50%);*/
    /*display: inline-block;*/
    width: 14px;
    height: 17px;
    border-right: 1px solid rgb(225, 229, 231);
    flex-shrink:0;

}

div.intro {
    margin-left: 20px;
    order: 3;
    /*height: 100%;*/
    width: auto;
    /*line-height: normal;*/
    /*word-wrap: break-word;*/
    line-height: 20px;
}