aid-elements-cmcc
Version:
AI Design Elements
86 lines (85 loc) • 2.51 kB
HTML
<html class="hb-loaded">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../../dist/css/aid.min.css">
</head>
<style>
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-menu-assistant{
margin:0 auto;
width:400px;
}
</style>
<body class="bg-gray-lightest-5">
<nav class="navbar navbar-inverse bg-gray-darker p-0">
<div href="#" class="layout-logo"></div>
<ul class="menu menu--dark menu--horizontal menu--open layout-menu-assistant">
<li class="menu__item">
<i class="aid aid-home"></i>
内容管理
</li>
<li class="menu__item">
<i class="aid aid-account-multiple"></i>
用户管理
</li>
<li class="menu__item">
<i class="aid aid-chart-bar"></i>
统计分析
</li>
</ul>
</nav>
<ul class="menu menu--light menu--horizontal menu--open">
<div class="layout-menu-assistant">
<li class="menu__item menu__item--checked">
<i class="aid aid-home"></i>
二级导航
</li>
<li class="menu__item">
<i class="aid aid-account-multiple"></i>
二级导航
</li>
<li class="menu__item">
<i class="aid aid-chart-bar"></i>
二级导航
</li>
</div>
</ul>
<div class="container">
<nav class="breadcrumb">
<a class="breadcrumb__item" href="#">
<span>首页</span>
<span class="breadcrumb__separator">/</span>
</a>
<a class="breadcrumb__item" href="#">
<span>二级</span>
<span class="breadcrumb__separator">/</span>
</a>
<a class="breadcrumb__item" href="#">
<span>三级</span>
<span class="breadcrumb__separator">/</span>
</a>
<span class="breadcrumb__item active">
<span>当前页</span>
</span>
</nav>
<div class="bg-white p-3">
内容区域
</div>
<div class="p-3 text-center text-gray-light text-sm">
2011-2016 © AI design
</div>
</div>
</body>
</html>