华为云官网ClassRoom.html 网页 html，css代码实现

其他 2021-02-27 22:56:05 阅读次数: 0 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Classroom平台首页</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .nav {
            width: 100%;
            height: 60px;
       
            display: flex;
            position: fixed;
            padding: 0 40px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
            z-index: 999;
        }
        .nav-logo {
            height: 100%;
            width: 120px;
            display: flex;
            align-items: center;

        }
        .logo {
            height: 40px;
            width: 120px;
            background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/logo.ee14f183979fd61abac2.svg);
            background-size: 100% 100%;
            cursor: pointer;

        }
        .nav-middle {
            height: 100%;
            width: 873.66px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 30px;
        }

        .nav-middle .item {
            font-size: 1vw;
            color: #293040;
            line-height: 32px;
        }

        .nav-middle .item a {
            text-decoration: none;
            color: #293040;
        }

        .nav-middle .item a:hover {
            color: #5e7ce0;
        }

        .nav-middle .item .main {
            color: #5e7ce0;
        }

        .nav-right {
            width: 800px;
            height: 100%;
            display: flex;
            padding-right: 10px;
            justify-content: flex-end;
            align-items: center;
        }

        .nav-right .nav-right-info {
            margin-left: 50px;
        }
        .teachBtn {
            width: 98px;
            height: 32px;
            text-align: center;
            line-height: 32px;
        }

        .teachBtn button {
            width: 98px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            color: #293040 !important;
            background: #fafafa !important;
            border: 1px solid #e3e5e9 !important;
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .05) !important;
            border-radius: 16px;
        }
        .teachBtn button:hover {
            border: 1px solid rgb(94, 124, 224) !important;
            box-shadow: 0 2px 4px -1px rgb(94, 124, 224) !important;
        }


        .teachBtn button a {
            font-size: 18px;
        }

        .nav-right .nav-right-info .ques {
            width: 16px;
            height: 16px;
            font-size: 14px;
            font-weight: blod;
            border-radius: 8px;
            color: black;
            border: 1px solid black !important;
            text-align: center;
            line-height: 16px;
            box-shadow: 0 0 1px 1px black !important;
            cursor: pointer;
        }

        .nav-right .userinfo {
            height: 100%;
            display: flex;
            align-items: center;
        }

        .nav-right .userinfo .dh {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 40px;
            background-color: rgb(255, 143, 116);
            cursor: pointer;
        }

        .nav-right .userinfo .username {
            margin-left: 10px;
            cursor: pointer;

        }

        .nav-right .userinfo .username span {
            font-size: 18px;
            cursor: pointer;

        }

        .header {
            width: 100%;
            height: 517.83px;
        }

        .content {
            width: 100%;
            height: 3360px;
            margin: 0px auto;
      
        }

        .content .intro-box {
            height: 124px;
            width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            background: #fff;
            box-shadow: 0 0 20px 0 rgba(41, 48, 64, .1);
            border-radius: 5px;
            position: relative;
            top: -20px;
            z-index: 999;
        }

        .content .intro-box .intro-box1 {
            display: flex;
            padding: 10px;
            font-size: 16px;
            color: #5e6678;
        }

        .content .intro-box .intro-box1-p {
            font-size: 16px;
            color: #5e6678;
            width: 1032px;
            line-height: 32px;

        }

        .content .intro-box .intro-box1-p p {
            margin-right: 35px;
            margin-left: 20px;
        }

        .content .intro-box .intro-box1-b {
            width: 96px;
            line-height: 32px;
            display: flex;
            align-items: center;
        }

        .content .intro-box .intro-box1-b .intro-box1-b-1 {
            height: 32px;
            width: 98px;
            border-radius: 16px;
            background-color: #5e7ce0;
        }

        .content .intro-box .intro-box1-b button {
            width: 98px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            color: #ffffff !important;
            background: #5e7ce0 !important;
            border: 1px solid #5e7ce0 !important;
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .05) !important;
            border-radius: 16px;
        }

        .content .intro-box .intro-box1-b button {
            background-color: #526ccc;
        }

        .class-box {
            width: 1200px;
            height: 1050px;
            margin: 0 auto;
        }

        .class-box .class-box-top {
            width: 100%;
            height: 120px;
            text-align: center;
        }

        .class-box .class-box-top h3 {
            font-size: 24px;
            font-weight: 700;
            color: #293040;
            margin: 20px 0 16px;
        }

        .class-box .class-box-top p {
            font-size: 16px;
            color: #575d6c;
        }

        .class-box .class-box-middle {
            width: 100%;
            height: 970px;
        }

        .class-box .class-box-middle {
            width: 100%;
            height: 950px;
        }


        .card-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 830px;
        }

        .card-item {
            width: 378px;
            height: 386px;
            border-radius: 12px 12px 0 0;
            box-shadow: 0 4px 16px 0 rgba(83, 85, 95, 0.12)
        }

        .card-item:hover {
            box-shadow: 0 20px 16px 0 rgba(83, 85, 95, 0.12)
        }



        .card-item-1 .card-img {
            height: 200px;
            border-radius: 12px 12px 0 0;
            background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png);
        }

      

        .card-item .title {
            width: 100%;
            font-size: 16px;
            color: #293040;
            font-weight: 700;
            margin-top: 15px;
            display: block;
            padding-left: 15px;
            box-sizing: border-box;
        }

        .card-item .author-address-hour {
            color: #959eb2;
            font-size: 12px;
            display: flex;
        }

        .card-item .author-address-hour .author-address {
            display: flex;
            width: 50%;
            padding-left: 15px;
        }



        .card-item .author-address-hour .address {
            margin-left: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            letter-spacing: .5px;
            word-break: break-all;
        }

        .card-item .author-address-hour .hour {
            width: 50%;
            text-align: right;
            padding-right: 15px;
        }

        .card-item .author-address-hour .hour button {
            width: 49.05px;
            height: 19px;
            line-height: 19px;
            border: 1px solid #959eb2;
            border-radius: 9.5px;
            color: #959eb2;
            background-color: #ffffff;
        }

        .card-item .desc {
            height: 48px;
            line-height: 24px;
            width: 100%;
            font-size: 14px;
            color: #5e6678;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            letter-spacing: .5px;
            word-break: break-all;
            padding: 0 15px;
            box-sizing: border-box;
        }

        .card-item .desc .desc-p {
            z-index: 9999;
            box-sizing: border-box;
            border-bottom: 1px solid rgb(238, 238, 238);
            padding-bottom: 2px;
        }

        .card-item .free {
            width: 100%;
            height: 52px;
            text-align: right;
            line-height: 52px;
            font-size: 14px;
            color: #e41f2b;
            padding: 2px 4px;
            border-radius: 2px;
            box-sizing: border-box;
        }

        .card-item .free a {
            text-decoration: none;
            background-color: rgba(228, 31, 43, .1);
            padding: 2px 3px;
            border-radius: 2px;
        }

        .card-more {
            margin: 25px auto;
            width: 126.73px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }



        .card-more button {
            width: 136.73px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 16px !important;
            color: #293040 !important;
            background: #fafafa !important;
            border: 1px solid #e3e5e9 !important;
            box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .05) !important;
            border-radius: 20px;

        }

        .content .market-box {
            width: 100%;
            height: 1130px;
            background-color: #fafafa;
        }

        .content .market-box-body {
            width: 1200px;
            height: 1130px;
            margin: 0 auto;
        }

        .market-box-body .class-box-top {
            width: 100%;
            height: 120px;
            text-align: center;
            padding-top: 50px;
        }

        .market-box-body .class-box-top h3 {
            font-size: 24px;
            font-weight: 700;
            color: #293040;
            margin: 20px 0 16px;
        }

        .market-box-body .class-box-top p {
            font-size: 16px;
            color: #575d6c;
        }

        .market-box-body .class-box-middle {
            width: 100%;
            height: 970px;
        }

        .market-box-body .class-box-middle {
            width: 100%;
            height: 950px;
        }

        .content .activity-box {
            width: 100%;
            height: 1050px;
        }

        .content .activity-box-body {
            width: 1200px;
            height: 1050px;
            margin: 0 auto;
        }

        .activity-box-body .activity-box-top {
            width: 100%;
            height: 120px;
            text-align: center;
            padding-top: 50px;
        }

        .activity-box-body .activity-box-top h3 {
            font-size: 24px;
            font-weight: 700;
            color: #293040;
            margin: 20px 0 16px;
        }

        .activity-box-body .activity-list {
            width: 1200px;
            height: 1000px;
        }

        .activity-box-body .activity-list .activity-item {
            width: 100%;
            height: 127px;
            border-top: 1px solid rgb(227, 229, 233);
            border-bottom: 1px solid rgb(227, 229, 233);
            display: flex;
            align-items: center;
        }

        .activity-list .activity-item .left-img1 {
            width: 160px;
            height: 96px;
            margin-right: 30px;
            background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/notice.b7839ff8db59462824d7.png);
        }

       

        .activity-item {
            display: flex;
        }

        .activity-list .activity-item .right-content {
            width: 100%;
            height: 96px;
            display: flex;
            flex-direction: column;
        }



        .activity-list .activity-item .right-content .link {
            margin-top: 5px;
            font-size: 1vw;
            color: #293040;
        }

        .activity-list .activity-item .right-content .link a {
            text-decoration: none;
            color: #293040;
        }

        .activity-list .activity-item .right-content .link a:hover {
            color: #5e7ce0;

        }

        .activity-list .activity-item .right-content .source {
            margin-top: 35px;
        }

        .activity-list .activity-item .right-content .source span {
            font-size: 14px;
            color: #959eb2;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: rgb(243, 243, 243);
        }

        .footer-body {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            font-size: 14px;
            color: rgba(37, 43, 58, .7);
        }

        .footer-body .footer-left {
            width: 80%;
            height: 100%;
        }

        .footer-body .footer-left p {
            margin-top: 30px;
            margin-bottom: 5px;
        }

        .footer-body .footer-left p span {
            margin-right: 5px;
        }

        .footer-body .footer-left p a {
            text-decoration: none;
            color: rgba(37, 43, 58, .7);
        }

        .footer-body .footer-left p a:hover {
            color: #5e7ce0;

        }

        .footer-body .footer-right {
            width: 20%;
            height: 100%;
        }

        .footer-body .footer-right .span-body {
            margin-top: 40px;
            text-align: right;
        }

        .footer-body .footer-right a {
            text-decoration: none;
            color: rgba(37, 43, 58, .7);
        }

        .footer-body .footer-right a:hover {
            color: #5e7ce0;
        }
    </style>
