0714 布局

        <!-- 右侧 -->
        <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;
}