作者：明非

测试代码fromseleniumimportwebdriverbro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe")bro.get(url="https://bigdataboy.cn")设置代理IP导入配置模块fromseleniumimportwebdriverfromselenium.webdriverimportChromeOptionsoptions=ChromeOptions()#本地代理不需要用户密码的代理options.add_argument('--proxy-server='+'59.63.40.207:32231')bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe",options=options)bro.get(url="https://bigdataboy.cn")修改UAfromseleniumimportwebdriverfromfake_useragentimportUserAgentfromselenium.webdriverimportChromeOptionsoptions=ChromeOptions()#使用了一个模块options.add_argument('user-agent=%s'%UserAgent().random)bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe",options=options)bro.get(url="https://bigdataboy.cn")隐藏自动化测试有些网站会检查selenium，从而爬取不到任何东西检验参数：window.navigator.webdriver添加配置，隐藏自动化测试fromseleniumimportwebdriverfromselenium.webdriverimportChromeOptionsoptions=ChromeOptions()#添加一个配置options.add_experimental_option('excludeSwitches',['enable-automation'])bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe",options=options)bro.get(url="https://youhui.pinduoduo.com/")以上配置能组合使用，其他配置详见官网

数据绑定在页面Js里绑定变量/***页面的初始数据*/data:{id:"big",msg:"大数据男孩",dict:{name:"小蓝"}},普通写法<view>{{msg}}</view><view>{{dict.name}}</view>组件属性<viewid="{{id}}"></view>bool类型bool类型在属性里不能直接写，需要加{{}}才有用<view><checkboxchecked="{{false}}"></checkbox></view>运算页面Js文件绑定变量数组/***页面的初始数据*/data:{a:10,b:20,isChecked:true,c:"大数据",d:"男孩"},三元运算<view><checkboxchecked="{{isChecked?true:flase}}"></checkbox></view>算数运算<view>{{a+b}}</view>字符串组合<view>{{c+d}}</view>wx:for循环页面Js文件绑定变量数组/***页面的初始数据*/data:{arr:["1","2","3","4"]},wxml文件循环变量数组<!--默认遍历的元素是item索引是index--><!--wx:key是为了提高性能--><view><viewwx:for="{{arr}}"wx:key="index">{{index}}:{{item}}</view></view>改变默认的遍历元素&索引<view><blockwx:for="{{arr}}"wx:key="index"wx:for-item="color"wx:for-index="num">{{color}}{{num}}</block></view>wx:if条件渲染主要作用是隐藏&显示标签/***页面的初始数据*/data:{a:5},显示&隐藏<viewwx-if="{{true}}">大数据男孩</view><viewwx-if="{{false}}">你看不见我</view>条件判断<viewwx:if="{{a>5}}">6</view><viewwx:elif="{{a<5}}">4</view><viewwx:else>5</view>

相关网页所有的详细文档，请看官网微信小程序入门概述下载官方开发工具官方工具教程基础组件框架文件介绍├──pages││──index││├──index.wxml││├──index.js││├──index.json││└──index.wxss│└──logs│├──logs.wxml│└──logs.js├──utils│└──util.js├──app.js├──app.json├──app.wxss└──project.config.jsonpages文件夹pages文件夹里面存放所有页面每页文件都由四部分组成.wxml（标签布局）、.js（逻辑）、.json（配置）、.wxss（布局样式）utils文件夹存放公共逻辑（有默认代码）app.js全局的逻辑（有默认代码）app.json全局配置（json文件没有注释，所以不能注释）{页面路径"pages":["pages/index/index","pages/logs/logs"],首页配置"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"小程序-首页","navigationBarTextStyle":"black","enablePullDownRefresh":true}}导航栏在app.json里添加配置，list里的导航必须大于两个"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"icons/index_active.png","selectedIconPath":"icons/index.png"},{"pagePath":"pages/logs/logs","text":"首页","iconPath":"icons/index_active.png","selectedIconPath":"icons/index.png"}]}

