layui页面元素的使用（1）

layui框架是一款非常好的框架结构，如下官网地址:https://www.layui.com/doc/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="layui-master/src/css/layui.css" />
        <script src="layui-master/src/layui.js"></script>
    </head>
        <body>
        <div class="layui-container">
               <div class="layui-row">
              <div class="layui-col-md9" style="background- 
                          color:chartreuse;height: 100%;">
                      你的内容 9/12
                </div>
               <div class="layui-col-md3" style="background- 
                         color:#0000FF;height: 30%;">
                你的内容 3/12
              </div>
          </div>
    </body>
</html>

 

学习使用layuI的时候

<link rel="stylesheet" href="layui-master/src/css/layui.css" />
        <script src="layui-master/src/layui.js"></script>

 

这两行必须导入

 <!--图标的使用方式-->
        <i class="layui-icon">&#xe60c;</i> 
        <i class="layui-icon layui-icon-mike">&#xe6dc;</i>
        <i class="layui-icon layui-icon-login-wechat"></i><br />

<!--
时间：2020-06-01
描述：layui动画的使用
-->
<div class="layui-anim layui-anim-up">测试</div><br />

 

<!--
            时间：2020-06-01
            描述：layui按钮的使用
        -->
        <input type="button" class="layui-btn layui-btn-primary" value="原始按钮" /><br />
        <input type="button" class="layui-btn" value="默认按钮" /><br />
        <input type="button" class="layui-btn layui-btn-normal" value="百搭按钮" /><br />
        <input type="button" class="layui-btn layui-btn-warm" value="暖色按钮" /><br />
        <input type="button" class="layui-btn layui-btn-danger" value="警告按钮" /><br />
        <input type="button" class="layui-btn layui-btn-disabled" value="禁用按钮" /><br />
        <div class="layui-anim-loop">
                                           展示按钮的大小尺寸<br />
          <input type="button" class="layui-btn layui-btn-normal layui-btn-lg" value="百搭按钮大型" /><br />
          <input type="button" class="layui-btn layui-btn-normal layui-btn-sm" value="百搭按钮小型" /><br />
          <input type="button" class="layui-btn layui-btn-normal layui-btn-xs" value="百搭按钮迷你型" /><br />
          <input type="button" class="layui-btn layui-btn-normal" value="百搭按钮正常型" /><br />
        </div>
        <br />

 

<!--
            时间：2020-06-01
            描述：图标按钮混合使用
        -->
        <!--使用按钮功能 layui-btn-hroup按钮的分组-->
        <div class="layui-btn-group">
           <button type="button" class="layui-btn">增加</button>
           <button type="button" class="layui-btn">编辑</button>
           <button type="button" class="layui-btn">删除</button>
        </div>
        <!--在默认按钮中加上图标-->
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe654;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe642;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe640;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe602;</i>
            </button>
        </div>
        <!--在原始按钮上加上图标-->
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
               <i class="layui-icon">&#xe654;</i>
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
               <i class="layui-icon">&#xe642;</i>
              </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
               <i class="layui-icon">&#xe640;</i>
              </button>
        </div><br /><br />
        <!--尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器-->
        <div class="layui-btn-container">
              <button type="button" class="layui-btn">按钮一</button> 
              <button type="button" class="layui-btn">按钮二</button> 
              <button type="button" class="layui-btn">按钮三</button> 
        </div>

 

 

posted @ 2021-01-20 13:39  薄眠抛却陈年事。  阅读(132)  评论(0)    收藏  举报