zoukankan      html  css  js  c++  java
  • layui

    导航栏:

    1.layui-this:指向当前页面分类

    2.layui-nav、layui-nav-tree、layui-nav-side:水平、垂直、侧边展示

    3.layui-nav-item、layui-nav-itemed、layui-nav-child:节点、节点是否展开、子节点

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>开始使用Layui</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <link rel="stylesheet" href="/layui/css/layui.css">
    </head>
    <body>
        <!-- 导航 -->
    	<ul class="layui-nav" lay-filter="">
    		<li class="layui-nav-item"><a href="">最新活动</a></li>
    		<li class="layui-nav-item layui-this"><a href="">产品</a></li>
    		<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>
    		<li class="layui-nav-item"><a href="">社区</a></li>
    	</ul>
     
    	<ul class="layui-nav layui-nav-tree" lay-filter="test">
    		<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
    		<li class="layui-nav-item layui-nav-itemed"><a
    			href="javascript:;">默认展开</a>
    			<dl class="layui-nav-child">
    				<dd>
    					<a href="javascript:;">选项1</a>
    				</dd>
    				<dd>
    					<a href="javascript:;">选项2</a>
    				</dd>
    				<dd>
    					<a href="">跳转</a>
    				</dd>
    			</dl></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>
    		<li class="layui-nav-item"><a href="">产品</a></li>
    		<li class="layui-nav-item"><a href="">大数据</a></li>
    	</ul>
     
        <!-- 面包屑 -->
        <div class="layui-input-block">
    	<span class="layui-breadcrumb"> 
    	   <a href="">首页</a> 
    	   <a href="">国际新闻</a>
    	   <a href="">亚太地区</a> 
    	   <a><cite>正文</cite></a>
    	</span>
        </div>
        
        <div class="layui-input-block">
    	<span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a>
    		<a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a>
    	</span>
    	</div>
        
        <div class="layui-input-block">
    	<span class="layui-breadcrumb" lay-separator="|"> <a href="">娱乐</a>
    		<a href="">八卦</a> <a href="">体育</a> <a href="">搞笑</a> <a href="">视频</a>
    		<a href="">游戏</a> <a href="">综艺</a>
    	</span>
    	</div>
     
    	<script src="../../layui/layui.js"></script>
    <script> 
    //一般直接写在一个js文件中
    layui.use('element', function(){
      var element = layui.element();  
      
    });
    </script> 
    </body>
    

      

  • 相关阅读:
    INFORMATION_SCHEMA.COLUMNS表的字段信息
    如何取得一个数据表的所有列名
    CASE 函数
    Js定制窗口
    获取当前数据库中的所有用户表
    Js让状态栏不显示链接地址
    RA病人关节残障与软骨破坏而非骨破坏相关
    抗阿达木单抗的抗体可能与阿达木单抗治疗过程中静脉和动脉血栓事件相关
    长期应用阿达木单抗时所产生的抗抗体会影响疗效
    多普勒超声预测抗TNFα治疗类风湿关节炎患者的有效性:一项前瞻性队列研究
  • 原文地址:https://www.cnblogs.com/yongyuandishen/p/14152408.html
Copyright © 2011-2022 走看看