您的位置:首页 > 新闻文摘 > 【 返回上一页

layui使用教程 html引入layui教程-layui下载

layui教程,网站、前端开发、程序开发中layui应用引入教程,layui提供大量的前端美化元素模块、表格排版、表单美化、网页特效等资源,如何应用引入使用到我的项目中?

layui教程
layui使用教程

以上UI代码基于是layui框架,所以需要引入layui文件库,下载layui文件库后,将库文件夹“layui”整个放入项目文件夹内,html网页中引入CSS文件和js文件即可,因为代码class或id均以layui命名开头,所以不会与你现有CSSHTML代码造成冲突,操作步骤如下。

一、下载layui(基于2.0最新版本)

layui下载地址:

二、解压并将库拷贝项目中

将下载库文件内整个“layui”文件夹解压到您项目里(或先解压下载文件,再将解压后layui文件夹内“layui”文件整个拷贝或剪切到项目或网站根目录)。

放网站根目录
放网站根目录

拷贝前端开发项目 目录中
拷贝前端开发项目 目录中

项目中layui文件内文件
得到 项目中layui文件内文件

3、html引入CSS和JS

项目或网站拷贝layui库文件外,需要使用漂亮网页布局、美化的元素表单、强大功能特效等需求还需要对应HTML中引入一个CSS文件和一个JS文件即可。

head标签内link引入CSS文件:

<link rel="stylesheet" href="layui/css/layui.css">

是特效需要JS的插件,在HTML</body>前引入一个JS文件

<script src="layui/layui.js"></script>
<script>
//有layui网页特效的JS代码 输入区</script>

以上JS文件和CSS文件引入,文件路径注意正确。

特别特别注意:JS文件引入与JS自定义代码是有先后的。自定义写的JS代码,要放在HTML引入layui.js文件后面,避免JS特效不能生效。

css和JS引入HTML
css和JS引入HTML截图

四、拷贝需要html代码、JS代码完成使用

使用截图
网页布局的代码 应用截图

需要layui的基本布局、控件、特效地方直接拷贝对应HTML代码和JS代码(有格外JS代码 就需要拷贝 一般特效、特殊功能布局有JS代码)。

四、配置说明

项目 操作 备注
框架 layui

立即下载layui(实时更新

引入CSS 代码 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 代码 <script src="layui/layui.js"></script>
资源 thinkcss拷用 www.thinkcss.com/kaoyong/

layui经典的模块化前端框架,由职业前端倾情打造,面向所有层次的前后端程序猿,零门槛开箱即用的前端UI解决方案

相关标签: layui
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/article/1401.shtml

日期:2017-08-23 17:54 css学习与资料网 thinkcss原创