前端（HTML + CSS）学成在线项目（仿）

败者_食尘2024-08-07 10:43

头部区域 + banner区域 + 精品推荐区域，这三个区域都是版心居中

头部区域分为：logo + 导航 + 搜索 + 用户四个小块

鼠标悬停 :hover效果

banner区域分为：左侧导航 + 背景图 + 右侧课程表

鼠标悬停 :hover效果

精品推荐区域

鼠标悬停 :hover效果

精品推荐课程区域（版心居中）

编程入门区域（版心居中）

数据分析师区域（版心居中）

机械学习工程师区域

前端开发工程师区域

底部-版权区域

源码

HTML（index.html）代码

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>

    <!-- 顺序要求：先清除再设置 -->
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>

<body>
    <!-- 头部区域开始 -->
    <div class="header">
        <div class="wrapper">
            <!-- logo -->
            <div class="logo">
                <h1><a href="#">学成在线</a></h1>
            </div>

            <!-- 导航 -->
            <div class="nav">
                <ul>
                    <li><a href="#" class="active">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>

            <!-- 搜索 -->
            <div class="search">
                <input type="text" placeholder="请输入关键词">
                <a href="#"></a>
            </div>

            <!-- 用户 -->
            <div class="user">
                <a href="#">
                    <img src="../images（1-3）/乙板有宇.jpg">
                    <span>皇甫龙斗</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 头部区域结束 -->

    <!-- banner区域开始 -->
    <div class="banner">
        <div class="wrapper">
            <!-- 左侧侧导航 -->
            <div class="left">
                <ul>
                    <li><a href="#">前端开发</a></li>
                    <li><a href="#">后端开发</a></li>
                    <li><a href="#">移动开发</a></li>
                    <li><a href="#">人工智能</a></li>
                    <li><a href="#">商业预测</a></li>
                    <li><a href="#">云计算&大数据</a></li>
                    <li><a href="#">运维&测试</a></li>
                    <li><a href="#">UI设计</a></li>
                    <li><a href="#">产品</a></li>
                </ul>
            </div>

            <!-- 右侧课程表 -->
            <div class="right">
                <h3>我的课程表</h3>
                <div class="content">
                    <dl>
                        <dt>数据可视化课程</dt>
                        <dd>
                            <span>正在学习</span>
                            <strong>-echarts使用步骤</strong>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Vue3医疗项目课程</dt>
                        <dd>
                            <span>正在学习</span>
                            <strong>-认识组合式API</strong>
                        </dd>
                    </dl>
                    <dl>
                        <dt>React核心技术课程</dt>
                        <dd>
                            <span>正在学习</span>
                            <strong>-rudex配合TS使用</strong>
                        </dd>
                    </dl>
                    <a href="#">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner区域结束 -->

    <!-- 精品推荐开始 -->
    <div class="recommend wrapper">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Node.js</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">Vue2.0</a></li>
            <li><a href="#">Vue3.0</a></li>
            <li><a href="#">TypeScript</a></li>
            <li><a href="#">React</a></li>
        </ul>
        <a href="#" class="modify">修改兴趣</a>
    </div>
    <!-- 精品推荐结束 -->

    <!-- 精品推荐课程开始 -->
    <div class="course wrapper">
        <!-- 标题开始 -->
        <div class="hd">
            <h3>精品推荐</h3>
            <a href="#" class="more">查看全部</a>
        </div>
        <!-- 标题结束 -->

        <!-- 内容开始 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/widget-demo1.png">
                            <span class="lab">HOT</span>
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>1125</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/widget-demo2.png">
                            <span class="lab">HOT</span>
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>2726</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/widget-demo3.png">
                            <span class="lab">HOT</span>
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>9456</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/widget-demo4.png">
                            <span class="lab">HOT</span>
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>7192</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/原神1.png">
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>2703</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/原神2.png">
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>2841</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/原神3.png">
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>95682</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/原神4.png">
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>924</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/原神5.png">
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>1516</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/原神6.png">
                        </div>
                        <div class="text">
                            <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                            <p><span>高级</span> · <i>2766</i>人在学习</p>
                        </div>
                    </a>
                </li>

            </ul>
        </div>
        <!-- 内容结束 -->
    </div>
    <!-- 精品推荐课程结束 -->

    <!-- 编程入门开始 -->
    <div class="wrapper">
        <!-- 标题开始 -->
        <div class="hd">
            <h3>编程入门</h3>
            <ul>
                <li><a href="#" class="active">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="more">查看全部</a>
        </div>
        <!-- 标题结束 -->

        <!-- 内容开始 -->
        <div class="bd">
            <div class="left">
                <img src="./uploads/widget-ind-left.png">
            </div>
            
            <div class="right">
                <div class="top">
                    <img src="./uploads/widget-ind-top.png">
                </div>

                <div class="bottom">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/widget-kc01.png">
                                </div>
                                <div class="text">
                                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                                    <p><span>高级</span> · <i>101937</i>人在学习</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/widget-kc02.png">
                                </div>
                                <div class="text">
                                    <h4>Kami2首页界面切换效果</h4>
                                    <p><span>高级</span> · <i>133781</i>人在学习</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/widget-kc03.png">
                                </div>
                                <div class="text">
                                    <h4>Unity Profiler入门</h4>
                                    <p><span>高级</span> · <i>8927</i>人在学习</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/widget-kc04.png">
                                </div>
                                <div class="text">
                                    <h4>Cocos2d-x 引擎源码中的纹理优化</h4>
                                    <p><span>高级</span> · <i>26022</i>人在学习</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 内容结束 -->

    </div>
    <!-- 编程入门结束 -->

    <!-- 数据分析师开始 -->
    <div class="wrapper">
        <!-- 标题开始 -->
        <div class="hd">
            <h3>数据分析师</h3>
            <ul>
                <li><a href="#" class="active">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="more">查看全部</a>
        </div>
        <!-- 标题结束 -->

        <!-- 内容开始 -->
        <div class="bd">
            <div class="left">
                <img src="./uploads/widget-ind-left1.png">
            </div>
            
            <div class="right">
                <div class="top">
                    <img src="./uploads/widget-ind-top1.png">
                </div>

                <div class="bottom">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/原神7.png">
                                </div>
                                <div class="text">
                                    <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                                    <p><span>高级</span> · <i>9037</i>人在学习</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/原神8.png">
                                </div>
                                <div class="text">
                                    <h4>Kami2首页界面切换效果</h4>
                                    <p><span>高级</span> · <i>88320</i>人在学习</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/动漫1.png">
                                </div>
                                <div class="text">
                                    <h4>Unity Profiler入门</h4>
                                    <p><span>高级</span> · <i>8863</i>人在学习</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="pic">
                                    <img src="./uploads/动漫2.png">
                                </div>
                                <div class="text">
                                    <h4>Cocos2d-x 引擎源码中的纹理优化</h4>
                                    <p><span>高级</span> · <i>54093</i>人在学习</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 内容结束 -->

    </div>
    <!-- 数据分析师结束 -->

    <!-- 机器学习工程师开始 -->
    <div class="wrapper">
        <!-- 标题开始 -->
        <div class="hd">
            <h3>机器学习工程师</h3>
            <ul>
                <li><a href="#" class="active">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="more">查看全部</a>
        </div>
        <!-- 标题结束 -->

        <!-- 内容开始 -->
        <div class="bd-study">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/动漫3.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/动漫4.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/动漫5.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/动漫6.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/动漫7.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 内容结束 -->

    </div>
    <!-- 机器学习工程师结束 -->

    <!-- 前端开发工程师开始 -->
    <div class="wrapper">
        <!-- 标题开始 -->
        <div class="hd">
            <h3>前端开发工程师</h3>
            <ul>
                <li><a href="#" class="active">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#" class="more">查看全部</a>
        </div>
        <!-- 标题结束 -->
        
        <!-- 内容开始 -->
        <div class="bd-study">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/咒术1.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/咒术2.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/咒术3.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/咒术4.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/咒术5.png">
                        </div>
                        <div class="text">
                            <h4>Android Hybrid APP开发实战 H5+原生！</h4>
                            <p><span>高级</span> · <i>9037</i>人在学习</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 内容结束 -->
    </div>
    <!-- 前端开发工程师结束 -->

    <!-- 版权开始 -->
    <div class="fotter">
        <div class="wrapper">
            <!-- 左侧盒子模型开始 -->
            <div class="left">
                <a href="#"><img src="./images/logo.png"></a>
                <p>学成网致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    © 2017年XTCG Inc.保留所有权利。</p>
                <a href="#" class="download">下载APP</a>
            </div>
            <!-- 左侧盒子模型结束 -->

            <!-- 右侧开始 -->
            <div class="right">
                <dl>
                    <dt>关于学成网</dt>
                    <a href="#"><dd>关于</dd></a>
                    <a href="#"><dd>管理团队</dd></a>
                    <a href="#"><dd>工作机会</dd></a>
                    <a href="#"><dd>客户服务</dd></a>
                    <a href="#"><dd>帮助</dd></a>
                </dl>

                <dl>
                    <dt>新手指南</dt>
                    <a href="#"><dd>如何注册</dd></a>
                    <a href="#"><dd>如何选课</dd></a>
                    <a href="#"><dd>如何拿到毕业证</dd></a>
                    <a href="#"><dd>学分是什么</dd></a>
                    <a href="#"><dd>考试未通过怎么办</dd></a>
                </dl>

                <dl>
                    <dt>合作伙伴</dt>
                    <a href="#"><dd>合作机构</dd></a>
                    <a href="#"><dd>合作导师</dd></a>
                </dl>
            </div>
            <!-- 右侧结束 -->
        </div>
    </div>
    <!-- 版权结束 -->
