今天完成的事情：

1.今天正式决定报名线下，和师兄们一起学习。

2.正在进行任务五，做好了一部分：

还缺少框线、右侧介绍内容、下方的留言以及电话联系按钮。

效果还要继续优化。师兄说图片的间距要严格按照PS图来，要有精确到一个像素的觉悟。于是又花了点时间再看PS的切图。

html代码：

<header>
    <div class="top">
        <img class="back" src="返回.png" alt="返回">
        <div class="title-word">
            个人主页
        </div>
    </div>
</header>

<main>
    <div class="detailed">
        <span class="detailed-1">
            <img class="pic1" src="头像.png" alt="头像"></span>
        <div class="detailed-2">
            <div class="detailed-3">
                <span class="name">贝亚娜</span>
                <span class="age">34岁</span>
            </div>
            <div class="detailed-4">
                <img class="location" src="定位.png" alt="位置">
                <span class="address">阿拉德，银色村庄</span>
            </div>
        </div>
    </div>
    <div class="information">
        <div class="content">
            <span class="skill">职介技能</span>
        </div>
        <div class="content">住家</div>
        <div class="content">从业年限</div>
        <div class="content">工作时间</div>
        <div class="content">服务价格</div>
        <div class="content">自我介绍</div>
    </div>
</main>
</body>

CSS部分：

html{font-size: 62.5%;}

body{margin: 0;
    padding: 0;
    width: 100%;
}
header{
    display: -webkit-flex;
    display: flex;
}

header .top{
    background-color: #68CDD5;
    display: flex;
    width: 100%;
    height: 8.8rem;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
.back{
    height: 3.5rem;
    margin: 0 3.5rem ;
    padding: 0;
    position: absolute;
}
.title-word{
    margin: auto;
    font-size: 3.6rem;
    color: white;
    font-family: STHeitiSC-Light, serif;
}

main .detailed{
    width: 100%;
    height: 32.6rem;
    background-image: url("标题背景.png");
    background-size: cover;
    position: relative;
    display: flex;
    }

.detailed-1{
    display: flex;
    align-items: center;
    position: absolute;
    top:7.9em;
    left:3em;
}

.detailed-2{
    display: flex;
    flex-direction: column;
    position: relative;
    top:11.6rem;
    left:23.9rem;

}
.detailed-3{
    margin-top: 0;
}
.detailed-4{
    margin-top: 2.5rem;}

.pic1{margin: 0;}

.name{
    font-family: STHeitiSC-Light, serif;
    font-size: 3.6rem;
    color: white;
}
.age{
    font-family: STHeitiSC-Light, serif;
    font-size: 2.8rem;
    margin-left: 1rem;
    color: white;
}
.address{
    font-family: STHeitiSC-Light, serif;
    font-size: 2.4rem;
    margin-left: 0.58rem;
    color: white;
}

.information{
    width: 100%;
    height: 79.3rem;
}
main .information .content{
    width: 100%;
    height:8rem;
    font-size: 3.2rem;
    font-family: STHeitiSC-Light, serif;
    padding-left: 5.9rem;
    padding-top: 3.4rem;

}

明天计划的事情：

1.把当前任务的详细介绍栏补充完，加入框线、按钮等效果。

2.回顾之前任务的一些深度思考，一些基础的东西比如em、rem等还是要吃透。

遇到的问题：

1.详细介绍栏的设置了字体大小后，会比html的根元素设置更优先判定，这个地方我不小心忽视掉了，于是出现了间距不一的问题。

还是要多次写一下这个问题，容易遇到。

main .information .content{
    width: 100%;
    height:8rem;
    font-size: 3.2rem;
    font-family: STHeitiSC-Light, serif;
    padding-left: 5.9rem;
    padding-top: 3.4rem;

2.顶栏的文字垂直居中时用错了代码，应该是让单行居中。

align-items: center;

3.感觉代码较长，不过往后熟悉了一些规范后这个问题应该能有比较好的解决方法。

收获：

1.flex布局的align-items属性和align-content，这两个指令都能实现垂直居中，不过align-content只适合多行的flex容器，align-items用来让每一个单行的容器居中。以后使用应该会很多吧，记录一下，

2.PS最新版有个非常厉害的功能

选择想要的图层，右键可以直接获得css代码，例如图上代码为：

.圆角矩形_8 {
    border-style: solid;
    border-width: 2px;
    border-color: rgb(95, 192, 205);
    border-radius: 10px;
    background-color: rgba(95, 192, 205, 0);
    position: absolute;
    left: 33px;
    top: 1148px;
    width: 314px;
    height: 92px;
    z-index: 71;
}

这里也能很直观的看出一些主要参数，如宽高。