说明selenium是一个自动化测试工具，而爬虫中使用它主要是为了解决requests无法执行javaScript代码的问题。优点通过驱动浏览器，完全模拟浏览器的操作，比如跳转、输入、点击、下拉等…进而拿到网页渲染之后的结果，可支持多种浏览器，真正做到可见及可爬。缺点使用selenium本质上是驱动浏览器对目标站点发送请求，那浏览器在访问目标站点的时候，需要把静态资源都加载完毕，比如html、css、js这些文件，加载完成后，等待浏览器执行，最后呈现在页面。所以用它的坏处就是效率极低！所以我们一般用它来做登录验证，Js特别复杂，没有必要去解密的场景等。使用下载驱动以谷歌浏览器为例驱动下载地址：http://chromedriver.storage.googleapis.com/index.html找到本机安装的谷歌浏览器，与之对应的版本。（虽然驱动是32位，但是支持64位浏览器的）基本使用打开大数据男孩网站fromseleniumimportwebdriver#驱动的路径bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe")#打开这个网址bro.get(url="https://bigdataboy.cn/")找到搜索按钮，并点击fromseleniumimportwebdriver#驱动的地址bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe")bro.get(url="https://bigdataboy.cn/")#找到搜索按钮search_tab=bro.find_element_by_xpath('//span[@class="icon-search"]')#点击搜索按钮search_tab.click()输入搜索内容在输入内容之前，需要判断内容是否加载完成，给出的判断方案是：定时去某个标签，如果该标签存在了，则认为页面加载完成。fromseleniumimportwebdriver#驱动的地址bro=webdriver.Chrome(executable_path="./chromedriver_win32/chromedriver.exe")bro.get(url="https://bigdataboy.cn/")#找到搜索按钮search_tab=bro.find_element_by_xpath('//span[@class="icon-search"]')#点击搜索按钮search_tab.click()fromselenium.webdriver.common.byimportByfromselenium.webdriver.supportimportexpected_conditionsasECfromselenium.webdriver.support.uiimportWebDriverWait"""判断搜索页面的记载情况1.默认0.5秒判断一次。Wait()里poll_frequency参数设置2.判断标签的方法有：ID、NAME、CLASS_NAME、XPATH、TAG_NAME、LINK_TEXT、PARTIAL_LINK_TEXT、CSS_SELECTOR"""#60秒没有检测到id为keyword的标签表示，加载失败WebDriverWait(bro,60).until(EC.presence_of_element_located((By.ID,"keyword")))#找到输入框input_tab=bro.find_element_by_xpath('//input[@id="keyword"]')#输入值input_tab.send_keys("大数据男孩")#关闭浏览器#bro.close()

