仿php中文网首页

小实战

html代码

<div class="right">
                <div class="right-center">
                    <div class="right-center-t">
                        <a href="#"><img src="0325/static/images/user-pic.jpeg" width="40" /></a>
                        <dl>
                            <dt><a href="#" title="" class="aBlack">只如初见</a></dt>
                            <dd>P豆 19</dd>
                        </dl>
                    </div>
                    <a href="" class="right-center-my">我的学习</a>
                </div>
                <div class="right-art">
                    <div class="right-art-t">
                        <span>问答社区</span>
                        <a href="#">答疑</a>
                    </div>
                    <div class="right-art-c">
                        <ul>
                            <li>
                                <div>头条</div>
                                <div><a href="#">3.9号公益直播课</a></div>
                            </li>
                            <li>
                                <div>头条</div>
                                <div><a href="#">3.9号公益直播课</a></div>
                            </li>
                            <li>
                                <div>头条</div>
                                <div><a href="#">3.9号公益直播课</a></div>
                            </li>
                            <li>
                                <div>头条</div>
                                <div><a href="#">3.9号公益直播课</a></div>
                            </li>
                            <li>
                                <div>头条</div>
                                <div><a href="#">3.9号公益直播课</a></div>
                            </li>
                            <li>
                                <div>头条</div>
                                <div><a href="#">3.9号公益直播课</a></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

css代码

/* 右侧 */
main .right {
}
main .right .right-center {
  border-bottom: 1px solid #eeeeee;
  padding: 15px 15px 25px;
}
main .right .right-center .right-center-t {
  display: grid;
  grid-template-columns: 40px 1fr;
}
main .right .right-center .right-center-t img {
  border-radius: 20px;
}
main .right .right-center .right-center-t dl {
  margin-left: 10px;
}
main .right .right-center .right-center-t dl dt {
  margin-bottom: 6px;
}
main .right .right-center .right-center-t dl dt a {
  font-weight: bold;
}
main .right .right-center .right-center-t dl dt a:hover {
  color: #f11717;
}
main .right .right-center .right-center-t dl dd {
  font-size: 12px;
  color: #999999;
}
main .right .right-center .right-center-my {
  display: block;
  width: 100%;
  height: 34px;
  background: #f11717;
  border-radius: 100px;
  line-height: 34px;
  text-align: center;
  color: #ffffff;
  margin: 20px auto 0 auto;
}
main .right .right-center .right-center-my:hover {
  background: #e11717;
}
main .right .right-art {
  padding: 20px 15px 15px;
}
main .right .right-art .right-art-t {
  margin-bottom: 17px;
  display: flex;
}
main .right .right-art .right-art-t span {
  color: #333;
  margin-right: 12px;
}
main .right .right-art .right-art-t a {
  display: inline-block;
  width: 31px;
  height: 16px;
  background: #ff583d;
  border-radius: 2px;
  font-size: 12px;
  color: #ffffff;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
}
main .right .right-art .right-art-c ul li {
  margin-bottom: 12px;
  display: flex;
  height: 18px;
  overflow: hidden;
}
main .right .right-art .right-art-c ul li div:nth-of-type(2) {
  text-align: right;
}
main .right .right-art .right-art-c ul li a {
  color: #b6b6b6;
  padding-left: 10px;
}
main .right .right-art .right-art-c ul li a:hover {
  color: #e11717;
}
main .navs .bottom-right {
  display: grid;
  grid-template-columns: 50% 50%;
  text-align: center;
}
main .navs .bottom-right div {
  padding-top: 13px;
  line-height: 25px;
  font-size: 13px;
}
main .navs .bottom-right .iconfont {
  font-size: 30px;
  color: #ccc;
}

效果图