日志-2021-8-23 | RtZhao's Blog

CSS

选择器之间的空格和逗号

（1）当两个选择器之间有空格的情况下，代表的是子类选择器。代表的是a类的b子类

.a .b{}

（2）两个选择器之间没有空格的情况下，代表的是同时拥有两个类名的标签

1 2	<div class="a b"></div> .a.b{}

（3）当两个选择器之间是逗号的情况下，代表的是选择了两个类选择器

1
2
3

<div class="a"></div>
<div class="b"></div>
.a,.b{}

层级关系

对类layui-header的< ul >标签下的同时有layui-nav-item和layui-this的标签生效

1	.layui-header > ul > .layui-nav-item.layui-this{}

Layui

各页面元素、模块干啥怎么用要熟，layui在做后台管理还是很方便的

页面元素

布局（栅格）

layui-container

layui-row

layui-col-*

layui-show-*

layui-hide-*

layui-col-space*

layui-col-*-offset *

颜色

内置七种背景色

layui-bg-*

图标

layui图标全部采用字体形式，取材于alibaba矢量图标库

< i class=”layui-icon layui-icon-face-smile”>< /i >

动画

12款内置的

< div class=”layui-anim layui-anim-up layui-anim-loop” >< /div >

按钮

class=”layui-btn layui-btn-primary layui-border-blue layui-btn-lg layui-btn-danger layui-btn-radius”

表单

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
</form>

*class=”layui-inline”*：定义外层行内
*class=”layui-input-inline”*：定义内层行内

<ul class="layui-nav" lay-filter="">
  <li class="layui-nav-item">
      <a href="">最新活动</a>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">移动模块</a></dd>
      <dd><a href="">后台模版</a></dd>
      <dd><a href="">电商平台</a></dd>
    </dl>
  </li>
</ul>

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

水平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

面包屑

layui-breadcrumb

<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a><cite>正文</cite></a>
</span>

菜单

<div class="layui-panel">
  <ul class="layui-menu" id="docDemoMenu1">
    <li lay-options="{id: 100}">
      <div class="layui-menu-body-title">menu item 1</div>
    </li>
    <li lay-options="{id: 101}">
      <div class="layui-menu-body-title">
        <a href="#">menu item 2 <span class="layui-badge-dot"></span></a>
      </div>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
      <div class="layui-menu-body-title">
        menu item 3 group <i class="layui-icon layui-icon-up"></i>
      </div>
      <ul>
        <li lay-options="{id: 1031}">menu item 3-1</li>
        <li lay-options="{id: 1032}">
          <div class="layui-menu-body-title">menu item 3-2</div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-divider"></li>
    <li lay-options="{id: 104}">
      <div class="layui-menu-body-title">menu item 4</div>
    </li>
    <li class="layui-menu-item-parent" lay-options="{type: 'parent'}">
      <div class="layui-menu-body-title">
        menu item 5 
        <i class="layui-icon layui-icon-right"></i>
      </div>
      <div class="layui-panel layui-menu-body-panel">
        <ul>
          <li lay-options="{id: 1051}">
            <div class="layui-menu-body-title">menu item 5-1</div>
          </li>
          <li lay-options="{id: 1051}">
            <div class="layui-menu-body-title">menu item 5-2</div>
          </li>
        </ul>
      </div>
    </li>
    <li lay-options="{id: 106}">
      <div class="layui-menu-body-title">menu item 6</div>
    </li>
  </ul>
</div>

选项卡

<div class="layui-tab layui-tab-card">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
  </ul>
  <div class="layui-tab-content" style="height: 100px;">
    <div class="layui-tab-item layui-show">1</div>
    <div class="layui-tab-item">2</div>
    <div class="layui-tab-item">3</div>
  </div>
</div>

进度条

1
2
3

<div class="layui-progress layui-progress-big" lay-showPercent="yes">
  <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>

面板

常规面板

1
2
3

<div class="layui-panel">
    <div style="padding: 30px;">一个面板</div>
</div>

卡片面板

<div class="layui-card">
  <div class="layui-card-header">卡片面板</div>
  <div class="layui-card-body">
    卡片式面板面板通常用于非白色背景色的主体内<br>
    从而映衬出边框投影
  </div>
</div>

折叠面板

<div class="layui-collapse">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">杜甫</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">李清照</h2>
    <div class="layui-colla-content layui-show">内容区域</div>
  </div>
</div>

开启手风琴

1	<div class="layui-collapse" lay-accordion></div>

表格

1
2
3

<table lay-even lay-skin="line" lay-size="lg">
…
</table>

徽章

<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge">99</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge-rim">6</span>

时间线

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
</ul>

辅助

引用区块

1 2	<blockquote class="layui-elem-quote">引用区域的文字</blockquote> <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

字段集区块

<fieldset class="layui-elem-field">
  <legend>字段集区块 - 默认风格</legend>
  <div class="layui-field-box">
    内容区域
  </div>
</fieldset>
 
<fieldset class="layui-elem-field layui-field-title">
  <legend>字段集区块 - 横线风格</legend>
  <div class="layui-field-box">
    内容区域
  </div>
</fieldset>

横线

1 2	橙色分割线 <hr class="layui-border-orange">

内置模块

这部分在实际使用时才会暴露问题

弹出层
日期和时间选择器
分页
模板引擎
表单
文件上传
下拉菜单
穿梭框
树形组件
颜色选择器
常用元素操作
滑块
评分
轮播
流加载
工具组件
高亮代码显示

layui+jQuery

由于Layui部分内置模块依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只有你所使用的模块有依赖到它，它才会加载，并且如果你的页面已经script引入了jquery，它并不会重复加载。内置的jquery模块去除了全局的$和jQuery，是一个符合layui规范的标准模块。

//第一种：主动加载jquery模块
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重点处
  ,layer = layui.layer;
  
  //....
});
 
//第二种：如果内置的模块本身是依赖jquery，你无需去use jquery，所以上面的写法其实可以是：
layui.use('layer', function(){ 
  var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
  ,layer = layui.layer;
 
  //....
});

为什么表单、element模块不显示

当你使用表单时，layui 会对 select、checkbox、radio 等原始元素隐藏，从而进行美化修饰处理。但如果您的表单元素是动态添加的，那么在组件初始加载的时候是无法读取到的，这是你只需执行一个视图渲染的实例即可。

layui.use('form', function(){
  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
  
  //……
  
  //如果你的 HTML 是动态生成的，自动渲染就会失效
  //因此你需要在相应的地方，执行下述方法来进行渲染
  form.render();
});

报错整理

(1)解决方案

Refused to display xxx in a frame because it set X-Frame-Options to deny

Others

I18N （ internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。使产品或软件具有不同国际市场的普遍适应性，从而无需重新设计就可适应多种语言和文化习俗的过程

L10N （是“Localization” 的缩写）“ 本地化” 的意思，是将产品或软件针对特定国际语言和文化进行加工，使之符合特定区域市场的过程

G11N (是“Globalization” 的缩写) “全球化”使产品或软件进入全球市场而进行的有关的商务活动

WAI-ARIA （the Accessible Rich Internet Applications Suite）无障碍富互联网应用规范集