1、引言

青春在线网页采用html5，css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计

2、作品介绍

青春在线网页采用html5，css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注公众号：coding加油站，回复“青春在线”免费获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

青春在线网页采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、作品演示

3.1、首页

相关代码：

  <header class="container-fluid">
    <div class="home-top">
      <a href="javascript:void(0);" id="logo">
        <img src="./img/logo.png" alt="logo" class="home-top-logo">
      </a>
      <div class="home-top-right">
        <input type="search" name="search" id="header-search" placeholder="请输入关键词">
        <img src="./img/setting-gray.png" alt="扩展" class="home-top-setting">
      </div>
    </div>
    <nav class="home-nav">
      <ul class="nav" role="tablist">
        <li class="home-nav-item">
          <a href="https://www.sdut.edu.cn/">学校首页</a>
        </li>
        <li class="home-nav-item">
          <a href="./single-column-show.html">学工频道</a>
          <ul class="nav-down">
            <li><a href="">部门介绍</a></li>
            <li><a href="">机构设置</a></li>
            <li><a href="">学工简报</a></li>
            <li><a href="">学工动态</a></li>
          </ul>
        </li>
        <li class="home-nav-item">
          <a href="./title-list.html">思政园地</a>
          <ul class="nav-down">

          </ul>
        </li>
        <li class="home-nav-item">
          <a href="">学生服务</a>
          <ul class="nav-down">
            <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>
          </ul>
        </li>
        <li class="home-nav-item">
          <a href="">辅导员之家</a>
          <ul class="nav-down">
            <li><a href="">辅导员风采</a></li>
            <li><a href="">导言导语</a></li>
            <li><a href="">辅导员博客</a></li>
          </ul>
        </li>
        <li class="home-nav-item">
          <a href="./img-list.html">青春栏目</a>
          <ul class="nav-down">
            <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="">视频专区</a></li>
          </ul>
        </li>
        <li class="home-nav-item">
          <a href="">易班</a>
          <ul class="nav-down">

          </ul>
        </li>
        <li class="home-nav-item">
          <a href="./double-column-show.html">信息公开</a>
          <ul class="nav-down">

          </ul>
        </li>
      </ul>
    </nav>
  </header>

  <!-- 主体内容 -->
  <section>

    <!-- banner 部分 -->
    <div class="home-banner">

      <!-- 主 banner -->
      <div class="home-banner-main">
        <div class="swiper-container" id="home-banner-main">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="">
                <img src="./img/banner-main.png" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="">
                <img src="./img/banner-main.png" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="">
                <img src="./img/banner-main.png" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="">
                <img src="./img/banner-main.png" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="">
                <img src="./img/banner-main.png" alt="">
              </a>
            </div>
          </div>

          <!-- 分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

      </div>

      <!-- banner 右侧 -->
      <div class="home-banner-right">

        <!-- 小 banner -->
        <div class="home-banner-small">
          <div id="home-banner-small" class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./img/home-banner-small.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="./img/home-banner-small.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="./img/home-banner-small.png" alt="">
              </div>
            </div>
          </div>
        </div>

        <!-- 日历列表 -->
        <div class="home-banner-calendar">
          <ul>
            <li>
              <div class="home-banner-calendar-item">
                <div class="home-banner-calendar-item-datebox">
                  <div class="home-banner-calendar-item-day">
                    <!-- 日期 -->
                    1
                  </div>
                  <div class="home-banner-calendar-item-mouth">
                    <!-- 月份 -->
                    12月
                  </div>
                </div>
                <div class="home-banner-calendar-item-content">
                  <div class="home-banner-calendar-item-content-title">
                    <!-- 事件名称，文字过多时用...代替 -->
                    第十四周校领导接待日
                  </div>
                  <div>
                    <time class="home-banner-calendar-item-content-date">
                      <!-- 日期 -->
                      12月7日（星期五） 14:30-17:00
                    </time>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="home-banner-calendar-item">
                <div class="home-banner-calendar-item-datebox">
                  <div class="home-banner-calendar-item-day">
                    <!-- 日期 -->
                    1
                  </div>
                  <div class="home-banner-calendar-item-mouth">
                    <!-- 月份 -->
                    12月
                  </div>
                </div>
                <div class="home-banner-calendar-item-content">
                  <div class="home-banner-calendar-item-content-title">
                    第十四周校领导接待日
                  </div>
                  <div>
                    <time class="home-banner-calendar-item-content-date">12月7日（星期五） 14:30-17:00</time>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="home-banner-calendar-item">
                <div class="home-banner-calendar-item-datebox">
                  <div class="home-banner-calendar-item-day">
                    <!-- 日期 -->
                    1
                  </div>
                  <div class="home-banner-calendar-item-mouth">
                    <!-- 月份 -->
                    12月
                  </div>
                </div>
                <div class="home-banner-calendar-item-content">
                  <div class="home-banner-calendar-item-content-title">
                    第十四周校领导接待日
                  </div>
                  <div>
                    <time class="home-banner-calendar-item-content-date">12月7日（星期五） 14:30-17:00</time>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="home-banner-calendar-item">
                <div class="home-banner-calendar-item-datebox">
                  <div class="home-banner-calendar-item-day">
                    <!-- 日期 -->
                    1
                  </div>
                  <div class="home-banner-calendar-item-mouth">
                    <!-- 月份 -->
                    12月
                  </div>
                </div>
                <div class="home-banner-calendar-item-content">
                  <div class="home-banner-calendar-item-content-title">
                    第十四周校领导接待日
                  </div>
                  <div>
                    <time class="home-banner-calendar-item-content-date">12月7日（星期五） 14:30-17:00</time>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 新闻部分 -->
    <div class="home-new">
      <div>
        <div class="home-new-channel">
          <a href="">校园快讯</a>
        </div>
        <div class="home-new-content">
          <ul>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="home-new-channel">
          <a href="">学工动态</a>
        </div>
        <div class="home-new-content">
          <ul>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                </div>
                </a>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div>
        <div class="home-new-channel">
          <a href="">辅导员风采</a>
        </div>
        <div class="home-new-content">
          <ul>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
            <li>
              <div class="home-new-content-item">
                <div class="home-new-content-item-title">
                  <a href="javascript:void(0);">
                    <span class="home-new-content-item-title-category">
                      <!-- 文章类别 -->
                      [<span>文学</span>]
                    </span>
                    <span>
                      <!-- 文章题目 -->
                      “金秋文学周”——海飞专场讲座顺…
                    </span>
                  </a>
                </div>
                <div class="home-new-content-item-info">
                  作者：
                  <span>
                    <!-- 作者 -->
                    吕逸新 林岩岩 杜晓琪
                  </span>
                  <time>
                    <!-- 日期 -->
                    2019-01-01
                  </time>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 长 banner -->
    <div class="home-banner-long">
      <div class="swiper-container" id="home-banner-long">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="">
              <img src="./img/home-banner-long.png" alt="">
            </a>
          </div>
          <div class="swiper-slide">
            <a href="">
              <img src="./img/home-banner-long.png" alt="">
            </a>
          </div>
          <div class="swiper-slide">
            <a href="">
              <img src="./img/home-banner-long.png" alt="">
            </a>
          </div>
          <div class="swiper-slide">
            <a href="">
              <img src="./img/home-banner-long.png" alt="">
            </a>
          </div>
          <div class="swiper-slide">
            <a href="">
              <img src="./img/home-banner-long.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 青春栏目 -->
    <div class="home-youth">
      <div>
        <div class="home-youth-top">
          <div class="home-youth-top-rectangle"></div>
          <span class="home-youth-top-title">美好的青春总是迸发光彩</span>
          <div class="home-youth-top-rectangle"></div>
        </div>
        <div class="home-youth-content">
          <div class="home-youth-content-left">
            <div>
              <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>
              </ul>
            </div>
            <div class="home-youth-content-left-banner home-youth-content-center-item">
              <a href="">
                <img src="./img/home-youth-banner.png" alt="">
              </a>
            </div>
          </div>
          <div class="home-youth-content-center">
            <div class="home-youth-content-center-item">
              <a href="">
                <img src="./img/home-youth-huishou.png" alt="">
                <div class="home-youth-content-center-title">
                  <!-- 标题 -->
                  疯狂快递盒 多方共治
                </div>
              </a>
            </div>
            <div class="home-youth-content-center-item">
              <a href="">
                <img src="./img/home-youth-jiu.png" alt="">
                <div class="home-youth-content-center-title">
                  <!-- 标题 -->
                  美酒香醇，切莫辜负饮者期盼
                </div>
              </a>
            </div>
            <div class="home-youth-content-center-item">
              <a href="">
                <img src="./img/home-youth-pa.png" alt="">
                <div class="home-youth-content-center-title">
                  <!-- 标题 -->
                  博观而约取，厚积而薄发——访化学化工学院国奖获得者付翔宇
                </div>
              </a>
            </div>
            <div class="home-youth-content-center-item">
              <a href="">
                <img src="./img/home-youth-ren.png" alt="">
                <div class="home-youth-content-center-title">
                  <!-- 标题 -->
                  博观而约取，厚积而薄发——访化学化工学院国奖获得者付翔宇
                </div>
              </a>
            </div>
          </div>
          <div class="home-youth-content-right home-youth-content-center-item">
            <a href="">
              <img src="./img/home-youth-xin.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片视频专区 -->
    <div class="home-imgvideo">
      <div class="home-imgvideo-top ">
        <div class="home-youth-top-rectangle home-imgvideo-top-rectangle"></div>
        <span class="home-youth-top-title home-imgvideo-top-title">记录青春的印记一直心潮澎湃</span>
        <div class="home-youth-top-rectangle home-imgvideo-top-rectangle"></div>
      </div>
      <div class="home-imgvideo-content">
        <div class="home-imgvideo-content-image">
          <div class="home-imgvideo-content-image-left">
            <div class="home-imgvideo-content-image-left-title">影像志</div>
            <div class="home-imgvideo-content-image-left-line"></div>
            <div class="home-imgvideo-content-image-left-img">
              <a href="">
                图片专区
              </a>
            </div>
            <div class="home-imgvideo-content-image-left-video">
              <a href="">
                视频专区
              </a>
            </div>
          </div>
          <div class="home-imgvideo-content-image-center">
            <img src="img/imgvideo1.png" alt="">
          </div>
          <ul class="home-imgvideo-content-image-right">
            <li>
              <a href="" target="_blank">
                <img src="img/图片专区.jpg" alt="">
                <div class="home-imgvideo-content-image-right-title">
                  专访2018十佳大学生系列
                </div>
              </a>
            </li>
            <li>
              <a href="" target="_blank">
                <img src="img/图片专区.jpg" alt="">
                <div class="home-imgvideo-content-image-right-title">
                  专访2018十佳大学生系列
                </div>
              </a>
            </li>
            <li>
              <a href="" target="_blank">
                <img src="img/图片专区.jpg" alt="">
                <div class="home-imgvideo-content-image-right-title">
                  专访2018十佳大学生系列
                </div>
              </a>
            </li>
            <li>
              <a href="" target="_blank">
                <img src="img/图片专区.jpg" alt="">
                <div class="home-imgvideo-content-image-right-title">
                  专访2018十佳大学生系列斤斤计较斤斤计较红红火火恍恍惚惚
                </div>
              </a>
            </li>
          </ul>
        </div>
        <ul class="home-imgvideo-content-video">
          <li>
            <div class="home-imgvideo-content-video-show">
              <a href=""></a>
              <img src="img/video.jpg" alt="">
            </div>
            <div class="home-imgvideo-content-video-title">
              荣耀或推出一款全新类型的大屏设备
            </div>
            <span></span>
          </li>
          <li>
            <div class="home-imgvideo-content-video-show">
              <a href=""></a>
              <img src="img/video.jpg" alt="">
            </div>
            <div class="home-imgvideo-content-video-title">
              荣耀或推出一款全新类型的大屏设备
            </div>
            <span></span>
          </li>
          <li>
            <div class="home-imgvideo-content-video-show">
              <a href=""></a>
              <img src="img/video.jpg" alt="">
            </div>
            <div class="home-imgvideo-content-video-title">
              荣耀或推出一款全新类型的大屏设备
            </div>
            <span></span>
          </li>
          <li>
            <div class="home-imgvideo-content-video-show">
              <a href=""></a>
              <img src="img/video.jpg" alt="">
            </div>
            <div class="home-imgvideo-content-video-title">
              荣耀或推出一款全新类型的大屏设备
            </div>
            <span></span>
          </li>
        </ul>
      </div>
    </div>

  </section>

