2024年Web前端最全前端LayUI框架快速上手详解(一)，干货分享

于 2024-05-05 00:59:25 发布
阅读量848 收藏 23
点赞数 19
分类专栏： 程序员 文章标签： 前端 layui 状态模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84411018/article/details/138454779
版权

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.3、圆角按钮

| 主题 | 组合 |

| — | — |

| 原始 | class="layui-btn layui-btn-radius layui-btn-primary"s |

| 默认 | class="layui-btn layui-btn-radius" |

| 百搭 | class="layui-btn layui-btn-radius layui-btn-normal" |

| 暖色 | class="layui-btn layui-btn-radius layui-btn-warm" |

| 警告 | class="layui-btn layui-btn-radius layui-btn-danger" |

| 禁用 | class="layui-btn layui-btn-radius layui-btn-disabled" |

默认圆角按钮 原始圆角按钮 百搭圆角按钮 暖色圆角按钮 警告圆角按钮 禁用圆角按钮

在这里插入图片描述

3.4、图标按钮

3.4.1、图标

3.4.2、图标按钮

添加 ဂ 刷新 关注

在这里插入图片描述

4、导航

======================================================================

  • 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在

  • 依赖加载模块：element

实现步骤：

  1. 引入的资源
  1. 依赖加载模块

4.1、水平导航

  • 给一个无序列表 ul 添加 class="layui-nav"

  • 给 li 添加 class="layui-nav-ithm" 表示的是导航的子项

  • 给 li 添加 class="layui-this" 表示当前被选中的项

  • 给 li 里面容器添加 class="layui-nav-child" 表示的是二级菜单

    • 最新活动
    • 产品
    • 大数据

    • 解决方案

      移动模块
      后台模块
      电商平台

      在这里插入图片描述

      4.2.1、图片与徽章

      除了一般的文字导航，我们还内置了图片和徽章的支持，如：

      • 控制台9

      • 个人中心

      • 我

        修改信息
        安全管理
        退出

        在这里插入图片描述

        4.2、导航主题

        通过对导航追加CSS背景类，让导航呈现不同的主题色

        • 给无序列表 ul 添加 class="layui-nav layui-bg-green" 可设置墨绿色背景的导航

        • 水平导航支持其他的背景主题有：layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)

        • 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青)

        • 最新活动
        • 产品
        • 大数据

        • 解决方案

          移动模块
          后台模块
          电商平台
          • 最新活动
          • 产品
          • 大数据

          • 解决方案

            移动模块
            后台模块
            电商平台
            • 最新活动
            • 产品
            • 大数据

            • 解决方案

              移动模块
              后台模块
              电商平台

              在这里插入图片描述

              4.3、垂直导航

              • 给无序列表 ul 添加 class="layui-nav layui-nav-tree"

              • 给 li 添加 class="layui-nav-item layui-nav-itemed" 表示此子项目是默认展开的

              • 默认展开

                选项1
                选项2
                跳转

              • 解决方案

                移动模块
                后台模版
                电商平台
              • 产品
              • 大数据

              • 在这里插入图片描述

                4.4、侧边导航

                • 给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side"

                • 设定layui-this来指向当前页面分类。

                在这里插入图片描述

                4.5、总结

                水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是

                水平导航：class="layui-nav"

                垂直导航需要追加：class="layui-nav-tree"

                侧边导航需要追加：class="layui-nav-tree layui-nav-side"

                4.6、面包屑导航

                • 给 span 标签 添加 layui-breadcrumb

                首页

                国际新闻

                亚太地区

                正文

                • 我们还可以通过设置属性 lay-separator="-" 来自定义分隔符

                首页

                国际新闻

                亚太地区

                正文

                首页

                国际新闻

                亚太地区

                正文

                娱乐

                八卦

                体育

                搞笑

                视频

                游戏

                综艺

                在这里插入图片描述

                5、选项卡

                =======================================================================

                • 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

                • 依赖加载模块：element

                实现步骤：

                1. 引入的资源
                1. 依赖加载模块

                5.1、选项卡风格

                • 默认风格给容器添加 ：class="layui-tab"

                • 简洁风格给容器追加：class="layui-tab-brief"

                • 卡片风格给容器需要追加：class=layui-tab-card

                • 网站设置
                • 用户管理
                • 权限分配
                • 商品管理
                • 订单管理
                • 内容1
                  内容2
                  内容3
                  内容4
                  内容5
                  • 网站设置
                  • 用户管理
                  • 权限分配
                  • 商品管理
                  • 订单管理
                  • 内容1
                    内容2
                    内容3
                    内容4
                    内容5
                    • 网站设置
                    • 用户管理
                    • 权限分配
                    • 商品管理
                    • 订单管理
                    • 内容1
                      内容2
                      内容3
                      内容4
                      内容5

                      在这里插入图片描述

                      默认风格：class="layui-tab"

                      简洁风格需要追加：class="layui-tab-brief"

                      卡片风格需要追加：class="layui-tab-card"

                      6、表格

                      ======================================================================

                      6.1、常规用法

                      1. 给 table 标签增加 class="layui-table"

                      2. 在colgroup 标签中定义表格列的宽度

                      • <col width="数值"> 表示相应列所占的宽度
                      1. thead 标签表示表格的头部区域

                      • tr 标签用于定义表格中的行(行头)

                      • th 标签用于定义表格中的表头(列头)

                      昵称 加入时间 签名 贤心 2016-11-29 人生就像是一场修行 许闲心 2016-11-28 于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

                      在这里插入图片描述

                      6.2、基础属性

                      静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：

                      | 属性名 | 属性值 | 备注 |

                      | — | — | — |

                      | lay-even | 无 | 用于开启隔行背景，可与其他属性一起使用 |

                      | lay-skin=“属性值” | line(行边框风格)

                      row(列边框风格)

                      nob(无边框风格) | 若使用默认风格不设置该属性即可 |

                      | lay-size=“属性值” | sm(小尺寸)

                      lg(大尺寸) | 若使用默认尺寸不设置该属性即可 |

                      将我们所需要的基础属性写在 table 标签上即可：如（一个带有隔行背景，且行边框风格的大尺寸表格）：

                      7、表单

                      ======================================================================

                      • 依赖加载模块：form

                      实现步骤：

                      1. 引入的资源
                      1. 依赖加载模块
                      1. 在一个容器中设定 class="layui-form" 来标识一个表单元素块
                      1. 基本的行区块结构，它提供了响应式的支持。

                      • 给 div 添加 class="layui-form-item" 代表”行“

                      • 给 label 添加 class="layui-form-label" 代表”区“

                      • 给 div 添加 class="layui-input-inline" 代表”块“

                      在这里插入图片描述

                      7.0、表单的常用属性

                      | 常用属性 | 描述 |

                      | — | — |

                      | required | 浏览器固定的必填字段 |

                      | lay-verify | 需要验证的类型(值为 required 的话表示必填项) |

                      | class="layui-input" | 提供的通用的样式 |

                      | class="layui-input-block" | 占据全部宽度 |

                      | class="layui-input-inline" | 占据部分宽度 |

                      | placeholder | 当文本框为空时，默认显示的文本信息 |

                      | autocomplete | 表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充) |

                      7.1、输入框

                      • required：注册浏览器所规定的必填字段

                      • lay-verify="required" ：注册 form 模块需要验证的类型

                      • class="layui-input"：layui.css 提供的通用 CSS 类

                      7.2、下拉选择框

                      • 通过 selected 属性设置默认选中项

                      • 通过 disabled 属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)

                      • 通过 optgroup 标签给 select 分组

                      • 通过设置 lay-search 属性开启搜索匹配功能

                      请选择一个城市 北京 上海 杭州

                      在这里插入图片描述

                      7.2.1、分组

                      • 可以通过 optgroup 标签给select分组

                      请选择 你工作的第一个城市？ 你的工号？ 你最喜欢的老师？

                      在这里插入图片描述

                      7.2.2、开启搜索匹配

                      • 通过设置 lay-search 属性开启搜索匹配功能

                      请选择 layer form layim

                      在这里插入图片描述

                      7.3、复选框

                      • 通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)

                      • 通过 checked 属性设置被选中的项

                      • 通过·lay-skin 属性设置复选框的样式效果(lay-skin="primary" 表示原始效果)

                      • 通过 disabled 属性禁用元素

                      总结

                      技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

                      开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

                      arch` 属性开启搜索匹配功能

                      请选择 layer form layim

                      在这里插入图片描述

                      7.3、复选框

                      • 通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)

                      • 通过 checked 属性设置被选中的项

                      • 通过·lay-skin 属性设置复选框的样式效果(lay-skin="primary" 表示原始效果)

                      • 通过 disabled 属性禁用元素

                      总结

                      技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

                      开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

                      [外链图片转存中…(img-7tzFAXAJ-1714841953088)]

                    评论
                    添加红包

                    请填写红包祝福语或标题

                    个

                    红包个数最小为10个

                    元

                    红包金额最低5元

                    当前余额3.43元 前往充值 >
                    需支付：10.00元
                    成就一亿技术人!
                    领取后你会自动成为博主和红包主的粉丝 规则
                    hope_wisdom
                    发出的红包
                    实付元
                    使用余额支付
                    点击重新获取
                    扫码支付
                    钱包余额 0

                    抵扣说明：

                    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
                    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

                    余额充值