</body>
</html>

CSS样式（base.css）代码：

复制代码 
/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

body {
    font: 14px/1.5 "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}

a {
    color: #333;
    text-decoration: none;
}

CSS样式（index.css）代码：

复制代码 
/* 首页样式 */

/* 版心居中 */
.wrapper {
    margin: 0 auto;
    width: 1200px;
}

body {
    background-color: #f3f5f7;
}

/* 头部区域开始 */
.header {
    height: 100px;
    background-color: #fff;
}

.header .wrapper {
    padding-top: 29px;
    display: flex;
}

/* logo开始 */
.logo a {
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../images/logo.png);

    /* 隐藏文字 */
    font-size: 0;
}
/* logo结束 */

/* 导航开始 */
.nav ul {
    display: flex;
}

.nav {
    margin-left: 102px;
}

.nav li {
    margin-right: 24px;
}

.nav li a {
    display: block;
    padding: 6px 8px;
    line-height: 27px;
    font-size: 19px;
}

/* active 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover
 {
    color: #00a4ff;
    border-bottom: 2px solid #00a4ff;
}
/* 导航结束 */

/* 搜索开始 */
.search {
    display: flex;
    margin-left: 64px;
    padding-left: 19px;
    padding-right: 12px;
    width: 412px;
    height: 40px;
    background-color: #f3f5f7;
    border-radius: 20px;
}

