Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:内容写的挺好的,就是这名字。。。。
<!-- 右侧 -->
<div class="right">
<div class="right-top">
<div class="right-top-left">
<a href=""><img src="https://www.php.cn/static/images/user_avatar.jpg" alt="" /></a>
<div class="right-top-left-right">
<a href="">小言</a>
<span>P豆 2222</span>
</div>
</div>
<div class="right-top-right">
<a href="">我的学习</a>
</div>
</div>
<div class="right-bottom">
<div class="item">问答社区 <a href="">答疑</a></div>
<div class="items"><span>头条</span> <a href="">我的头条</a></div>
<div class="items"><span>头条</span> <a href="">我的头条</a></div>
<div class="items"><span>头条</span> <a href="">我的头条</a></div>
<div class="items"><span>头条</span> <a href="">我的头条</a></div>
<div class="items"><span>头条</span> <a href="">我的头条</a></div>
</div>
</div>
<!-- 右侧end -->
<!-- 底部右侧 -->
<div class="bottom-right">
<div class="bottom-right-left">
<a href=""><img src="static0714/images/wx.png" alt=""></a>
<a href="">官方公众号</a>
</div>
<div class="bottom-right-left">
<a href=""><img src="static0714/images/qq.png" alt=""></a>
<a href="">官方公众号</a>
</div>
</div>
<!-- 底部右侧end -->
/* 右边 */
main .right{
display: grid;
grid-template-rows: 140px 260px;
background-color: aquamarine;
}
main .right .right-top{
/* background-color: aqua; */
display: grid;
grid-template-rows: 90px 50px;
place-items: center;
border-bottom: 1px solid #eeeeee;
}
/* 头像 名字 */
main .right .right-top .right-top-left{
display: grid;
grid-template-columns:60px 130px;
}
main .right .right-top .right-top-left img{
margin: 30px;
width: 50%;
border-radius: 50%;
}
main .right .right-top .right-top-left .right-top-left-right{
display: grid;
grid-template-rows:45px;
place-items: center left;
margin: 10px;
}
main .right .right-top .right-top-left .right-top-left-right span{
color: #999;
font-size: 12px;
margin-top: -10px;
}
/* 我的学习 */
main .right .right-top .right-top-right a{
display: block;
background-color: red;
border-radius: 100px;
height: 34px;
width: 150px;
text-align: center;
line-height: 34px;
color: #fff;
margin-bottom:30px;
}
/* 侧栏 */
main .right .right-bottom{
display: flex;
flex-direction:column;
}
main .right .right-bottom .item{
height: 40px;
font-size: 16px;
display: flex;
justify-content:center;
align-items:center;
}
main .right .right-bottom .item a{
background-color: red;
height: 16px;
width: 30px;
color: #fff;
font-size: 12px;
line-height: 16px;
margin-top: 5px;
text-align: center;
}
main .right .right-bottom .items{
display: flex;
flex-grow:1;
justify-content:center;
align-items:center;
}
main .right .right-bottom .items span{
width: 50px;
}
main .right .right-bottom .items a{
color: #999;
}
main .right .right-bottom .items a:hover{
color: red;
}
/* 右边end */
/* 底部右侧 */
main .navs .bottom-right{
display: flex;
flex-direction: row;
}
main .navs .bottom-right .bottom-right-left{
background-color: #fff;
width: 50%;
display: grid;
grid-template-columns:90px;
place-items: center;
}
main .navs .bottom-right .bottom-right-left img{
width: 40%;
margin-left: 25px;
}
main .navs .bottom-right .bottom-right-left a:hover{
color: red;
}