“大学队”

创建时间：2016 年 5 月 29 日

经过：标价

感谢您下载我们的模板。如果您有任何超出本帮助文件范围的问题，请随时通过下载页面上的模板评论部分与我们联系。非常感谢！

HTML5 和 CSS3 已验证
响应式模板
光滑滑块
多页模板
基于 Bootstrap 3.3.6 构建
479 个图标（基于 FontAwesome）
10 个主题颜色变化
滑块部分
覆盖搜索表单
服务科
关于我们部分
柜台部分
功能部分
最新课程部分
我们的教师部分
客户评价部分
最新博客部分
课程存档页面
课程详情页面
画廊页面
博客存档页面
博客详细信息页面
联系页面
404 错误页面
Google 地图集成
Google Web 字体

B) HTML 结构-顶部

HTML 文件

此模板共包含 08 个 HTML 文件。这些文件包括 index.html、course.html、course-detail.html、gallery.html、blog-archive.html、blog-single.html、contact.html 和 404.html

这里只是主页“index.hthml”HTML 结构

此模板是基于 Bootstrap 的响应式布局和 index.html 文件，由十二 (12) 个部分分隔。以下是总体结构。

十三

二十五

二十六

二十七

二十八

二十九

三十

三十二

三十四

三十五

三十六

三十七

三十八

三十九

四十二

四十四

四十五

四十六

四十七

四十八

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!-- Primary Page Layout
================================================== -->
 
    <!-- BEGIN HEADER SECTION -->
    <header id="mu-header">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </header>       
    <!-- END HEADER SECTION -->
 
    <!-- BEGAIN SEARCH SECTION -->
    <section id="mu-search">
         
    </section>
    <!-- END SEARCH SECTION -->    
 
    <!-- BEGAIN SLIDER SECTION -->
    <section id="mu-slider">
         
    </section>
    <!-- END SLIDER SECTION -->
 
    <!-- BEGAIN SERVICE SECTION -->
    <section id="mu-service">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END SERVICE SECTION -->
 
    <!-- BEGAIN ABOUT US SECTION -->
    <section id="mu-about-us">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END ABOUT US SECTION -->
 
    <!-- BEGAIN ABOUT COUNTER SECTION -->
    <section id="mu-counter">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END ABOUT COUNTER SECTION -->
 
    <!-- BEGAIN FEATURES SECTION -->
    <section id="mu-features">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END FEATURES SECTION -->
 
    <!-- BEGAIN LATEST COURSE SECTION -->
    <section id="mu-latest-course">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END LATEST COURSE SECTION -->
 
    <!-- BEGAIN OUR TEACHER SECTION -->
    <section id="mu-our-teacher">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END OUR TEACHER SECTION -->
 
    <!-- BEGAIN TESTIMONIAL SECTION -->
    <section id="mu-testimonial">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END TESTIMONIAL SECTION -->
 
    <!-- BEGAIN FROM BLOG SECTION -->
    <section id="mu-from-blog">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END FROM BLOG SECTION -->
 
    <!-- BEGAIN FOOTER SECTION -->
    <footer id="mu-footer">
        <!-- BEGAIN FOOTER TOP SECTION -->
        <div class="mu-footer-top">
            <!-- BEGAIN CONTAINER -->
            <div class="container">
                 
            </div>
            <!-- END CONTAINER -->
        </div>
        <!-- END FOOTER TOP SECTION -->
        <!-- BEGAIN FOOTER BOTTOM SECTION -->
        <div class="mu-footer-bottom">
            <!-- BEGAIN CONTAINER -->
            <div class="container">
                 
            </div>
            <!-- END CONTAINER -->
        </div>
        <!-- END FOOTER BOTTOM SECTION -->
    </footer>
    <!-- END FOOTER SECTION -->    

C) CSS 文件和结构-顶部

样式

十三

二十五

二十六

二十七

<!-- Font awesome -->
<link href="assets/css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.css" rel="stylesheet">   
<!-- Slick slider -->
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">          
<!-- Fancybox slider -->
<link rel="stylesheet" href="assets/css/jquery.fancybox.css" type="text/css" media="screen"> 
<!-- Theme color -->
<link id="switcher" href="assets/css/theme-color/default-theme.css" rel="stylesheet">          
 
<!-- Main style sheet -->
<link href="assets/css/style.css" rel="stylesheet">    
 
 
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,300,300italic,500,700" rel="stylesheet" type="text/css">
 
 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

我们在此模板中使用 06 个 CSS 文件。我们已将样式分开，以提高编辑此模板的便利性。如果您要在生产中使用此模板，我们建议您将所有样式表合并到一个文件中（以减少 http 查询）。

让我们仔细看看我们的样式表文件。

font-awesome.css

Font Awesome 图标字体的基本样式。

引导程序.css

此样式表包含响应式网格系统，基于bootstrap 的默认元素样式。它是 bootstrap 框架的主要 css 文件

