ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-08 05:12:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增卡片样式,导航样式,头部样式

Browse Source
This commit is contained in:
augushong
2021-04-21 23:08:56 +08:00
parent 490e9a6688
commit bffce779ed
8 changed files with 620 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
demo/nav.html
View File

@@ -76,7 +76,7 @@
<ul class="layui-nav layui-nav-tree ul-nav-easy" lay-filter="user-nav">
<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="">素材管理</a></li>
<li class="layui-nav-item"><a href="">评论管理</a></li>
<li class="layui-nav-item"><a href="">消息通知</a></li>
<li class="layui-nav-item"><a href="">数据分析</a></li>
@@ -86,3 +86,100 @@
</ul>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>最简单的导航</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-nav-min" style="width: 120px;">
<div class="ul-nav-min-item">
个人中心
</div>
<div class="ul-nav-min-item">
安全中心
</div>
<div class="ul-nav-min-item">
数据中心
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend>经典头部跳转导航</legend>
<div class="layui-field-box">
<div class="ul-padding-md">
<div class="ul-nav-header">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-nav-header ul-nav-header-red">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 60px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
<div class="ul-padding-md">
<div class="ul-nav-header ul-nav-header-primary">
<div class="ul-nav-header-main">
<div class="ul-nav-header-left">
<img style="height: 80px" src="{$site_logo_src}" alt="">
</div>
<div class="ul-nav-header-right">
<div class="ul-nav-header-item">
首页
</div>
<div class="ul-nav-header-item">
活动中心
</div>
<div class="ul-nav-header-item">
咨询
</div>
<div class="ul-nav-header-item">
帮助指南
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>