Layui以及CKEditor的使用 Java Web基础 教学PPT课件.pptx

Layui以及CKEditor的使用 第11章 Java Web基础与实例教程 01. 上机操作 小露身手：快速上手layui 02. 上机操作 小露身手：layui中的页面元素 03. 略 layui的栅格布局 04. 上机操作 小露身手：layui中常用的容器 11.1 Layui的使用 Java Web基础与实例教程 11.1 Layui的使用 05. 上机操作 小露身手：layui中常用的内置JavaScript模块 06. 略 layui知识补充 07. 上机操作 小露身手：layui补充知识 Java Web基础与实例教程 11.1.1 小露身手：快速上手layui 上机操作 Java Web基础与实例教程 11.1.2 小露身手：layui中的页面元素 上机操作 Java Web基础与实例教程 11.1.3 layui的栅格布局 1.设置布局容器 布局容器是存放页面内容或者栅格系统的容器。layui提供了两种布局容器layui-container以及layui-fluid。 （1）layui-container：容器宽度固定，且支持响应式布局。 （2）layui-fluid：容器宽度不固定，占据100%的宽度。 Java Web基础与实例教程 11.1.3 layui的栅格布局 2.在布局容器中设置行 layui使用layui-row定义行，例如div class=layui-row/div Java Web基础与实例教程 11.1.3 layui的栅格布局 3.在行中设置列 layui使用类似“layui-col-md*”的格式定义列（列应该放置在行中）。 Java Web基础与实例教程 11.1.3 layui的栅格布局 4.为行中的每一列设置列间距 在布局容器中设置行时，可在行中追加layui-col-space*，为行中的所有列设置列与列之间的距离（单位为像素）。 Java Web基础与实例教程 11.1.3 layui的栅格布局 5.为当前列设置右偏移 在行中设置列时，可在当前列中追加layui-col-md-offset*，让当前列右偏移。 6.嵌套 在列中添加行，即可完成嵌套，理论上将，可以对栅格进行无穷层次的嵌套。 Java Web基础与实例教程 11.1.4 小露身手：layui中常用的容器 上机操作 Java Web基础与实例教程 11.1.5 小露身手：layui中常用的内置JavaScript模块 上机操作 Java Web基础与实例教程 11.1.6 layui知识补充 layui支持7种动画CSS样式，包括layui-anim-up（从最底部往上滑入）、layui-anim-upbit（微微往上滑入）、layui-anim-scale（平滑放大）、layui-anim-scaleSpring（弹簧式放大）、layui-anim-fadein（渐现）、layui-anim-fadeout（渐隐）、layui-anim-rotate（360度旋转） Java Web基础与实例教程 11.1.6 layui知识补充 例如向“你好”添加了“从最底部往上滑入”的动画。 div class=layui-anim layui-anim-up你好/div Java Web基础与实例教程 11.1.7 小露身手：layui补充知识 上机操作 Java Web基础与实例教程 01. 略 Classic经典模式编辑器的下载和安装 02. setStatus()和sendError()方法 小露身手：CKEditor的基本使用 11.2 CKEditor 5的使用 Java Web基础与实例教程 11.2.1 Classic经典模式编辑器的下载和安装 CKEditor的安装非常简单，将ZIP压缩文件解压后，产生ckeditor5-build-classic文件夹，其中核心文件是JavaScript文件ckeditor.js以及translations文件夹中JavaScript字体文件。 Java Web基础与实例教程 11.2.2 小露身手：CKEditor的基本使用 上机操作 Java Web基础与实例教程