留存率说明在互联网行业当中，因为拉新或推广的活动把用户引过来，用户开始访问网站/应用，但是经过一段时间可能就会有一部分客户逐渐流失了。留存率定义为用户在某段时间内开始使用网站/应用（一般定义是注册），经过一段时间后，仍然继续使用的人被认作是留存用户。留存率体现了网站/应用的质量和保留用户的能力。留存率计算方法：留存率=登录用户数/新增用户数*100%一般统计周期为天，常见的周期维度有次日、7日、14日/15日、30日、60日、90日）比如：次日留存率：（第一天新增用户数，第2天还登录的用户数）/第一天总注册用户数7日留存率：（第一天新增用户数，第8天还登录的用户数）/第一天总注册用户数30日留存率：（第一天新增用户数，第31天还登录的用户数）/第一天总注册用户Spark计算难点留存率涉及到两组数据的计算（新增人数&某天留存人数）计算思路思路分解数据例子：日期-用户ID2020-01-01,17731012020-01-01,17731022020-01-02,17731012020-01-02,17731032020-01-03,17731012020-01-03,1773102自定义累加器官方的提供的累加器里没有mutable.Map()的累加器优点：能够通过Key方便的取到Value。就是通过日期，方便的取到用户ID。//自定义Map累加器classmapAccumulatorextendsAccumulatorV2[Array[(String,Iterable[String])],mutable.Map[String,Iterable[String]]]{//累加器存数据MapvardateToUser:mutable.Map[String,Iterable[String]]=mutable.Map[String,Iterable[String]]()//判断累加器是否是初始化状态overridedefisZero:Boolean=dateToUser.isEmpty//复制累加器对象overridedefcopy():AccumulatorV2[Array[(String,Iterable[String])],mutable.Map[String,Iterable[String]]]={newmapAccumulator()}//重置累加器overridedefreset():Unit={dateToUser.clear()}//向累加器放数据overridedefadd(a:Array[(String,Iterable[String])]):Unit={valdate:String=a(0)._1valusers:Iterable[String]=a(0)._2dateToUser(date)=users}//把其他分区的累加器的数据合并overridedefmerge(other:AccumulatorV2[Array[(String,Iterable[String])],mutable.Map[String,Iterable[String]]]):Unit={other.value.foreach(line=>dateToUser(line._1)=line._2)}//返回累加器的结果overridedefvalue:mutable.Map[String,Iterable[String]]=dateToUser}注册累加器//注册累加器valuser_id_lists=newmapAccumulator()sc.register(user_id_lists)读取数据&分组valcsv_rdd=sc.textFile("文件")//相同日期分组valgroup_rdd=csv_rdd.groupByKey()存入累加器//按照分区遍历提高性能group_rdd.foreachPartition{partition=>partition.foreach{//日期为Key用户ID为Value，形成Map()添加到累加器line=>user_id_lists.add(Array(line._1->line._2.toSet))}}广播变量取出累加器里的数据进行广播变量//广播变量为累加器的值valuser_id_map:Broadcast[mutable.Map[String,Iterable[String]]]=sc.broadcast(user_id_lists.value)计算留存率再次遍历前面分组的RDD，通过日期取出广播变量里的用户IDvalres_rdd=group_rdd.mapPartitions{partition=>partition.map{line=>//获取当前日期的获取用户列表，没有获取到返回空的迭代valat_user_id:Iterable[String]=user_id_map.value.getOrElse(line._1,Iterable())//获取之前日期这个函数在文章后面valyesterday=getIntervalDay(line._1,-1)//获取之前日期的用户列表，没有获取到返回空的迭代valbefore_user_id:Iterable[String]=user_id_map.value.getOrElse(yesterday,Iterable())//获取之前日期总人数valbefore_all_user:Double=before_user_id.size.toDouble//留存人数：两日期用户列表去重取交集valkeep_user:Double=before_user_id.toSet.intersect(at_user_id.toSet).size.toDouble//留存率留存人数/前日期总人数varkeep_rate:Double=keep_user/before_all_userif(keep_rate.isNaN){keep_rate=0}//返回日期-留存率(line._1,keep_rate)}}计算间隔x天的日期//获取指定间隔日期defgetIntervalDay(date:String,num:Int):String={/*date：yyyy-MM-dd格式日期字符串num:间隔天数，有正负数之分。+(前面)-(后面)-1就是昨天，1就是明天*/vardateFormat:SimpleDateFormat=newSimpleDateFormat("yyyy-MM-dd")varcal:Calendar=Calendar.getInstance()cal.setTime(dateFormat.parse(date))cal.add(Calendar.DATE,num)varday=dateFormat.format(cal.getTime())day}