.search input {
    flex: 1;
    border: 0;
    /* 透明 */
    background-color: transparent;

    /* 去掉表单控件的焦点框 */
    outline: none;
}

/* ::placeholder 选中就是 placeholder 属性文字样式 */
.search input::placeholder {
    font-size: 14px;
    color: #999;
}

/* 父级是flex布局，子级变弹性盒子：加宽高生效 */
.search a {
    align-self: center;
    width: 16px;
    height: 16px;
    background-image: url(../images/search.png);
}
/* 搜索结束 */

/* 用户开始 */
.user {
    margin-left: 32px;
    /* margin-top: 4px; */
}

.user img {
    /* vertical-align 处理行内块和行内垂直方向对齐方式 */
    vertical-align: middle;
    margin-right: 7px;

    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user span {
    font-size: 16px;
    color: #666;
}
/* 用户结束 */
/* 头部区域结束 */

/* banner区域开始 */
.banner {
    height: 420px;
    background-color: #1c036c;
    
}

.banner .wrapper {
    display: flex;
    justify-content: space-between;
    height: 420px;
    background-image: url(../images/banner.jpg);
}

/* 左侧侧导航开始 */
.banner .left {
    padding: 3px 20px;
    width: 191px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.42);
}

.banner .left a {
    /* 块级：宽度是父级的100% */
    display: block;
    height: 46px;
    background: url(../images/白色箭头.png) no-repeat right center;
    background-size: 10px 10px;
    line-height: 46px;
    font-size: 16px;
    color: #fff;
}

