右侧布局案例

PH中文网右侧

html代码

<div class="right">
            <div class="right-mx">
              <div class="right-top">
                <a class="tx"href=""><img src="/HTML/img/tx.png" alt=""></a>
                <a class="wz" href="">
                  <span>同步APP学习</span>
                </a>
              </div>
              <div class="right-main">
                <button class="dl">登录</button>
                <button class="zc">注册</button>
              </div>
              <div class="right-foot">
                <div class="title">
                  <div class="title1">问答社区</div>
                  <a href="" class="title2">答疑</a>
                </div>
                <div class="item">
                  <ul class="lb">
                    <li>
                      <span>头条</span>
                      <a href="">3.9公益课</a>
                    </li>
                        <li>
                      <span>头条</span>
                      <a href="">3.8公益课111</a>
                    </li>
                        <li>
                      <span>头条</span>
                      <a href="">3.8公益课111112</a>
                    </li>
                        <li>
                      <span>头条</span>
                      <a href="">3.8公益课222</a>
                    </li>
                        <li>
                      <span>头条</span>
                      <a href="">3.8公益课</a>
                    </li>
                  </ul>
                </div>
              </div>
              </div>
            </div>

css样式

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
main .right .right-mx {
  display: grid;
  place-items: center;
  grid-template-rows: 60px 90px 250px;
}
main .right .right-top {
  display: grid;
  grid-template-columns: 40px 110px;
  grid-template-rows: 40px;
}
main .right .right-mx .right-top img {
  margin-left: 0px;
  width: 100%;
  border-radius: 100px;
}
main .right .right-top .wz {
  margin: 20px 0px 0px 5px;
  width: 82px;
  font-size: 14px;
  color: rgb(139, 139, 139);
}
main .right .right-top .tx {
  margin: 10px 0px 0px 0px;
}
main .right .right-top span:hover {
  color: red;
}
main .right .right-main button {
  width: 70px;
  height: 34px;
  border: 0px solid black;
  border-radius: 16px;
}
main .right .right-mx .right-main {
  margin: 28px 10px;
}
main .right .right-main .dl {
  background-color: red;
  color: #fff;
}
main .right .right-main .zc {
  background-color: aliceblue;
  border: 1px solid rgb(179, 179, 179);
}
main .right .right-foot {
  display: grid;
  grid-template-rows: 20px 1fr;
  place-items: center;
}
main .right .right-foot .title {
  display: grid;
  grid-template-columns: 56px 94px;
  place-items: center;
}
main .right .right-foot .item {
  display: grid;
  grid-template-columns: 28px 122px;
}
main .right .right-foot .lb li {
  display: grid;
  grid-template-columns: 28px 112px;
  place-items: center start;
  gap: 10px;
}
main .right .right-foot .item a {
  margin: 10px 0px;
  color: rgb(131, 131, 131);
  font-size: 14px;
}
main .right-foot .title2 {
  color: #fff;
  background-color: coral;
  font-size: 14px;
}

效果图