“家居地产”

创建时间：2016 年 4 月 22 日

经过 ：标价

电子邮件 ： contact@markups.io

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

目录

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

A) 简介-顶部

非常感谢您下载这个名为Home Property - 免费房地产网站模板的模板。如果您对此模板有疑问或问题，请随时与我们联系。我们无法保证，但我们会尽力为您提供最好的帮助。

模板功能

B) HTML 结构-顶部

HTML 文件

此模板共包含 10 个 HTML 文件。这些文件包括 index.html、properties.html、properties-detail.html、gallery.html、blog-archive.html、blog-single.html、404.html、contact.html、register.html、signin.html

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

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

？
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 HEADER SECTION -->
    <header id="aa-header">            
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </header>      
    <!-- END HEADER SECTION -->
 
    <!-- BEGAIN MENU SECTION -->
    <section id="aa-menu-area">
         
    </section>
    <!-- END MENU SECTION -->
 
    <!-- BEGAIN SLIDER SECTION -->
    <section id="aa-slider">
         
    </section>
    <!-- END SLIDER SECTION -->
 
    <!-- BEGAIN ADVANCE SECTION -->
    <section id="aa-advance-search">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END ADVANCE SECTION -->
 
    <!-- BEGAIN ABOUT US SECTION -->
    <section id="aa-about-us">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END ABOUT US SECTION -->
 
    <!-- BEGAIN LATEST PROPERTY SECTION -->
    <section id="aa-latest-property">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END LATEST PROPERTY SECTION -->
 
    <!-- BEGAIN SERVICE SECTION -->
    <section id="aa-service">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END SERVICE SECTION -->
 
    <!-- BEGAIN PROMO BANNER SECTION -->
    <section id="aa-promo-banner">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END PROMO BANNER SECTION -->
 
    <!-- BEGAIN AGENTS SECTION -->
    <section id="aa-agents">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END AGENTS SECTION -->
 
    <!-- BEGAIN TESTIMONIAL SECTION -->
    <section id="aa-client-testimonial">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END TESTIMONIAL SECTION -->
 
    <!-- BEGAIN CLIENT BRAND SECTION -->
    <section id="aa-client-brand">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END CLIENT BRAND SECTION -->
 
 
    <!-- BEGAIN LATEST BLOG SECTION -->
    <section id="aa-latest-blog">
        <!-- BEGAIN CONTAINER -->
        <div class="container">
             
        </div>
        <!-- END CONTAINER -->
    </section>
    <!-- END LATEST BLOG SECTION -->
 
 
    <!-- BEGAIN FOOTER SECTION -->
    <footer id="aa-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
二十五
二十六
二十七
二十八
二十九
<!-- Font awesome -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">  
<!-- slick slider -->
<link rel="stylesheet" type="text/css" href="css/slick.css">
<!-- price picker slider -->
<link rel="stylesheet" type="text/css" href="css/nouislider.css">
<!-- Fancybox slider -->
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen">
<!-- Theme color -->
<link id="switcher" href="css/theme-color/default-theme.css" rel="stylesheet">    
 
<!-- Main style sheet -->
<link href="css/style.css" rel="stylesheet">   
 
 
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet" type="text/css">   
<link href="https://fonts.googleapis.com/css?family=Open+Sans" 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]-->

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

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

font-awesome.css

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

引导程序.css

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

slick.css

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

nouislider.css

价格选择器 css 文件

jquery.fancybox.css

这是用于画廊弹出视图的 Fancybox 滑块 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 SECTION
#NAVBAR SECTION
#SLIDER SECTION
#ADVANCE SEARCH SECTION
#ABOUT US SECTION
#LATEST PROPERTY SECTION
#SERVICE SECTION
#PROMO BANNER SECTION
#AGENTS SECTION
#TESTIMONIAL SECTION
#CLIENT BRAND SECTION
#LATEST BLOG SECTION
#PROPERTY PAGE
#PROPERTY DETAILS PAGE
#BLOG PAGE
#BLOG SINGLE PAGE
#CONTACT PAGE
#GALLERY PAGE
#ERROR  PAGE
#CONTACT  PAGE
#SIGNIN & REGISTER  PAGE
#FOOTER SECTION
#RESPONSIVE DESIGN
*/

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

D） JavaScript-顶部

该模板导入07 Javascript 文件。

？
1
2
3
4
5
6
7
8
9
10
11
12
十三
14
15
16
17
18
19
<!-- Javascript Files
================================================== --> 
 
  <!-- jQuery library -->        
  <script src="js/jquery.min.js"></script>  
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.js"></script>  
  <!-- slick slider -->
  <script type="text/javascript" src="js/slick.js"></script>
  <!-- Price picker slider -->
  <script type="text/javascript" src="js/nouislider.js"></script>
   <!-- mixit slider -->
  <script type="text/javascript" src="js/jquery.mixitup.js"></script>
  <!-- Add fancyBox -->       
  <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
  <!-- Custom js -->
  <script src="js/custom.js"></script>

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

jquery.min/js

初始化 jQuery 库

bootstrap.js

Bootstrap 框架主 jquery 文件

slick.js

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

nouislider.js

Nouislider jquery 文件用于价格选择器

jquery.mixitup.js

用于 mixitup 可过滤滑块的 jQuery 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="aa-menu-area">
    <nav class="navbar navbar-default main-navbar" 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 aa-logo" href="index.html"> Home <span>Property</span></a>
           <!-- Image based logo -->
           <!-- <a class="navbar-brand aa-logo-img" href="index.html"><img src="img/logo.png" alt="logo"></a> -->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul id="top-menu" class="nav navbar-nav navbar-right aa-main-nav">
            <li class="active"><a href="index.html">HOME</a></li>
             <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="properties.html">PROPERTIES <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">               
                <li><a href="properties.html">PROPERTIES</a></li>
                <li><a href="properties-detail.html">PROPERTIES DETAIL</a></li>                                           
              </ul>
            </li>
            <li><a href="gallery.html">GALLERY</a></li>                                        
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="blog-archive.html">BLOG <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">               
                <li><a href="blog-archive.html">BLOG</a></li>
                <li><a href="blog-single.html">BLOG DETAILS</a></li>                                           
              </ul>
            </li>
            <li><a href="contact.html">CONTACT</a></li>
           <li><a href="404.html">404 PAGE</a></li>
          </ul>                           
        </div><!--/.nav-collapse -->      
      </div>         
    </nav>
  </section>
<!-- END MENU -->

F) 使用的字体-顶部

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

  1. Open Sans - 用于正文
  2. Vollkorn - 头球

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

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

标价

转至目录