.banner .left a:hover {
    color: rgb(250, 38, 38);
    background-image: url(../images/红色箭头.png);
}
/* 左侧侧导航结束 */

/* 右侧课程表开始 */
.banner .right {
    margin-top: 60px;
    width: 218px;
    height: 305px;
    background-color: #209dd5;
    border-radius: 10px;
}

.banner .right h3 {
    text-align: center;
    height: 48px;
    line-height: 48px;
    color: #fff;
}

.banner .right .content {
    padding: 14px;
    height: 257px;
    background-color: #fff;
    border-radius: 10px;
}

.banner .right dl {
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.banner .right dd {
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 16px;
}

.banner .right dd span {
    color: #00a4ff;
}

.banner .right dd strong {
    font-weight: normal;
    color: #beb4b4;
}

.banner .right a {
    display: block;
    height: 32px;
    background-color: #00a4ff;
    border-radius: 15px;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
}
/* 右侧课程表结束 */
/* banner区域结束 */

/* 精品推荐开始 */
.recommend {
    display: flex;
    margin-top: 11px;
    padding: 0 20px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 2px 2px #bdbdbd;
    line-height: 60px;
}

.recommend h3 {
    font-size: 18px;
    font-weight: normal;
    color: #00a4ff;
}

.recommend ul {
    /* 除去标题和修改兴趣的尺寸，父级剩余尺寸都给ul，实现把修改兴趣挤到最右侧 */
    flex: 1;
    display: flex;
}

.recommend ul li a {
    padding: 0 24px;
    border-right: 1px solid #999;
    font-size: 18px;
}

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

.recommend ul li:last-child a {
    border-right: none;
}

.recommend .modify {
    color: #00a4ff;
    font-size: 18px;
}
/* 精品推荐结束 */

/* 精品推荐课程开始 */
.course {
    margin-top: 15px;
}

/* 标题开始 */
/* 标题 - 公共类，与其他区域共用 */
.hd {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
}

.hd h3 {
    font-size: 21px;
    font-weight: normal;
}

.hd .more {
    padding-right: 20px;
    background: url(../images/箭头.png) no-repeat right center;
    background-size: 15px 15px;
    font-size: 14px;
    color: #999;
}
/* 标题结束 */

/* 内容开始 */
/* 课程内容 - 公共类 */
.bd ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.bd li {
    margin-bottom: 14px;
    width: 228px;
    height: 271px;
    background-color: #fff;
}

.bd li .pic {
    position: relative;
    height: 156px;
}

.bd li .pic .lab {
    font-size: 12px;
    text-align: center;
    width: 41px;
    height: 24px;
    line-height: 22px;
    color: #f07700;
    position: absolute;
    right: -5px;
    top: 10px;
    background: url(../uploads/widget-hotIco.png) no-repeat;
}

.bd li .pic img {
    width: 228px;
    height: 155px;
}

.bd li .text {
    padding: 20px;
    height: 115px;
    color: #000;
}

.bd li .text h4 {
    margin-bottom: 13px;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
}

.bd li .text p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
}

