学成在线首页案例模仿三（代码全自写的，部分参考）

最新推荐文章于 2024-07-24 21:48:20 发布

下雨打伞干嘛

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量960

点赞数 2

文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_45488467/article/details/108021732

版权

第一、二栏代码链接：
链接: link.
第三、四栏代码链接：
链接: link.
5. 第五栏
html代码：

<div class="rumen w">
        <div class="head">
            <h3>编程入门</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="all">查看全部</a>
        </div>
        <div class="php clearfix">
            <div class="php_left">
                <img src="img/php_leftimg.png" alt="">
            </div>
            <div class="php_right">
                <img src="img/kuailebiancheng.png" alt="">
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/UGUI.png" alt="">
                            <h4>Android Hybrid APP开发实 <br /> 战 H5+原生！ </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/UGUI.png" alt="">
                            <h4>Android Hybrid APP开发实 <br /> 战 H5+原生！ </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/UGUI.png" alt="">
                            <h4>Android Hybrid APP开发实 <br /> 战 H5+原生！ </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/UGUI.png" alt="">
                            <h4>Android Hybrid APP开发实 <br /> 战 H5+原生！ </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

结果展示：
在这里插入图片描述

6. 第六栏
html代码：

<div class="rumen w">
        <div class="head">
            <h3>数据分析师</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="all">查看全部</a>
        </div>
        <div class="php clearfix">
            <div class="php_left">
                <img src="img/shujufenxishi_leftimg.png" alt="">
            </div>
            <div class="php_right">
                <img src="img/python+.png" alt="">
                <ul>
                    <li>
                        <a href="#">
                            <img src="img/kami2.png" alt="">
                            <h4>Kami2首页界面切换效果 </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/kami2.png" alt="">
                            <h4>Kami2首页界面切换效果 </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/kami2.png" alt="">
                            <h4>Kami2首页界面切换效果 </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/kami2.png" alt="">
                            <h4>Kami2首页界面切换效果 </h4>
                            <div class="info">
                                <span>高级</span> • 1125人在学习
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

结果展示：
在这里插入图片描述
7. 第七栏
html代码：

<div class="rumen w">
        <div class="head">
            <h3>机器学习工程师</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="all">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="img/Cocos2d.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/Cocos2d.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/Cocos2d.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/Cocos2d.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/Cocos2d.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>

结果展示：
在这里插入图片描述
8. 第八栏
html代码：

<div class="rumen w">
        <div class="head">
            <h3>前端开发工程师</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="all">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="img/137.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/137.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/137.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/137.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="img/137.png" alt="">
                    <h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>

结果展示：
在这里插入图片描述

5-8栏css代码：

.head {
    height: 21px;
    margin: 22px 0;
}

.rumen .head h3 {
    float: left;
    height: 21px;
    width: 401px;
    font-size: 20px;
    color: #494949;
    font-weight: 400;
}

.rumen .head ul {
    width: 410px;
    height: 21px;
    float: left;
}

.rumen .head .all {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-right: 30px;
    margin-top: 10px;
}

.rumen .head ul li a {
    float: left;
    font-size: 16px;
    color: #979898;
    height: 21px;
    margin-top: 6px;
    padding: 0 35px;
}

.rumen .head ul li a:hover {
    color: #00a4ff;
}

.php .php_left {
    float: left;
}

.php .php_right>img {
    margin: 0 0 23px 15px;
    width: 957px;
}

.php_right ul li {
    float: left;
    margin-left: 16px;
    width: 227px;
    height: 265px;
    background-color: #ffffff;
}

.php_right ul li img {
    width: 100%;
}

.php_right ul li h4 {
    font-size: 14px;
    color: #050505;
    padding-left: 24px;
    margin-bottom: 20px;
    margin-top: 25px;
    font-weight: 400;
    height: 38.4px;
}

.php_right ul li .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999999;
}

.php_right ul li .info span {
    color: #ff7c2d;
}

下雨打伞干嘛

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
学成在线首页案例模仿三（代码全自写的，部分参考）

第一、二栏代码链接：链接: link.第三、四栏代码链接：链接: link.5. 第五栏html代码：<div class="rumen w"> <div class="head"> <h3>编程入门</h3> <ul> <li><a href="#">热门</a></li>
复制链接

扫一扫