# 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
...
...
...
...
``` Less; ```less .home{ &-header{} &-content{} &-section1{} &-section2{} &-section3{} ... &-footer{} } ``` ### 3、Internet Explorer 兼容处理 如果客户没有特别要求一定要兼容到 IE多少,在布局中我会经常使用弹性盒子布局Flexbox,但它在 IE9 就不兼容了,因此在该模板上当用户使用IE 9及以下版本访问时会友好提示用户更换Chrome浏览器。 ```html ``` ### 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 ``` --- # 请务必保持代码风格的统一,祝您生活愉快 ^ ^;