元素样式属性理解一

无插件样式
Checked 属性 - input标签中有它就说明已经被选中了(单选框&复选框)
Password 属性值 - input 标签中的type属性值是它就说明这是个密码输入框
Radio 属性值 – input 标签中的type属性值是它就说明这是个单选框
Selected 属性 – option 标签中有它就说明默认选中了(下拉框)
max-width:800px; css属性 – 可以翻译为最大宽度模态框太小可以通过它调整大小
οnkeydοwn=“shortcutKey()” : 属性加值 用于设定监听范围,值是方法名这里监听的是键盘事件
Layui插件
layui-form : 类 - 表单样式
layui-input:: 类 - 输入框
layui-form-mid : 类 - 文字上下居中
layui-word-aux:类 - 文字为灰色
render : 方法 – 表格初始化
reload : 方法 – 表格重载
templet: setOperate : 属性+值 – 自定义一列值是方法名
lay-filter=“BrowseTable” : 属性+值 –table事件监听需要的属性, 值最好设为当前元素ID
lay-data="{id: ‘BrowseTable’}" : 属性+值 –监听事件:获取到选中行需要用属性,值最好设为当前元素ID.
layui-tab : 类 - tab把元素改成选项卡 ul li 标签为选项 div放置内容
layui-tab-title : 类 - tab选项样式
layui-this : 类 – tab默认选中
layui-tab-content : 类 -tab选项内容样式
layui-tab-item : 类 – tab 一条内容
layui-show : 类 – tab显示内容
tab选项卡

Css代码在这里插入图片描述
页面效果
在这里插入图片描述
在这里插入图片描述
bootstrap-4插件
data-dismiss=“modal” : 属性+属性值 给元素关闭模态窗的功能
fade :类 – 模态框中的淡入动效
modal-dialog : 类 – 给模态框一个合适的宽度
modal- content : 类 - 模态框的内容都写在有此类的标签子集中
modal-header : 类 - 模态框的头部样式
data-toggle=“modal” 属性+属性值 翻译为:数据开关=modal
data-target="#Receipts"属性+属性值 打开一个id是Receipts的模态框
class=“modal-body” : 类 - 模态框的身体样式
大 modal


小 modal


Css代码需要用到bootstrap-4插件的css和js
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
text-secondary : 类 – 字体颜色灰色
justify-content-center :类 – row中类容左右居中
justify-content-start :类 - 内容左贴齐
justify-content-between:类 -两端对齐帖齐
justify-content- around:类 -间隔相等对齐帖齐
align-self-start : 类 内容上对齐
font-weight-bold : 类 文字粗体
font-weight-light : 类 文字细体
font-italic : 类 文字斜体
data-toggle=“collapse” : 属性和值 – 拥有展开收起对应元素的功能
data-target="#curtain" : 属性和值 – 确定对应元素 用ID绑定
若页面开始为显示状态需要点击直接隐藏 在内容元素中添加collapse show 两个类就可以了

折叠面板

我是内容
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190528152634493.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190528152639406.png)

猜你喜欢

转载自blog.csdn.net/weixin_44552168/article/details/90640280