3.2、文娱频道

     <div class="row list_content">
        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>

        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>

        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>

        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>
      </div>

      <div class="row list_content">
        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>

        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>

        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>

        <div class="list_content_box col-lg-3 col-md-3 col-sm-6 col-xs-12">
          <div>
            <img src="img/200150.png" alt="" class="list_content_box_img" />
            <p class="list_content_box_title">
              大学生“被就业”：“皇帝的新装”尴尬了谁？
            </p>
            <p class="list_content_box_author">作者：王玉婕</p>
            <p class="list_content_box_time">2018-01-01</p>
          </div>
        </div>
      </div>

3.3、学工频道

  <div class="img-list-banner" style="background-image: url(./img/single-column-show-banner.png);">
    <h1>
      学工频道
    </h1>
  </div>

  <div class="content">
    <div class="tab_box">
      <ul class="nav nav-pills mb-4 justify-content-center" id="pills-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
            aria-controls="pills-profile" aria-selected="true">部门简介</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="pills-organizational-tab" data-toggle="pill" href="#pills-organizational" role="tab"
            aria-controls="pills-organizational" aria-selected="false">机构设置</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="pills-briefing-tab" data-toggle="pill" href="#pills-briefing" role="tab"
            aria-controls="pills-briefing" aria-selected="false">学工简报</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="pills-dynamic-tab" data-toggle="pill" href="#pills-dynamic" role="tab"
            aria-controls="pills-dynamic" aria-selected="false">学工动态</a>
        </li>
      </ul>
      <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
          <span class="title">部门简介</span>
          <div class="detail">
            <p>学生工作处主要负责学校全日制本、专科学生教育、管理和服务工作，下设学生教育科、学生管理科两个科室，武装部，学生公寓管理中心、大学生事务中心、学生资助管理中心三个中心。主要职责：</p>
            <p>1、负责起草学校学生工作计划、总结及有关规章制度，组织、协调与学生工作有关的各项工作。</p>
            <p>2、负责学院学生工作目标管理和考核评估。</p>
            <p>3、负责辅导员队伍建设，包括辅导员的选拔、管理和培训等。</p>
            <p>4、负责学生思想政治教育工作；开展社会主义核心价值观教育、诚信教育、安全法纪教育、形势政策教育、网络教育；进行思想状况调研分析。</p>
            <p>5、协助进行学生入党积极分子培养和学生党员教育工作。</p>
            <p>6、负责学生资助管理中心工作，负责学生奖学金、国家助学贷款、困难补助、减免学费、勤工助学的管理工作。</p>
            <p>7、负责学生公寓管理中心工作，组织、协调、处理学生公寓管理各项工作，推动学生公寓管理社区化。</p>
            <p>8、负责大学生事务中心工作，为广大学生提供便利优质服务和学习发展指导。</p>
            <p>9、配合大学生心理健康教育中心，开展学生心理咨询、心理健康教育、建立学生心理档案库等与心理健康教育相关的工作。</p>
            <p>10、负责学生综合测评、评优奖励工作。</p>
            <p>11、会同教务处、保卫处等部门处理学生各种违纪情况；配合党委（校长）办公室处理学生申诉等相关工作。</p>
            <p>12、负责学生新生报到、入学教育、档案管理、毕业教育工作。</p>
            <p>13、会同有关部门做好学风建设工作，负责学风建设工作领导小组日常工作。</p>
            <p>
              14、负责学校学生的军事训练组织实施、训练考核等工作，配合做好征兵登记及征兵工作，协助有关部门做好退伍学生的复学工作；负责国防教育工作，会同教务处编制学校军事理论教学计划，指导专兼职教师开展对学生的军事理论教学活动；负责民兵组织建设、预备役工作。
            </p>
            <p>15、负责指导学生网站建设与管理。</p>
          </div>
        </div>
        <div class="tab-pane fade" id="pills-organizational" role="tabpanel" aria-labelledby="pills-organizational-tab">
          <span class="title">机构设置</span>
          <div class="detail">内容</div>
        </div>
        <div class="tab-pane fade" id="pills-briefing" role="tabpanel" aria-labelledby="pills-briefing-tab">
          <span class="title">学工简报</span>
          <div class="detail">内容</div>
        </div>
        <div class="tab-pane fade" id="pills-dynamic" role="tabpanel" aria-labelledby="pills-dynamic-tab">
          <span class="title">学工动态</span>
          <div class="detail">内容</div>
        </div>
      </div>
    </div>
  </div>

总结

以上就是本次项目的全部内容，需要交流或者免费获取代码请关注公众号：coding加油站，回复“青春在线”免费获取