“强烈地”

创建时间：2015 年 11 月 19 日

经过 ：标价

电子邮件 ： contact@markups.io

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

目录

  1. 介绍
  2. HTML 结构
  3. CSS 文件和结构
  4. JavaScript
  5. 导航和徽标
  6. 使用的字体
  7. 资料来源及致谢

A) 简介-顶部

非常感谢您下载此模板，名为Intensely - 多用途商业 HTML5 模板。如果您对此模板有疑问或问题，请随时与我们联系。我们无法保证，但我们会尽力为您提供最佳帮助。

模板功能

B) HTML 结构-顶部

HTML 文件

此模板共包含 10 个 HTML 文件。这些文件包括 index.html、feature.html、service.html、portfolio.html、blog-archive.html、blog-single-with-left-sidebar.html、blog-single-with-right-sidebar.html、blog-single-with-out-sidebar.html、404.html、contact.html

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

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

？
1
2
3
4
5
6
7
8
9
10
11
12
十三
14
15
16
17
18
19
20
21
22
23
24
二十五
二十六
二十七
二十八
二十九
三十
31
三十二
33
三十四
三十五
三十六
三十七
三十八
三十九
40
41
四十二
43
四十四
四十五
四十六
四十七
四十八
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
<!-- Primary Page Layout
================================================== -->
 
    <!-- BEGIN NAVBAR SECTION -->
    <header id="header">
         
    </header>      
    <!-- END NAVBAR SECTION -->
 
    <!-- BEGAIN MENU AREA SECTION -->
    <section id="menu-area">
         
    </section>
    <!-- END MENU AREA SECTION -->
 
    <!-- BEGAIN SLIDER SECTION -->
    <section id="slider">
         
    </section>
    <!-- END SLIDER SECTION -->
 
    <!-- BEGAIN FEATURES SECTION -->
    <section id="feature">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END FEATURES SECTION -->
 
    <!-- BEGAIN ABOUT US SECTION -->
    <section id="about">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END ABOUT US SECTION -->
 
    <!-- BEGAIN COUNTER SECTION -->
    <section id="counter">
 
    </section>
    <!-- END COUNTER SECTION -->
 
    <!-- BEGAIN SERVICE SECTION -->
    <section id="service">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END SERVICE SECTION -->
 
    <!-- BEGAIN PRICING TABLE SECTION -->
    <section id="pricing-table">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END PRICING TABLE SECTION -->
 
    <!-- BEGAIN OUR TEAM SECTION -->
    <section id="our-team">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END OUR TEAM SECTION -->
 
    <!-- BEGAIN TESTIMONIAL SECTION -->
    <section id="testimonial">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END TESTIMONIAL SECTION -->
 
    <!-- BEGAIN CLIENT BRAND SECTION -->
    <section id="clients-brand">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END CLIENT BRAND SECTION -->
 
    <!-- BEGAIN LATEST NEWS SECTION -->
    <section id="latest-news">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END LATEST NEWS SECTION -->
 
    <!-- BEGAIN SUBSCRIBE SECTION -->
    <section id="subscribe">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END SUBSCRIBE SECTION -->
 
    <!-- BEGAIN FOOTER SECTION -->
    <footer id="footer">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </footer>
    <!-- END FOOTER SECTION -->    

C) CSS 文件和结构-顶部

样式

？
1
2
3
4
5
6
7
8
9
10
11
12
十三
14
15
16
17
18
19
20
21
22
23
24
二十五
二十六
二十七
二十八
二十九
三十
31
三十二
33
<!-- 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">
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<!-- Progress bar   -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-progressbar-3.3.4.css">
 <!-- Theme color -->
<link id="switcher" href="assets/css/theme-color/default-theme.css" rel="stylesheet">
 
<!-- Main Style -->
<link href="style.css" rel="stylesheet">
 
<!-- Fonts -->
 
<!-- Open Sans for body font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<!-- Lato for Title -->
<link href="https://fonts.googleapis.com/css?family=Lato" 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]-->

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

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

font-awesome.css

FontAwesome 图标字体的基本样式。

引导程序.css

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