Zookeeper正常部署Zookeeper集群的正常部署并启动解压&配置环境变量[root@mastersrc]#tar-zxvfzookeeper-3.4.5.tar.gz[root@mastersrc]#pwd/usr/local/src#追加到环境变量[root@masterzookeeper]#vi~/.bash_profile#zookeeperexportZK_HOME=/usr/local/src/zookeeper-3.4.5exportPATH=$PATH:$ZK_HOME/bin:[root@mastersrc]#source~/.bash_profile修改zoo.cfg文件进入到ZooKeeper的conf/目录下#拷贝zoo_sample.cfg并重命名为zoo.cfg[root@masterconf]#cpzoo_sample.cfgzoo.cfg打开zoo.cfg文件#第一处修改这个路径需要自己创建好#examplesakes.dataDir=/usr/local/src/zookeeper-3.4.5/DataZk#在最后添加，指定myid集群主机及端口，机器数必须为奇数server.1=192.168.176.48:2888:3888server.2=192.168.176.49:2888:3888server.3=192.168.176.50:2888:3888修改myid添加Zookeeper用于识别当前机器的ID#进入创建的DataZk目录[root@masterDataZk]#echo1>myid[root@masterDataZk]#catmyid1#myid文件中为1，即表示当前机器为在zoo.cfg中指定的server.1分发配置[root@mastersrc]scp-r/usr/local/src/zookeeper-3.4.5/root@slave1:/usr/local/src/[root@mastersrc]scp-r/usr/local/src/zookeeper-3.4.5/root@slave2:/usr/local/src/修改其他机器的myid文件#在slave1上root@slave1src]#echo2>/usr/local/src/zookeeper/DataZk/myid#在slave2上root@slave2src]#echo3>/usr/local/src/zookeeper/DataZk/myid启动Zookeeper集群在Zookeeper的bin/目录下启动#分别在master、slave1、slave2执行./zkServer.shstart[root@masterbin]#./zkServer.shstartJMXenabledbydefaultUsingconfig:/usr/local/src/zookeeper/zookeeper-3.4.5/bin/../conf/zoo.cfgStartingzookeeper...STARTED查看状态只有其中一个是leader，其他的都是follower#master查看状态[root@masterbin]#./zkServer.shstatusJMXenabledbydefaultUsingconfig:/usr/local/src/zookeeper/zookeeper-3.4.5/bin/../conf/zoo.cfgMode:leader#slave1查看状态[root@slave1bin]#./zkServer.shstatusJMXenabledbydefaultUsingconfig:/usr/local/src/zookeeper/zookeeper-3.4.5/bin/../conf/zoo.cfgMode:follower#slave2查看状态[root@slave2bin]#zkServer.shstatusJMXenabledbydefaultUsingconfig:/usr/local/src/zookeeper/zookeeper-3.4.5/bin/../conf/zoo.cfgMode:followerHadoop正常部署Hadoop集群的正常部署并启动Hbase安装配置解压&配置环境[root@node1src]#tar-zxvfhbase-1.2.0-bin.tar.gz-C/usr/local/src[root@node1soft]#vim/etc/profile追加上#HbaseexportHBASE_HOME=/usr/local/src/hbase-1.2.0exportPATH=$PATH:$HBASE_HOME/bin:[root@node1hbase-1.2.0]#source/etc/profile修改配置文件hbase-env.sh修改#第一处#Thejavaimplementationtouse.Java1.7+required.exportJAVA_HOME=/usr/local/src/jdk1.8.0_221#第二处改为false，禁用HBase自带的Zookeeper。#TellHBasewhetheritshouldmanageit'sowninstanceofZookeeperornot.exportHBASE_MANAGES_ZK=falsehbase-site.xml修改<!--HBase数据存储的位置--><property><name>hbase.rootdir</name><value>hdfs://node1:9000/HBase</value></property><!--true开启集群模式--><property><name>hbase.cluster.distributed</name><value>true</value></property><!--0.98后的新变动，之前版本没有.port,默认端口为60000--><property><name>hbase.master.port</name><value>16000</value></property><!--zookeeper地址--><property><name>hbase.zookeeper.quorum</name><value>node1,node2,node3</value></property><!--ZooKeeper的zoo.conf中的配置。快照的存储位置--><property><name>hbase.zookeeper.property.dataDir</name><value>/usr/local/src/zookeeper-3.4.5/dataDir</value></property>regionservers修改指定运行regionservers进程的机器。修改conf/下的regionservers文件，删除原本的localhost,加上其他节点名称。node1node2node2软连接hadoop配置文件到HBase#hadoop的core-site.xml&hdfs-site.xml文件[root@node1conf]#ln-s/usr/local/src/hadoop-2.6.0/etc/hadoop/core-site.xml/usr/local/src/hbase-1.2.0/conf/core-site.xml[root@node1conf]#ln-s/usr/local/src/hadoop-2.6.0/etc/hadoop/hdfs-site.xml/usr/local/src/hbase-1.2.0/conf/hdfs-site.xml分发配置#分发配置[root@node1conf]#foriin{2..3};doscp-r/usr/local/src/hbase-1.2.0root@node${i}:/usr/local/src/;done#分发环境变量[root@node1conf]#foriin{2..3};doscproot@node${i}:/etc/profile;done#记得去其他机器source/etc/profile启动一步一步的启动#首先启动Master[root@node1conf]hbase-daemon.shstartmaster#然后每台机器启动regionserver[root@node1conf]hbase-daemon.shstartregionserver提示：如果集群之间的节点时间不同步，会导致regionserver无法启动，抛出方案一：同步时间服务//同步为北京时间[root@node1conf]yuminstallntpdate[root@node1conf]ntpdate-untp.api.bz[root@node1conf]ntpdatentp1.aliyun.com//查看时间[root@node1conf]date方案二：属性hbase.master.maxclockskew设置更大的值<property><name>hbase.master.maxclockskew</name><value>180000</value><description>Timedifferenceofregionserverfrommaster</description></property>一键启动&关闭#启动[root@node1conf]start-hbase.sh#关闭[root@node1conf]start-hbase.shstoppinghbase...............验证HbaseWEBUI界面：http://192.168.176.84:16010启动备用节点Hbase在设计之初就考虑到了高可用，所以能非常方便的使用只需要在任意一台机器再启动一个master，那这台机器就自动变成Hbase备用Master。#在node2启动一个master[root@node2conf]#hbase-daemon.shstartmaster

