php个人博客搭建第二阶段②

网站正文部分：热门博客的推荐：

 

 html代码：

<!-- 网站正文部分 -->

    <div class="content">

        <div class="wrapper">

            <div class="tuijian">

                <h2>博客推荐</h2>

            </div>

            <div class="bokeList clearfix">

                <ul>

                    <li>

                        <a href="#">

                            <img src="./images/course01.png" alt="">

                            <h3>【图文并茂】 做开发这么久了，还不会搭建服务器Maven私有仓库？这也太Low了吧</h3>

                            <p><span>热帖</span>  •  122人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course02.png" alt="">

                            <h3>关于分布式锁的那些事儿</h3>

                            <p><span>热帖</span>  •  221人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course03.png" alt="">

                            <h3>一比一还原axios源码（零）—— 概要</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course04.png" alt="">

                            <h3>二进制部署1.23.4版本k8s集群-6-部署Node节点服务</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course05.png" alt="">

                            <h3>字节一面：go的协程相比线程，轻量在哪？</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course06.png" alt="">

                            <h3>Windows原理深入学习系列-Windows内核提权</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course07.png" alt="">

                            <h3>HBase海量数据高效入仓解决方案</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course08.png" alt="">

                            <h3>从刘维尔方程到Velocity-Verlet算法</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course08.png" alt="">

                            <h3>k8s命令行web代理神器gotty</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                    <li>

                        <a href="#">

                            <img src="./images/course07.png" alt="">

                            <h3>Spring Bean生命周期，好像人的一生。。</h3>

                            <p><span>热帖</span>  •  1125人以观看</p>

                        </a>

                    </li>

                   

                </ul>

            </div>

        </div>

    </div>

css代码：

/* 推荐博客 */

 .goods{

    margin-top: 8px;

    padding-left: 34px;

    padding-right: 26px;

    height: 60px;

    background-color: #fff;

    box-shadow: 0px 2px 3px 0px

        rgba(118, 118, 118, 0.2);

    line-height: 60px;

 }

 .goods h2 {

    float: left;

    font-size: 16px;

    color: #00a4ff;

    font-weight: 400;

}

.goods ul {

    float: left;

    margin-left: 30px;

}

.goods ul li {

    float: left;

}

.goods li a {

    border-left: 1px solid #bfbfbf;

    padding: 0 30px;

    font-size: 16px;

    color: #050505;

}

.goods

.goods .xingqu {

    float: right;

    font-size: 14px;

    color: #00a4ff;

}

.tuijian{

    margin-top: 15px;

    height: 50px;

}

.tuijian h2{

    float: left;

    font-size: 20px;

    color: #494949;

    font-weight: 400;

}

.content li{

    float: left;

    margin-right: 15px;

    margin-bottom: 15px;

    width: 228px;

    height: 270px;

    background-color: #fff;

}

.content li:nth-child(5n) {

    margin-right: 0;

}

 .content li h3 {

    padding: 20px;

    font-size: 14px;

    color: #050505;

    font-weight: 400;

}

.content li p {

    padding: 0 20px;

    font-size: 12px;

    color: #999;

}

.content li span {

    color: #ff7c2d;

}