LayUI学习

---

前言

LayUI课堂笔记

一、LayUI是什么？

LayUI可以帮助我们不用关注过多的css、只需要关心如何页面布局。

二、LayUI基础知识

2.1 安装LayUI依赖

可以直接百度搜索LayUI进入官方首页、点击下载即可。下载完毕后直接将解压后 的文件夹拖进idea或者其他工具中，运行test.html可以检查依赖是否安装成功。

2.2 LayUI布局栅格系统

所谓栅格系统就是可以把屏幕分为12个小格子

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4" style="background: #00f7de;height:50px">    
        </div>
        <div class="layui-col-md8" style="background: red;height:50px">   
        </div>
    </div>
</div>

列边距、列偏移、列嵌套（列可以无限嵌套列）

2.3 按钮

基本按钮、设置不同颜色、大小、圆角颜色、给按钮添加图标效果

2.4 导航

使用导航时要先引入element模块
水平导航栏——垂直导航栏——侧边导航栏 二级导航layui-nav-child

• layui-nav
• layui-nav-tree
• layui-nav-side
• layui-bg
• layui-this 表示当前位置被选中

2.5 选项卡

所谓选项卡就是浏览器上打开的一个个窗口
如果默认选中选项卡的话就是layui-this，如果要选项卡的内容让我们可见的话就是layui-show
卡片风格可选的是卡片风格、可以删除的风格

• layui-tab 大的盒子
• layui-tab-title 选项卡标题
• layui-tab-content 选项卡下面的内容

2.6 表格

可以设置隔行换色（静态表格）后续会介绍从后台获得动态的表格

• layui-table
• lay-even 隔行换色
• 表格边框风格
• 表格的尺寸

2.7 表单

required表示这个文本框为必填字段

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。