实现入门效果
GIF.gif
snipaste20170201_115552.png
目录结构
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>VilenBlog</title>
<link rel="stylesheet" href="css/mdui.css"/>
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink ">
<div class="mdui-appbar">
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
<a href="javascript:;" class="mdui-typo-title">Title</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons"></i></a>
</div>
<div class="mdui-tab mdui-color-theme" mdui-tab>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
<a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
</div>
</div>
<script src="js/mdui.js"></script>
</body>
</html>
说明
这个框架依赖很少,入门实例 css 加入 mdui.css javascript 加入 mdui.js 即可.
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink ">
这个是设置主题颜色的,更详细文档
