layer的话先引入jq1.8以上版本，然后引入layer文件，就可以去官网找想要的样式复制用了，layer:open之类的。
layui加载他的css文件就好，手机号，邮箱，身份证验证什么都有，复制过去就能用。导航栏也还能看。
动态选项卡。
进度条这个好像很好玩。
<link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>动态改变进度</legend> </fieldset>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo"> <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div> </div> <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;"> <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button> <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button> </div>
<script> layui.use('element', function(){ var $ = layui.jquery ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块 //触发事件 var active = { setPercent: function(){ //设置50%进度 element.progress('demo', '50%') } ,loading: function(othis){ var DISABLED = 'layui-btn-disabled'; if(othis.hasClass(DISABLED)) return; //模拟loading var n = 0, timer = setInterval(function(){ n = n + Math.random()*10|0; if(n>100){ n = 100; clearInterval(timer); othis.removeClass(DISABLED); } layui.element().progress('demo', n+'%'); }, 300+Math.random()*1000); othis.addClass(DISABLED); } }; $('.site-demo-active').on('click', function(){ var othis = $(this), type = $(this).data('type'); active[type] ? active[type].call(this, othis) : ''; }); }); </script>
这个表格很好看，以后显示数据就用他了