</head>

<body>
    <div class="nav">
        <!--页面导航区域-->
        <div class="nav-logo">
            <div class="logo">
            </div>
        </div>
        <div class="nav-middle">
            <div class="item"><a href="#" class="main">首页</a></div>
            <div class="item"><a href="#">教学市场</a></div>
            <div class="item"><a href="#">云课堂</a></div>
            <div class="item"><a href="#">培训认证</a></div>
            <div class="item"><a href="#">云端实验室</a></div>
            <div class="item"><a href="#">新工科实验班</a></div>
            <div class="item"><a href="#">学习交流</a></div>
        </div>
        <div class="nav-right">
            <div class="nav-right-info teachBtn">
                <button><a>教学平台</a></button>
            </div>
            <div class="nav-right-info">
                <div class="ques">
                    <strong>?</strong>
                </div>
            </div>

            <div class="nav-right-info userinfo">
                <div class="dh"><span>DH</span></div>
                <div class="username"><span>dzx_huawei</span></div>
            </div>
        </div>
    </div>

    <div class="header">
        <!--页面头部轮播图区域-->
        <a _ngcontent-avd-c7="" target="_blank" href="https://mp.weixin.qq.com/s/YRfQ41-IoXZtkj-i27US_w">
            <img _ngcontent-avd-c7="" alt="" class="swiper-lazy swiper-lazy-loaded" width="100%"
                src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-3.78529fb07dac84804fe4.jpg">
        </a>
    </div>

    <div class="content">
        <!--页面内容区域-->
        <div class="intro-box">
            <!--classroom介绍区域-->
            <div class="intro-box1">
                <div class="intro-box1-p">
                    <p>Classroom是基于华为云的云上软件教学服务，支持高校师生实现备课、上课、作业、考试、实验、实训等全教学流程的线上教学，提供多类习题自动判题、企业级DevOps实训、免费在线习题库等众多高级特性辅助进行数字化教学转型。
                    </p>
                </div>
                <div class="intro-box1-b">
                    <div class="intro-box1-b-1">
                        <button>开始上课</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="class-box">
            <!--云课堂区域-->
            <div class="class-box-top">
                <h3>云课堂</h3>
                <p>免费精品公开课，覆盖丰富知识点、课件与在线习题</p>
            </div>

            <div class="class-box-middle">
                <div class="card-box">
                    <div class="card-item card-item-1">
                        <div class="card-img">
                        </div>
                        <span class="title">区块链精品实践课</span>
                        <div class="author-address-hour">
                            <div class="author-address">
                                <div class="author">Classrome</div>
                                <div class="address">华为云</div>
                            </div>
                            <div class="hour">
                                <button>6小时</button>
                            </div>
                        </div>
                        <div class="desc">
                            <p class="desc-p">
                                本课程由浅入深的介绍区块链技术缘起、原理机制、演进和发展现状，分享区块链典型应用场景及特点。了解华为云区块链的方案及特点，参与动手实验。从入门到实践，循序渐进一站式学习。
                            </p>
                        </div>
                        <div class="free">
                            <a href="#">限时免费</a>
                        </div>
                    </div>
                    <div class="card-item card-item-1">
                        <div class="card-img">
                        </div>
                        <span class="title">基于新工科的软件工程企业级专家实践课</span>
                        <div class="author-address-hour">
                            <div class="author-address">
                                <div class="author">Classrome</div>
                                <div class="address">华为云</div>
                            </div>
                            <div class="hour">
                                <button>6小时</button>
                            </div>
                        </div>
                        <div class="desc">
                            <p class="desc-p">
                                停课不停学，为了能够让同学们在家即可学习JAVA，大连理工大学软件学院基于华为云Classroom组织在线直播授课，采用基础知识讲解、
                                在线编程、自动评分、任务闯关、项目训练等多种形式进行教学与实践，欢迎全国有JAVA学习和教学需求的学生和老师在线上观看教学。
                            </p>
                        </div>
                        <div class="free">
                            <a href="#">限时免费</a>
                        </div>
                    </div>
                    <div class="card-item card-item-1">
                        <div class="card-img">
                        </div>
                        <span class="title">HE2E DevOps实践</span>
                        <div class="author-address-hour">
                            <div class="author-address">
                                <div class="author">Classrome</div>
                                <div class="address">华为云</div>
                            </div>
                            <div class="hour">
                                <button>16小时</button>
                            </div>
                        </div>
                        <div class="desc">
                            <p class="desc-p">
                                HE2E即华为端到端的DevOps实施框架，集合了业界先进的实践，结合华为30年研发经验，形成的一套可操作可落地的敏捷开发方法论，并基于DevCloud工具链进行承载。
                            </p>
                        </div>
                        <div class="free">
                            <a href="#">限时免费</a>
                        </div>
                    </div>
                    <div class="card-item card-item-1">
                        <div class="card-img">
                        </div>
                        <span class="title">C语言程序设计</span>
                        <div class="author-address-hour">
                            <div class="author-address">
                                <div class="author">Classrome</div>
                                <div class="address">华为云</div>
                            </div>
                            <div class="hour">
                                <button>96小时</button>
                            </div>
                        </div>
                        <div class="desc">
                            <p class="desc-p">
                                本课程适合作为高等学校计算机专业及相关专业C语言程序设计课程的教材，也可作为计算机等级考试参考书，还可供从事计算机软件开发人员参考使用。主要包含，C语言概述，数据类型，基本语句与结构化程序设计，数组，函数和模块化程序设计，指针，预处理命令，复杂数据类型，文件。附有习题，习题覆盖知识重点，题型丰富。
                            </p>
                        </div>
                        <div class="free">
                            <a href="#">限时免费</a>
                        </div>
                    </div>
                    <div class="card-item card-item-1">
                        <div class="card-img">
                        </div>
                        <span class="title">Web实践课</span>
                        <div class="author-address-hour">
                            <div class="author-address">
                                <div class="author">Classrome</div>
                                <div class="address">华为云</div>
                            </div>
                            <div class="hour">
                                <button>96小时</button>
                            </div>
                        </div>
                        <div class="desc">
                            <p class="desc-p">
                                本门课程涵盖：WEB基础、CSS、JS、H5等教学内容组成，学生可以边学习边练习，步步进阶，学生可以逐步提升前端开发能力。
                            </p>
                        </div>
                        <div class="free">
                            <a href="#">限时免费</a>
                        </div>
                    </div>
                    <div class="card-item card-item-1">
                        <div class="card-img">
                        </div>
                        <span class="title">人工智能：算法与实践</span>
                        <div class="author-address-hour">
                            <div class="author-address">
                                <div class="author">Classrome</div>
                                <div class="address">华为云</div>
                            </div>
                            <div class="hour">
                                <button>96小时</button>
                            </div>
                        </div>
                        <div class="desc">
                            <p class="desc-p">
                                本课程讲述的是有关人工智能算法与实践的内容，并介绍相关的数学基础、相关应用及工具，以及如何在实际环境中使用它们。课程不仅仅介绍了各种人工智能算法的理论知识，更是通过建立多个实际案例、习题测评，引导学生在实际项目中学到相关知识经验，同时老师可以灵活安排学生的学习任务，有效地对学生的知识吸收情况做针对性的解决。课程开发环境为python3.6及以上
                                + Anaconda3 。
                            </p>
                        </div>
                        <div class="free">
                            <a href="#">限时免费</a>
                        </div>
                    </div>

                </div>

                <div class="card-more">
                    <button>查看更多></button>
                </div>
            </div>

        </div>
        <div class="market-box">
            <div class="market-box-body">
                <!--教学市场区域-->
                <div class="class-box-top">
                    <h3>教学市场</h3>
                    <p>丰富教学资源辅助高效教学，免费习题库一键获取</p>
                </div>

                <div class="class-box-middle">
                    <div class="card-box">
                        <div class="card-item card-item-1">
                            <div class="card-img">
                            </div>
                            <span class="title">JAVA-习题库</span>
                            <div class="author-address-hour">
                                <div class="author-address">
                                    <div class="author">Classrome</div>
                                    <div class="address">华为云</div>
                                </div>
                                <div class="hour">
                                </div>
                            </div>
                            <div class="desc">
                                <p class="desc-p">
                                    本习题库覆盖JAVA的相关知识，习题涉及到基本数据类型、语句、类、封装继承、对象、接口、内部类、异常处理、字符串、实用类、多线程、输入输出流等相关知识。
                                    习题类型包括单选题、编程题、单人项目题等，每个习题都与知识点相对于，通过这些习题，可以很好的检查学生对JAVA知识的掌握程度，提升学生的动手编码能
                                </p>
                            </div>
                            <div class="free">
                                <a href="#">限时免费</a>
                            </div>
                        </div>
                        <div class="card-item card-item-1">
                            <div class="card-img">
                            </div>
                            <span class="title">C-习题库</span>
                            <div class="author-address-hour">
                                <div class="author-address">
                                    <div class="author">Classrome</div>
                                    <div class="address">华为云</div>
                                </div>
                                <div class="hour">
                                </div>
                            </div>
                            <div class="desc">
                                <p class="desc-p">
                                    本习题库覆盖C语言的相关知识，习题涉及到C语言概述，数据类型，基本语句与结构化程序设计，数组，函数和模块化程序设计，指针，预处理命令，复杂数据类型，文件操作等。习题类型包括单选题、编程题，每个习题都与知识点相对应，所有习题支持自动判题，通过这些习题，可以很好的检查学生对C语言知识的掌握程度，提升学的动手编码能

                                </p>
                            </div>
                            <div class="free">
                                <a href="#">限时免费</a>
                            </div>
                        </div>
                        <div class="card-item card-item-1">
                            <div class="card-img">
                            </div>
                            <span class="title">Web-习题库</span>
                            <div class="author-address-hour">
                                <div class="author-address">
                                    <div class="author">Classrome</div>
                                    <div class="address">华为云</div>
                                </div>
                                <div class="hour">
                                </div>
                            </div>
                            <div class="desc">
                                <p class="desc-p">
                                    本习题库覆盖web开发相关知识点，对HTML、CSS、JavaScript等内容，进行了习题覆盖。习题类型包括单选题、编程题，每个习题都与知识点相对于，通过这些习题，可以很好的检查学生对Web知识的掌握程度，提升学生的动手编码能力。
                                </p>
                            </div>
                            <div class="free">
                                <a href="#">限时免费</a>
                            </div>
                        </div>
                        <div class="card-item card-item-1">
                            <div class="card-img">
                            </div>
                            <span class="title">系统分析与设计</span>
                            <div class="author-address-hour">
                                <div class="author-address">
                                    <div class="author">Classrome</div>
                                    <div class="address">华为云</div>
                                </div>
                                <div class="hour">
                                </div>
                            </div>
                            <div class="desc">
                                <p class="desc-p">
                                    本课程通过DevOps与云服务相结合，基于“项目驱动”的工程实践进行能力训练，采取“基础知识-->核心应用-->综合案例-->企业实践”的结构和“由浅入深，由深到精”的学习模式进行讲解，掌握产品经理与项目经理应具备的技能知识点，具备云服务与开发的基本能力。
                                </p>
                            </div>
                            <div class="free">
                                <a href="#">限时免费</a>
                            </div>
                        </div>
                        <div class="card-item card-item-1">
                            <div class="card-img">
                            </div>
                            <span class="title">数据结构（C语言）实践教学精品课</span>
                            <div class="author-address-hour">
                                <div class="author-address">
                                    <div class="author">Classrome</div>
                                    <div class="address">华为云</div>
                                </div>
                                <div class="hour">
                                </div>
                            </div>
                            <div class="desc">
                                <p class="desc-p">
                                    本课程对常用的数据结构做了系统的介绍，力求概念清晰，注重实际应用。课程依次介绍数据结构的基本概念、线性表、栈和队列、串和数组、树和二叉树、图结构，以及查找和排序等基本运算，用C语言作为算法描述语言，并附有典型例题与小结，便于读者总结和提高
                                </p>
                            </div>
                            <div class="free">
                                <a href="#">限时免费</a>
                            </div>
                        </div>
                        <div class="card-item card-item-1">
                            <div class="card-img">
                            </div>
                            <span class="title">Python程序设计精品课</span>
                            <div class="author-address-hour">
                                <div class="author-address">
                                    <div class="author">Classrome</div>
                                    <div class="address">华为云</div>
                                </div>
                                <div class="hour">
                                </div>
                            </div>
                            <div class="desc">
                                <p class="desc-p">
                                    本课程主要介绍Python语言的语法及常用模块的使用，重点介绍面向对象设计，字符串操作，正则表达式等知识，同时通过游戏设计，展示Python语言的简易和强大。
                                </p>
                            </div>
                            <div class="free">
                                <a href="#">限时免费</a>
                            </div>
                        </div>

                    </div>

                    <div class="card-more">
                        <button>查看更多></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="activity-box">
            <!--活动公告区域-->
            <div class="activity-box-body">
                <div class="activity-box-top">
                    <h3>活动公告</h3>
                </div>


                <div class="activity-list">
                    <div class="activity-item">
                        <div class="left-img1">
                        </div>
                        <div class="right-content">
                            <div class="link"><a target="_blank"
                                    href="https://classroom.devcloud.cn-north-4.huaweicloud.com/joinclass/2806547cce804017884bfd0ac7847c0b/1">大连理工大学与华为软件工程大师华山论剑，邀您参与。</a>
                            </div>
                            <div class="source">
                                <span>Classroom | 2020/03/31</span>
                            </div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="left-img1">

                        </div>
                        <div class="right-content">
                            <div class="link"><a target="_blank"
                                    href="https://classroom.devcloud.cn-north-4.huaweicloud.com/joinclass/2806547cce804017884bfd0ac7847c0b/1">大连理工大学与华为软件工程大师华山论剑，邀您参与。</a>
                            </div>
                            <div class="source">
                                <span>Classroom | 2020/03/31</span>
                            </div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="left-img1">

                        </div>
                        <div class="right-content">
                            <div class="link"><a target="_blank"
                                    href="https://classroom.devcloud.cn-north-4.huaweicloud.com/joinclass/2806547cce804017884bfd0ac7847c0b/1">大连理工大学与华为软件工程大师华山论剑，邀您参与。</a>
                            </div>
                            <div class="source">
                                <span>Classroom | 2020/03/31</span>
                            </div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="left-img1">

                        </div>
                        <div class="right-content">
                            <div class="link"><a target="_blank"
                                    href="https://classroom.devcloud.cn-north-4.huaweicloud.com/joinclass/2806547cce804017884bfd0ac7847c0b/1">大连理工大学与华为软件工程大师华山论剑，邀您参与。</a>
                            </div>
                            <div class="source">
                                <span>Classroom | 2020/03/31</span>
                            </div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="left-img1">

                        </div>
                        <div class="right-content">
                            <div class="link"><a target="_blank"
                                    href="https://classroom.devcloud.cn-north-4.huaweicloud.com/joinclass/2806547cce804017884bfd0ac7847c0b/1">大连理工大学与华为软件工程大师华山论剑，邀您参与。</a>
                            </div>
                            <div class="source">
                                <span>Classroom | 2020/03/31</span>
                            </div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="left-img1">

                        </div>
                        <div class="right-content">
                            <div class="link"><a target="_blank"
                                    href="https://classroom.devcloud.cn-north-4.huaweicloud.com/joinclass/2806547cce804017884bfd0ac7847c0b/1">大连理工大学与华为软件工程大师华山论剑，邀您参与。</a>
                            </div>
                            <div class="source">
                                <span>Classroom | 2020/03/31</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <!--页面尾部区域-->
        <!--提示：页面尾部内容可以简化处理-->
        <div class="footer-body">
            <div class="footer-left">
                <p>
                    <span> 版权所有 © 华为软件技术有限公司 2020 </span>
                    <span> 保留一切权利</span>
                    <span> <a class="footer-link" href="http://www.beian.miit.gov.cn"
                            target="_blank">苏ICP备17040376号-32</a>
                    </span>
                    <span> 苏B2-20130048号</span>
                    <span> 代理域名注册服务机构：新网</span>
                </p>
                <div>
                    <img
                        src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/a6.ea273d321dfe85310598.png" />
                    <img
                        src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/a7.c7ee79a1b54f386fd2f7.png" />
                    <span>苏公网安备 32011402010008号</span>
                </div>
            </div>
            <div class="footer-right">
                <div class="span-body">
                    <span><a class="footer-link" href="//www.huaweicloud.com/declaration/statement.html"
                            target="_blank">法律声明</a>
                        | <a class="footer-link" href="//www.huaweicloud.com/declaration/sa_prp.html"
                            target="_blank">隐私政策</a></span>

                </div>
            </div>
        </div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_31905135/article/details/108192988
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022