# init-template

**Repository Path**: bemzhao/init-template

## Basic Information

- **Project Name**: init-template
- **Description**: 初始模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-04-17
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## PC响应式项目初始模板

### 1、文件及其版本
```
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
```

### 2、布局规范

HTML;
```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>

```

Less;
```less
.home{
    &-header{}
    &-content{}
    &-section1{}
    &-section2{}
    &-section3{}
    ...
    &-footer{}
}

```

### 3、Internet Explorer 兼容处理

如果客户没有特别要求一定要兼容到 IE多少，在布局中我会经常使用弹性盒子布局Flexbox，但它在 IE9 就不兼容了，因此在该模板上当用户使用IE 9及以下版本访问时会友好提示用户更换Chrome浏览器。

```html
<!--[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]-->
```

### 4、存在的问题

如果您引用的其他插件和less.min.js之间存在冲突，或者你引用的其他插件总是出现灵异事件（目前发现大多数问题都和less.min.js有关）

请先自行编译less文件，然后再逐步排查问题;

> npm install -g less

> lessc style.less style.css 


### 5、其他帮助

目前在开发中已知的问题和解决方案，是我个人整理的一些笔记;

[https://bemzhao.github.io/notes/](https://bemzhao.github.io/notes/)

### 6、写在最后

为避免与其他插件冲突，**完成项目后自行编译less文件，并屏蔽掉html中less.js的引用**;

在项目未上线之前，修改都应该在less文件中进行，然后再编译成css文件，重复这个操作，less文件的源代码可能会为以后的模块化处理起到作用

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

---

# 请务必保持代码风格的统一，祝您生活愉快 ^ ^;