今天完成的事情： 

写了任务7的第一个页面，第一个页面并不是很难，我先上百度了解了三条线，怎么能写出来，然后自己写加上理解，写了一个3条线，下面是我的代码，做了调试，适应页面。

width: 1.9rem;
height: 0.2rem;
border-top: 0.2rem solid #ffffff;
border-bottom:0.2rem solid #ffffff;
background-color: #ffffff;
padding: 0.5rem 0;
margin-left: 30px;
background-clip:content-box;

然后做好了导航栏。

然后就是写箭头，因为昨天已经写过了，所以先把代码复制过来，然后到页面上面调试，解决了箭头的问题，我的代码。

width: 30px;
height: 30px;
border-top: 6px solid #e7e7e7;
border-right: 6px solid #e7e7e7;
transform: rotate(45deg);
margin-right: 20px;

内容部分我用的是一个大盒子，包裹住给大盒子一个外边距，然后里面的小盒子，用了一个内边距，做出效果，跳转页面的地方我用了一个超链接，前提是你的任务上传到github上，才能使用

<a  href="https://maikihyh.github.io/task/html/task1.html">

这个是我的代码，里面是我的任务1。

盒子里面内容居中，我仍然用到了flex

display: flex;
justify-content: center;
align-items: center;

用这个代码解决了盒子里面内容居中的问题，并且达到垂直居中，自适应，而且flex弹性布局，页面改变它也会改变，所以不用担心，在其他浏览器中的问题，手机端也可以表现出来。

我还写了任务7第二个页面的导航栏，导航栏那个图标，我用的是一个盒子包裹住三条线然后做出来的

下面是我的代码

.header span{
    border: 2px solid white;
    padding: 8px;
    margin-left: 80px;
}
.header  span div{
width: 1.9rem;
height: 0.2rem;
border-top: 0.2rem solid #ffffff;
border-bottom:0.2rem solid #ffffff;
background-color: #ffffff;
padding: 0.5rem 0;
background-clip:content-box;
}

并且调试，然后适应屏幕做出效果。

还有×符号，我也是百度找的的代码，一开始找不到只找到了，html的符号，但是一个优秀的web，是要自己写的，所以我就用

.event{
    margin:100px;
    width: 20px;
    height:5px;
    background: white;
    transform: rotate(45deg);
}
.event:after{
    content:'';
    display:block;
    width: 20px;
    height:5px;
    background: white;
    transform: rotate(-90deg);

前面用一个斜的长方形粗线条，然后后面插入一个，旋转90度的粗线条，达到叉的效果。

明天计划的事情：

写出来第二个页面，写出来音乐播放的按钮，然后能播放音乐。

遇到的问题：

仍然是定位的问题，今天那个三角的定位，纠结了很久，现在想来有很多办法，我总结了一下

1，绝对定位这个很简单，给外面的大盒子一个相对定位的元素，然后再给三角一个绝对定位，加上一个这个元素

transform: translatey(-50%)

就达到了垂直居中的效果，但是需要调试，很繁琐。

2，排版用正常的排版，把他排到那个位置，就是把他挤过去，用旁边的元素，给外面的大盒子一个

align-content: center;

就可以达到垂直居中的效果。

3，flex用flex解决也很方便，如果你的排版有问题，并不是很规范，那你就可以用flex，先给三角一个变成行内元素的，然后用flex布局，完美解决垂直居中问题。

收获：

自己学到了几个垂直居中方法，叉怎么写出来，还有规范了一下自己css语言，做了一个任务页面。