project/
   ├── css/
   │     ├── animate.min.css v3.7.2
   │     ├── bootstrap.min.css v3.3.7
   │     ├── font-awesome.min.css v4.7.0
   │     ├── font-other.css
   │     ├── style.less
   │     └── swiper.min.css v4.5.0
   ├── fonts/
   │     ├── arial.ttf
   │     ├── FontAwesome.otf v4.7.0 2016
   │     ├── fontawesome-webfont.eot
   │     ├── fontawesome-webfont.svg
   │     ├── fontawesome-webfont.ttf
   │     ├── fontawesome-webfont.woff
   │     └── fontawesome-webfont.woff2
   ├── images/
   │     ├── home/
   │     ├── chrome.png
   │     ├── side_icon.png
   │     └── side_icon-w.png
   ├── js/
   │     ├── bootstrap.min.js v3.3.7
   │     ├── jquery-1.12.4.min.js v1.12.4
   │     ├── less.min.js v3.10.3
   │     ├── main.js
   │     ├── swiper.animate.min.js v1.0.3
   │     ├── swiper.min.js v4.5.0
   │     └── wow.min.js v1.1.3
   ├── README.MD
   └── template.html

<div class="home-header"></div>
<div class="home-content">
    <div class="home-section1">...</div>
    <div class="home-section2">...</div>
    <div class="home-section3">...</div>
    ...
</div>
<div class="home-footer"></div>

.home{
    &-header{}
    &-content{}
    &-section1{}
    &-section2{}
    &-section3{}
    ...
    &-footer{}
}

<!--[if lte IE 9]>
  <div class="ie-warning">
    <h1 class="c-white">注意!!</h1>
    <p>您使用的是过时版本的Internet Explorer，建议使用极具稳定性、速度和安全性的Google Chrome浏览器。</p>
    <div class="ie-container">
      <ul class="ie-download">
        <li>
          <a href="https://www.google.cn/intl/zh-CN/chrome/">
            <img src="images/chrome.png" alt="">
            <div>Chrome</div>
          </a>
        </li>
      </ul>
    </div>
    <p>抱歉给您带来不便！</p>
  </div>
  <![endif]-->

<!-- less-->
<script src="js/less.min.js"></script>
<script>less.watch();</script>