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

news2024/11/24 11:51:37

头部区域 + 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;
}
/* 右侧结束 */
/* 版权结束 */

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1984681.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于MATLAB车牌图像识别的设计与实现

基于MATLAB车牌图像识别的设计与实现

摘 要 车牌图像识别系统是现代智能交通管理的重要组成部分之一。车牌识别系统使车辆管理更智能化&#xff0c;数字化&#xff0c;有效提升了交通管理的方便性和有效性。 车牌识别系统主要包括了图像采集、图像预处理、车牌定位、字符分割、字符识别等五大核心部分。本文主要介绍…
阅读更多...
顺序表-数据结构

顺序表-数据结构

一、结构定义 顺序表是通常是数组&#xff0c;要求数据连续存储。顺序表又分为定长顺序表和变长顺序表&#xff0c;本文实现后者。 1、头文件 #include <stdio.h> #include <stdlib.h> 2、定长顺序表 #define MAX 100 定长顺序表结构 typedef struct SqList {…
阅读更多...
五种创建springBoot项目的方法（本质上是三种）

五种创建springBoot项目的方法（本质上是三种）

文章目录 1. 使用https://start.aliyun.com/的服务器URL2. 使用https://start.spring.io/3. https://start.spring.io/使用官网4. 使用https://start.aliyun.com/5. 使用maven构建springboot项目5.1 点击maven&#xff0c;什么也不选&#xff0c;点击下一步5.2 修改名称和组ID&…
阅读更多...
c语言第十天笔记

c语言第十天笔记

函数的概述 函数&#xff1a; 实现一定功能的&#xff0c;独立的代码模块。我们的函数一定是先定义&#xff0c;后使用。 使用函数的优势&#xff1a; 1. 我们可以通过函数提供功能给别人使用。当然我们也可以使用别人提供的函数&#xff0c;减少代码量。 2. 借助函数可以…
阅读更多...
《学会 SpringMVC 系列 · 参数解析器 ArgumentResolvers》

《学会 SpringMVC 系列 · 参数解析器 ArgumentResolvers》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
HQChart实战教程76-自定义Y轴刻度线

HQChart实战教程76-自定义Y轴刻度线

HQChart实战教程76-自定义Y轴刻度线 Y轴刻度线效果图HQChart插件源码地址步骤1. 注册事件2.回调事件eventdataobj数据说明完整实例源码Y轴刻度线 在K线图上，通过绘制一些特殊的刻度线来标识状态。我们可以通过SetOption里面设置，也可以通过回调函数动态设置。本教程是使用回…
阅读更多...
微服务之SpringAMQP详解

微服务之SpringAMQP详解

目录 前言 1. 概述 2. Basic Queue简单队列模型 2.1 消息发送 2.2 消息接收 2.3 总结 3. WorkQueue模型 3.1 消息发送 3.2 消息接收 3.3 测试 3.4 消费预取限制 3.5 总结 4. 发布、订阅 5. Fanout 5.1 声明队列和交换机 5.2 消息发送 5.3 消息接收 5.4 测试 5…
阅读更多...
SpringBoot集成阿里百炼大模型（初始demo） 原子的学习日记Day01

SpringBoot集成阿里百炼大模型（初始demo） 原子的学习日记Day01

文章目录 概要下一章SpringBoot集成阿里百炼大模型&#xff08;多轮对话&#xff09; 原子的学习日记Day02 整体架构流程技术名词解释集成步骤1&#xff0c;选择大模型以及获取自己的api-key&#xff08;前面还有一步开通服务就没有展示啦&#xff01;&#xff09;2&#xff0c…
阅读更多...
遗传算法与深度学习实战——生命模拟与进化论

遗传算法与深度学习实战——生命模拟与进化论

遗传算法与深度学习实战——生命模拟与进化论 0. 前言1. 模拟进化1.1 代码实现1.2 代码改进 2. 达尔文进化论3. 自然选择和适者生存3.1 适者生存3.2 进化计算中的生物学 小结系列链接 0. 前言 生命模拟通过计算机模拟生物体的基本特征、遗传机制、环境互动等&#xff0c;试图模…
阅读更多...
KMZ格式详解，javascript写入读取KMZ示例

KMZ格式详解，javascript写入读取KMZ示例

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…
阅读更多...
myeclipse 2020 下载 安装 汉化

myeclipse 2020 下载 安装 汉化

1&#xff0c;解压 myeclipse 2020 压缩包到当前目录下&#xff1a; 点击此处蓝色字体下载压缩包 提取码 k3x9 2&#xff0c;鼠标右键 点击 myeclipse 2020.exe 选择 以管理员身份运行 &#xff1a; 3&#xff0c;等待加载&#xff1a; 4&#xff0c;点击 Next &#xff1a; 5…
阅读更多...
【数学建模】2024华数杯A题思路（已完成）