slick.css

滑块 (光滑滑块) 的样式。

jquery.fancybox.css

这是用于画廊弹出视图的 Fancybox 滑块 css 文件

默认主题.css

这是该模板的默认主题颜色文件。

样式.css

此模板的通用 CSS 样式和结构。

十三

二十五

/* Style.css File Table of Content
==================================================
#BASIC TYPOGRAPHY
#HEADER SECTION
#NAVBAR SECTION
#SLIDER SECTION
#SERVICE SECTION
#ABOUT US SECTION
#COUNTER SECTION
#FEATURES SECTION
#LATEST COURSES SECTION
#TEACHER SECTION
#TESTIMONIAL SECTION
#FROM BLOG SECTION
# COURSES PAGE
#BLOG PAGE
#GALLERY PAGE
#CONTACT PAGE
#ERROR  PAGE
#FOOTER SECTION
#RESPONSIVE DESIGN
 
*/

一些样式表（总共 09 种主题颜色）包含不同的主题颜色，可轻松更改所需的主题颜色。您可以在assets/css/theme-color文件夹中找到这些主题。

D） JavaScript-顶部

该模板导入07 Javascript 文件。

十三

<!-- Javascript Files
================================================== --> 
 
   <!-- jQuery library -->
  <script src="assets/js/jquery.min.js"></script>  
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="assets/js/bootstrap.js"></script>   
  <!-- Slick slider -->
  <script type="text/javascript" src="assets/js/slick.js"></script>
  <!-- Counter -->
  <script type="text/javascript" src="assets/js/waypoints.js"></script>
  <script type="text/javascript" src="assets/js/jquery.counterup.js"></script>  
  <!-- Mixit slider -->
  <script type="text/javascript" src="assets/js/jquery.mixitup.js"></script>
  <!-- Add fancyBox -->       
  <script type="text/javascript" src="assets/js/jquery.fancybox.pack.js"></script>
   
   
  <!-- Custom js -->
  <script src="assets/js/custom.js"></script> 

让我们仔细看看我们的 javascript 文件。

jquery.min/js

初始化 jQuery 库

bootstrap.js

Bootstrap 框架主 jquery 文件

slick.js

主滑块和轮播滑块的 Slick 滑块 js 文件

waypoints.js 和 jquery.counterup.js

两个 jQuery 文件均用于动画计数器插件

jquery.mixitup.js

用于 mixitup 可过滤滑块的 jQuery js 文件

jquery.fancybox.pack.js

此 jQuery 文件用于弹出 fancybox 插件

自定义.js

我们将许多插件的初始化放在这里。

E) 导航和徽标-顶部

基于 bootstrap 的导航菜单。它将针对桌面和移动设备显示不同的视图。

徽标嵌套在带有navbar-brand类的标签中。如您所见，有两种徽标：基于文本（默认情况下）和基于图像。您可以通过删除 html 注释来选择首选变体。不要忘记评论或删除其他变体。

这里显示了导航和徽标的结构布局

十三

二十五

二十六

二十七

二十八

二十九

三十

三十二

三十四

三十五

三十六

三十七

三十八

三十九

四十二

四十四

四十五

<!-- BEGIN MENU -->
<nav class="navbar navbar-default" role="navigation">  
  <div class="container">
    <div class="navbar-header">
      <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- LOGO -->             
      <!-- TEXT BASED LOGO -->
      <a class="navbar-brand" href="index.html"><i class="fa fa-university"></i><span>Varsity</span></a>
      <!-- IMG BASED LOGO  -->
      <!-- <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="logo"></a> -->
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
        <li class="active"><a href="index.html">Home</a></li>            
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Course <span class="fa fa-angle-down"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="course.html">Course Archive</a></li>                
            <li><a href="course-detail.html">Course Detail</a></li>                
          </ul>
        </li>           
        <li><a href="gallery.html">Gallery</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <span class="fa fa-angle-down"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="blog-archive.html">Blog Archive</a></li>                
            <li><a href="blog-single.html">Blog Single</a></li>                
          </ul>
        </li>            
        <li><a href="contact.html">Contact</a></li>
        <li><a href="404.html">404 Page</a></li>               
        <li><a href="#" id="mu-search-icon"><i class="fa fa-search"></i></a></li>
      </ul>                     
    </div><!--/.nav-collapse -->       
  </div>     
</nav>
<!-- END MENU -->

F) 使用的字体-顶部

我们在此模板中使用了两种 Google Web 字体。

Roboto - 用于正文内容
蒙特塞拉特- 用于标题标签

G) 资料来源和致谢-顶部

再次感谢您下载此商品。正如我们开头所说，如果您对此商品有任何疑问，我们很乐意为您提供帮助。虽然不能保证，但我们会尽力提供帮助。如果您对此商品有更一般的问题，您可以考虑访问商品下载页面并在“商品评论”部分提出您的问题。

标价

转至目录