slick.css

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

jquery.fancybox.css

Fancybox 画廊 css 文件

动画.css

元素样式动画 css 文件

bootstrap-progressbar-3.3.4.css

Bootstrap 进度条 css 文件

默认主题.css

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

样式.css

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

？
1
2
3
4
5
6
7
8
9
10
11
12
十三
14
15
16
17
18
19
20
21
22
23
24
二十五
二十六
二十七
/* Style.css File Table of Content
==================================================
#BASIC TYPOGRAPHY
#HEADER
#MENU
#SLIDER
#FEATURES
#ABOUT
#COUNTER
#SERVICE
#PRICING TABLE
#TESTIMONIAL
#PRICING TABLE
#OUR TEAM
#TESTIMONIAL
#CLIENTS BRAND
#LATEST NEWS
#SUBSCRIBE US
#FOOTER
#PORTFOLIO PAGE
#BLOG PAGE
#CONTACT PAGE
#ERROR PAGE
#RESPONSIVE STYLE
*/

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

D） JavaScript-顶部

该模板导入10个Javascript文件。

？
1
2
3
4
5
6
7
8
9
10
11
12
十三
14
15
16
17
18
19
20
21
22
23
24
二十五
二十六
<!-- Javascript Files
 ================================================== --> 
  
 <!-- jQuery library -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <!-- Bootstrap -->
 <script src="assets/js/bootstrap.js"></script>
 <!-- Slick Slider -->
 <script type="text/javascript" src="assets/js/slick.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>
<!-- counter -->
 <script src="assets/js/waypoints.js"></script>
 <script src="assets/js/jquery.counterup.js"></script>
 <!-- Wow animation -->
 <script type="text/javascript" src="assets/js/wow.js"></script>
 <!-- progress bar   -->
 <script type="text/javascript" src="assets/js/bootstrap-progressbar.js"></script> 
  
 
 <!-- Custom js -->
 <script type="text/javascript" src="assets/js/custom.js"></script>

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

jquery.min/js

初始化 jQuery 库

bootstrap.js

Bootstrap 框架主 jquery 文件

slick.min.js

用于轮播幻灯片的光滑滑块 jQuery 文件

jquery.mixitup.js

Mixitup 可过滤图库主 jQuery 文件

jquery.fancybox.pack.js

Fancybox 弹出画廊主 jQuery 文件

waypoints.js

计数器幻灯片的流畅动画

jquery.counterup.js

Counterup 主 jquery 文件

哇.js

WOW动画主js文件

bootstrap-progressbar.js

Bootstrpa 进度条主 js 文件

自定义.js

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

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

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

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

？
1
2
3
4
5
6
7
8
9
10
11
12
十三
14
15
16
17
18
19
20
21
22
23
24
二十五
二十六
二十七
二十八
二十九
三十
31
三十二
33
三十四
三十五
三十六
三十七
三十八
三十九
40
41
四十二
43
四十四
四十五
四十六
<!-- BEGIN MENU -->
 <section id="menu-area">     
   <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">Intensely</a>             
         <!-- IMG BASED LOGO  -->
          <!-- <a class="navbar-brand" href="index.html"><img src="assets/images/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><a href="feature.html">Feature</a></li>
           <li><a href="service.html">Service</a></li>
           <li><a href="portfolio.html">Portfolio</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-with-left-sidebar.html">Blog Single with Left Sidebar</a></li>
               <li><a href="blog-single-with-right-sidebar.html">Blog Single with Right Sidebar</a></li>
               <li><a href="blog-single-with-out-sidebar.html">Blog Single with out Sidebar</a></li>
             </ul>
           </li>
           <li><a href="404.html">404 Page</a></li>              
           <li><a href="contact.html">Contact</a></li>
         </ul>                    
       </div><!--/.nav-collapse -->
       <a href="#" id="search-icon">
         <i class="fa fa-search">           
         </i>
       </a>
     </div>    
   </nav>
 </section>
 <!-- END MENU -->

F) 使用的字体-顶部

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

  1. Lato-用于标题
  2. Open Sans - 用于正文

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

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

标价

转至目录