【数学建模】2024华数杯A题思路（已完成）

视频预览&#xff1a; 2024华数杯A题已完成 作品连接&#xff1a;https://mbd.pub/o/bread/ZpmWmJxu 文章目录 一、题目二、分析三、代码示例 一、题目 机器臂是一种自动化装置&#xff0c;广泛应用于工业生产、精密操作、危险环境作业和物流等领域。关节角路径的优化设计对于…
阅读更多...
Transformer在生成细胞数据上的应用

Transformer在生成细胞数据上的应用

来自&#xff1a;scTranslator: A pre-trained large generative model for translating single-cell transcriptome to proteome 工程地址&#xff1a;https://github.com/TencentAILabHealthcare/scTranslator 在scTranslator中&#xff0c;有3个阶段&#xff1a;paired bu…
阅读更多...
【xilinx】XCZU1CG-1SBVA484I FPGA 的 VCC_PSBATT 引脚的正确电压范围是多少？

【xilinx】XCZU1CG-1SBVA484I FPGA 的 VCC_PSBATT 引脚的正确电压范围是多少？

我正在做一个涉及 XCZU1Cg-1SBVA484I FPGA IC 的项目。对于 PSBATT 部分&#xff0c;根据 DS925 文档&#xff0c;提到 VCC_PSBATT 电压范围为 1.2V ~ 1.5V。但在同一文档中&#xff0c;注释部分规定&#xff1a;Vcc_psbatt 最高可接受 1.89V。 根据 UG1085 文档&#xff0c;使…
阅读更多...
HarmonyOS 习题（二）

HarmonyOS 习题（二）

1、在类Web开发范式自定义组件创建后&#xff0c;加入到Page组件树时&#xff0c;会触发以下哪一项回调。 A&#xff09;Onlnit B&#xff09;OnAttached C&#xff09;OnLayoutReady D&#xff09;OnDetached 答案&#xff1a;B 分析: onlnit:自定义组件初始化生命周期回调&a…
阅读更多...
HTML常用标签和CSS的运用

HTML常用标签和CSS的运用

目录 1.HTML标签 1.1 文档结构标签 1.2 文本格式标签 1.3 列表标签 1.4 链接和媒体标签 1.5 表格标签 1.6 表单标签 1.7 分区和布局标签 1.8 元数据标签 2.css样式 2.1 字体样式 2.2 文本样式 2.3 背景样式 2.4 边框样式 2.5 间距样式 2.6 宽度和高度 2.7 显示…
阅读更多...
NLP——Transfromer 架构详解

NLP——Transfromer 架构详解

Transformer总体架构图 输入部分&#xff1a;源文本嵌入层及其位置编码器、目标文本嵌入层及其位置编码器 编码器部分 由N个编码器层堆叠而成 每个编码器层由两个子层连接结构组成 第一个子层连接结构包括一个多头自注意力子层和规范化层以及一个残差连接 第二个子层连接结构包…
阅读更多...
音质提升秘籍：专业音频剪辑软件汇总

音质提升秘籍：专业音频剪辑软件汇总

现在欣赏传输音频文件比以前简单多了&#xff0c;这些音频的质量也影响了听众的体验与感受。所以使用一些靠谱的音频剪辑工具处理音频能让你的音频文件呈现更好的效果。 1.福昕音频剪辑 链接直达>>https://www.foxitsoftware.cn/audio-clip/ 这是一款电脑端软件。别看…
阅读更多...
MySQL查询最近7天的分组数据，无则补零

MySQL查询最近7天的分组数据，无则补零

需求是&#xff1a;有个查询最近7天的折线图&#xff0c;这个就要求没有数据就要补0 现在表名为&#xff1a;wo_work_order 时间字段为&#xff1a;create_time SQL如下&#xff1a; SELECTDATE_FORMAT( a.timeDay, %Y-%m-%d ) AS day,IFNULL( b.count, 0 ) AS count FROM(S…
阅读更多...
5.怎么使用Element ui来做一个前端登录页面

5.怎么使用Element ui来做一个前端登录页面

找到Layout 布局 他通过基础的 24 分栏&#xff0c;迅速简便地创建布局。 找一个对齐方式 这个就不错,找到对应的代码 这个 复制进入idea 引入我们的图片和文字 我这里图片有点问题 然后我再添加一条分割线 加入表单校验 把里面的代码同上加入idea 结果 对表单内容进行调整 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023