HBase定义HBase是一种分布式、可扩展、支持海量数据存储的NoSQL数据库。HBase数据模型逻辑上，HBase的数据模型同关系型数据库很类似，数据存储在一张表中，有行有列。但从HBase的底层物理存储结构（K-V）来看，HBase更像是一个multi-dimensionalmap。HBase逻辑结构HBase物理存储结构数据模型0x01NameSpace命名空间，类似于关系型数据库的DatabBase概念，每个命名空间下有多个表。HBase有两个自带的命名空间，分别是hbase和default，hbase中存放的是HBase内置的表，0x02Region类似于关系型数据库的表概念。不同的是，HBase定义表时只需要声明列族即可，不需要声明具体的列。这意味着，往HBase写入数据时，字段可以动态、按需指定。因此，和关0x03RowHBase表中的每行数据都由一个RowKey和多个Column（列）组成，数据是按照RowKey的字典顺序存储的，并且查询数据时只能根据RowKey进行检索，所以RowKey的设计十分重0x04ColumnHBase中的每个列都由ColumnFamily(列族)和ColumnQualifier（列限定符）进行限定，例如info：name，info：age。建表时，只需指明列族，而列限定符无需预先定义。0x05TimeStamp用于标识数据的不同版本（version），每条数据写入时，如果不指定时间戳，系统会0x06Cell由{rowkey,columnFamily：columnQualifier,timeStamp}唯一确定的单元。cell中的数据是没有类型的，全部是字节码形式存贮。HBase基本架构HBase内置Zookeeper，所以是自带高可用，但是实际操作，不会用内置的Zookeeper架构角色RegionServerRegionServer为Region的管理者其实现类为HRegionServer主要作用如下:对于数据的操作：get,put,delete；对于Region的操作：splitRegion、compactRegion。`MasterMaster是所有RegionServer的管理者其实现类为HMaster主要作用如下：对于表的操作：create,delete,alter对于RegionServer的操作：分配regions到每个RegionServer，监控每个RegionServer的状态，负载均衡和故障转移。ZookeeperHBase通过Zookeeper来做Master的高可用、RegionServer的监控、元数据的入口以及集群配置的维护等工作。HDFSHDFS为HBase提供最终的底层数据存储服务，同时为HBase提供高可用的支持。

说明这算是一个爬虫的小项目吧，后端代码架构有点凌乱，毕竟新手经验不足。Github地址：https://github.com/bigdataboy2020/Flask_douyin特点前端：LayUI后端：Flask开发语言：Python演示地址：https://douyin.bigdataboy.cn/解析完全本地完成部署教程0x00安装宝塔官方教程：https://www.bt.cn/bbs/thread-19376-1-1.html0x01上传源码解压其中有些文件下图没有，等后面步骤全部完成就有了。0x01配置Python项目使用宝塔的Python项目管理器，能非常方便的部署Python项目，推荐使用。0x02域名映射如果想要运行稳定一点，建议查看宝塔部署Flask项目

概述如你所愿，在layui2.0的版本中，我们加入了强劲的栅格系统和后台布局方案，这意味着你终于可以着手采用layui排版你的响应式网站和后台系统了。layui的栅格系统采用业界比较常见的12等分规则，内置移动设备、平板、桌面中等和大型屏幕的多终端适配处理，最低能支持到ie8。而你应当更欣喜的是，layui终于开放了它经典的后台布局方案，快速搭建一个属于你的后台系统将变得十分轻松自如。官网：https://www.layui.com/doc/element/layout.html使用样式<style>.grid-demo{line-height:50px;text-align:center;background-color:#79C48C;color:#fff;}.grid-demo-bg1{background-color:#00F7DE;}</style>布局容器layui-container类会随着屏幕大小改变成相应的宽度，响应式推荐使用响应式布局容器固定宽度：大屏（>=1200px）宽度为1170px中屏（>=992px）宽度为970px小屏（>=768px）宽度为750px超小屏（100%）<body><divclass="layui-container"style="background:#2aabd2">大数据男孩</div></body>layui-fluid类流式布局容器任何屏幕大小都是百分百宽度，适用于单独的移动端<body><divclass="layui-fluid"style="background:#2aabd2">大数据男孩</div></body>栅格系统栅格的响应式能力，得益于CSS3媒体查询（MediaQueries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。-超小屏幕(手机<768px)小屏幕(平板≥768px)中等屏幕(桌面≥992px)大型屏幕(桌面≥1200px).layui-container的值auto750px970px1170px标记xssmmdlg列对应类*为1-12的等分数值layui-col-xs*layui-col-sm*layui-col-md*layui-col-lg*响应行为始终按设定的比例水平排列在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列同前一个同前一个<!--中屏每个占4份3X4=12格--><style>.grid-demo{padding:10px;line-height:50px;text-align:center;background-color:#79C48C;color:#fff;}.grid-demo-bg1{background-color:#63BA79;}</style><divclass="layui-container"><divclass="layui-row"><divclass="layui-col-md4grid-demo">大数据男孩</div><divclass="layui-col-md4grid-demo-bg1">大数据男孩</div><divclass="layui-col-md4grid-demo">大数据男孩</div></div></div>列偏移对列追加类似layui-col-md-offset*的预设类，从而让列向右偏移。其中*号代表的是偏移占据的列数，可选中为1-12。如：layui-col-md-offset4，即代表在“中型桌面屏幕”下，让该列向右偏移4个列宽度<divclass="layui-container"><divclass="layui-row"><divclass="layui-col-md4grid-demo-bg1">大数据男孩</div><divclass="layui-col-md4layui-col-md-offset4grid-demo-bg1">大数据男孩</div></div></div>列间距通过“列间距”的预设类，来设定列之间的间距。且一行中·最左的列不会出现左边距，最右的列不会出现右边距。可以设置layui-col-space1~layui-col-space30。<divclass="layui-container"><!--间距10px--><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div></div></div>响应式公共类类名（class）说明layui-show-*-block定义不同设备下的display:block;*可选值有：xs、sm、md、lglayui-show-*-inline定义不同设备下的display:inline;*可选值同上layui-show-*-inline-block定义不同设备下的display:inline-block;*可选值同上layui-hide-*定义不同设备下的隐藏类，即：display:none;*可选值同上<divclass="layui-container"><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div><!--中屏下隐藏--><divclass="layui-col-md4layui-hide-md"><divclass="grid-demo">大数据男孩2</div></div><divclass="layui-col-md4"><divclass="grid-demo">大数据男孩</div></div></div></div>

概述导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。官网：https://www.layui.com/doc/element/nav.html使用导航主要类layui-nav：导航栏layui-nav-item：导航条目layui-nav-child：二级菜单layui-this：当前选择水平导航（默认）<!--导航栏--><ulclass="layui-nav"lay-filter=""><!--导航条目--><liclass="layui-nav-item"><ahref="">最新活动</a></li><liclass="layui-nav-itemlayui-this"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据</a></li><liclass="layui-nav-item"><ahref="javascript:;">解决方案</a><!--二级菜单--><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">社区</a></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){});</script>追加不同的CSS背景类可以呈现不同的颜色水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）//如定义一个墨绿背景色的导航<ulclass="layui-navlayui-bg-green"lay-filter="">…</ul>垂直导航&侧边导航垂直导航（不会布满整个左侧）只需在水平导航栏追加class：layui-nav-tree侧边导航（会布满整个左侧）需要追加class：layui-nav-tree、layui-nav-side<!--相比垂直追加layui-nav-tree类--><ulclass="layui-navlayui-nav-tree"lay-filter="test"><!--侧边导航:<ulclass="layui-navlayui-nav-treelayui-nav-side">--><liclass="layui-nav-itemlayui-nav-itemed"><ahref="javascript:;">默认展开</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">选项1</a></dd><dd><ahref="javascript:;">选项2</a></dd><dd><ahref="">跳转</a></dd></dl></li><liclass="layui-nav-item"><ahref="javascript:;">解决方案</a><dlclass="layui-nav-child"><dd><ahref="">移动模块</a></dd><dd><ahref="">后台模版</a></dd><dd><ahref="">电商平台</a></dd></dl></li><liclass="layui-nav-item"><ahref="">产品</a></li><liclass="layui-nav-item"><ahref="">大数据男孩</a></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use('element',function(){});</script>导航添加图片及徽章元素<ulclass="layui-nav"><liclass="layui-nav-item"><!--添加一个徽章--><ahref="">控制台<spanclass="layui-badge">9</span></a></li><liclass="layui-nav-item"><ahref="">个人中心<spanclass="layui-badge-dot"></span></a></li><liclass="layui-nav-item"><!--添加一个图片--><ahref=""><imgsrc="//t.cn/RCzsdCq"class="layui-nav-img">我</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">修改信息</a></dd><dd><ahref="javascript:;">安全管理</a></dd><dd><ahref="javascript:;">退了</a></dd></dl></li></ul><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use('element',function(){});</script>还有其他的导航栏请看官网

概述导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符，更多使用官网查看。官网：https://www.layui.com/doc/element/tab.html使用基础选项卡模板<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:30px;"><legend>默认风格的Tab</legend></fieldset><divclass="layui-tab"><!--选项卡标题--><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><!--选项卡内容--><divclass="layui-tab-content"><!--layui-show默认展示的选项卡--><divclass="layui-tab-itemlayui-show">1.高度默认自适应，也可以随意固宽。<br>2.Tab进行了响应式处理，所以无需担心数量多少。</div><divclass="layui-tab-item">大数据男孩2</div><divclass="layui-tab-item">大数据男孩3</div><divclass="layui-tab-item">大数据男孩4</div><divclass="layui-tab-item">大数据男孩5</div></div></div><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){})</script>三种风格默认风格：class="layui-tab"简洁风格：class="layui-tablayui-tab-brief"卡片风格：class="layui-tablayui-tab-card"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>默认风格</legend></fieldset><divclass="layui-tab"lay-filter="test"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-itemlayui-show">点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>简洁风格</legend></fieldset><divclass="layui-tablayui-tab-brief"lay-filter="docDemoTabBrief"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"style="height:100px;"><divclass="layui-tab-itemlayui-show">内容不一样是要有，因为你可以监听tab事件（阅读下文档就是了）</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>卡片风格</legend></fieldset><divclass="layui-tablayui-tab-card"><ulclass="layui-tab-title"><liclass="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><divclass="layui-tab-content"style="height:100px;"><divclass="layui-tab-itemlayui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div><divclass="layui-tab-item">大数据男孩</div></div></div><script>//注意：导航依赖element模块，否则无法进行功能性操作layui.use(['element'],function(){})</script>选项卡的相关动态操作（删除，添加…）请看官网

概述进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。官网：https://www.layui.com/doc/element/progress.html使用进度条的实现原理就是大Div包裹小Div主要使用的类：class="layui-progress"大Divclass="layui-progress-bar"小Div默认风格<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:20px;"><legend>默认风格的进度条</legend></fieldset><!--大Div没有定义宽度--><divclass="layui-progress"><divclass="layui-progress-bar"lay-percent="40%"></div></div><!--定义大Div的宽度--><divstyle="margin-top:15px;width:300px"><divclass="layui-progress"><divclass="layui-progress-bar"lay-percent="70%"></div></div></div><script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>不同颜色官方是提供了这几种颜色，可以自己定义颜色是定义在小Div里面<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>更多颜色选取</legend></fieldset><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-red"lay-percent="20%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-orange"lay-percent="30%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-green"lay-percent="40%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-blue"lay-percent="50%"></div></div><br><divclass="layui-progress"><divclass="layui-progress-barlayui-bg-cyan"lay-percent="60%"></div></div><script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>大尺寸进度条只用类：class="layui-progresslayui-progress-big"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin-top:50px;"><legend>大尺寸进度条</legend></fieldset><divclass="layui-progresslayui-progress-big"><divclass="layui-progress-bar"lay-percent="20%"></div></div>显示文本的进度条大Div需要加入值lay-showpercent="true"<fieldsetclass="layui-elem-fieldlayui-field-title"style="margin:50px030px;"><legend>显示进度比文本</legend></fieldset><divclass="layui-progress"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="20%"></div></div><br><divclass="layui-progress"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="5/10"></div></div><br><divclass="layui-progresslayui-progress-big"lay-showpercent="true"><divclass="layui-progress-bar"lay-percent="70%"></div></div><br>正如你上述看到的，除了百分数，还支持分数（layui2.1.7新增）<br>大进度条文字显示在进度条内，小进度条在外面<script>//注意进度条依赖element模块，否则无法进行正常渲染和功能性操作layui.use(['element'],function(){});</script>动态进度条请查看官网