今天完成的事：

1.重新学习了一下伪类以及<audio>标签

2.开始任务七的第二个页面布局，已完成。代码如下：

css代码如下：

html {
    font-size: 62.5%;
}

body {
    width: 100%;
    background: #29bde0;
}

.header {
    width: 100%;
    height: 8rem;
    background-color: #29bde0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border: #29bde0;
}

.button1, .text, .button2 {
    background-color: #29bde0;
    border: none;
}

.button1 {
    padding-right: 30rem;
}

.text {
    font-size: 3rem;
}

.button2 {
    padding-left: 30rem;
}

.header1 {
    background-color: #b9e9f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8rem;
    width: 100%;
}

.header1 audio {
    display: none;
}

.text2 {
    font-size: 4rem;
    padding-left: 5rem;
}

.header1 img {
    padding-right: 3rem;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 25px dashed;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    margin-left: 10rem;
    color: #b9e9f5;
}

.text3 {
    height: 4rem;
    font-size: 2rem;
    padding-top: 1rem;
    padding-left: 5rem;
}

.aaa {
    display: flex;
    justify-content: space-around;
    height: 17rem;
    /*设置滚动条*/
    overflow: auto;
}

main {
    width: 100%;
    height: 100rem;
}

.main {
    width: 12rem;
    height: 12rem;
    background-color: #83b09a;
    border: 4px solid #ffffff;
}

.box1 {
    height: 10rem;
    background-color: #f5c97b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}

.box2 {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo {
    height: 5rem;
    width: 12rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 0.1rem;
    /*此元素不会显示，隐藏此元素*/
    display: none;
}

/*使用动态伪类选择器：hover属性：当鼠标悬浮在元素上方时，想元素添加样式*/
.main:hover .photo {
    /*此元素将显示为块级元素，此元素前后会带有换行符。*/
    display: block;
    margin-top: 1rem;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #29bde0;
}

.button {
    font-size: 3rem;
    padding: 2rem 20rem;
    background-color: #fbb435;

}

以上就是今天完成的事情。

明天计划的事：继续任务七的另外两个页面的布局。

遇到的问题：在使用<audio>标签的时候陷入了僵局。不能让img和<audio>关联起来，后来在师兄的教导下引入了js对象后解决了这个问题。感谢师兄

收获：完成任务七的第二个页面的布局.