.bd li .text p span {
    color: #ff7c2d;
}

.bd li .text p i {
    font-style: normal;
}
/* 内容结束 */
/* 精品推荐课程结束 */

/* 编程入门开始 */
/* 标题开始 */
.hd ul {
    display: flex;
}

.hd li {
    margin-right: 60px;
    font-size: 16px;
}

.hd li .active,
.hd li a:hover {
    color: #00a4ff;
}
/* 标题结束 */

/* 内容开始 */
.bd {
    display: flex;
    justify-content: space-between;
}

.bd .left {
    width: 228px;
}

.bd .left img {
    width: 228px;
    height: 388px;
}

.bd .right {
    width: 957px;
}

.bd .right .top {
    margin-bottom: 15px;
    height: 100px;
}
/* 内容结束 */
/* 编程入门结束 */

/* 机器学习工程师开始 */
.bd-study ul{
    display: flex;
    justify-content: space-between;
}

.bd-study li {
    margin-bottom: 14px;
    width: 228px;
    height: 271px;
    background-color: #fff;
}

.bd-study li .pic {
    position: relative;
    height: 156px;
}

.bd-study li .pic img {
    width: 228px;
    height: 155px;
}

.bd-study li .text {
    padding: 20px;
    height: 115px;
    color: #000;
}

.bd-study li .text h4 {
    margin-bottom: 13px;
    height: 40px;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
}

.bd-study li .text p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
}

.bd-study li .text p span {
    color: #ff7c2d;
}

.bd-study li .text p i {
    font-style: normal;
}
/* 机器学习工程师结束 */

/* 版权开始 */
.fotter {
    margin-top: 60px;
    padding-top: 50px;
    height: 273px;
    background-color: #fff;
}

.fotter .wrapper {
    display: flex;
    justify-content: space-between;
}

/* 左侧盒子模型开始 */
.fotter .left {
    width: 426px;
}

.fotter .left p {
    margin-top: 24px;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 17px;
    color: #666;
}

.fotter .left .download {
    display: block;
    width: 120px;
    height: 36px;
    background-color: #fff;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 34px;
    font-size: 16px;
    color: #00a4ff;
}

.fotter .left .download:hover {
    background-color: #92fbf2;
}
/* 左侧盒子模型结束 */

/* 右侧开始 */
.fotter .right {
    display: flex;
}

.fotter .right dl {
    margin-left: 130px;
}

.fotter .right dt {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 23px;
    font-weight: 700;
}

.fotter .right a {
    font-size: 14px;
    color: #666;
    line-height: 28px;
}

.fotter .right a:hover {
    color: #00a4ff;
}
/* 右侧结束 */
/* 版权结束 */
相关推荐
Pedantic2 小时前
SwiftUI 手势层级（Gesture Hierarchy）详解
前端
飘尘2 小时前
前端转型全栈（Java后端）的快速上手指引
前端·后端·全栈
一颗烂土豆2 小时前
Meshopt 压缩深度解析，为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师3 小时前
AI Agent 接浏览器任务，先别让它一路点到底
前端·后端
雨季mo浅忆3 小时前
VSCode自动格式化三要素
前端
爱勇宝4 小时前
深扒 Anthropic 1680 位工程师简历：应届生几乎没机会，AI 公司最缺的不是博士
前端·后端·程序员
kyriewen5 小时前
同事每天催我 Code Review，我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user20585561518137 小时前
Windows 项目安装时报 `node-sass` 错误，如何快速处理
前端
LiaCode7 小时前
Redis 在生产项目的使用
前端·后端
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日072026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？08AI一周事件 · 2026-06-03 至 2026-06-0909Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析10上线仅72小时被强制下架：Claude Fable 5 的短命