PureAdmin
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index Template</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./css/pure-nr-min.css">
<link rel="stylesheet" href="./css/fontAwesome/font-awesome.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/admin.css">
</head>
<body>
<!--BEGIN HEADER-->
<div class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed head-menu">
    <a href="#" class="pure-menu-heading"><h3>站点标题站点标题站点标题站点标题</h3></a>
    <ul>
        <li class="pure-menu-selected"><a href="#">主页</a></li>
        <li><a href="#">标签页</a></li>
        <li><a href="#">标签页</a></li>
        <li><a href="#">标签页</a></li>
        <li><a href="#">标签页</a></li>
    </ul>
    <div class="head-menu-info">
        欢迎您，管理员 <a href="#">admin</a>。您选择【首页】【退出】
    </div>
</div>
<!--END HEADER-->
<div class="pure-g content">
    <div class="pure-u">
        <div class="side">
            <div class="pure-menu pure-menu-open side-menu">
                <ul>
                    <li class="pure-menu-heading side-menu-head"><i class="icon-tags"></i> 核心组件</li>
                    <li class="pure-menu-selected"><a href="index.html">基本效果</a></li>
                    <li><a href="form.html">表单功能</a></li>
                    <li><a href="js.html">动态效果</a></li>
                    <li class="pure-menu-heading side-menu-head"><i class="icon-tags"></i> 独立页面</li>
                    <li><a href="error.html" target="_blank">错误页</a></li>
                    <li><a href="login.html" target="_blank">登录页</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pure-u-1">
        <div class="main">
            <div class="panel panel-default">
                <div class="panel-title">
                    面板标题
                </div>
                <div class="panel-body">
                    面板内容
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-title">
                    警告
                </div>
                <div class="panel-body">
                    <div class="alert alert-success">Well done! You successfully read <a href="#" class="alert-link">this important alert message</a>.</div>
                    <div class="alert alert-danger">Well done! You successfully read this important alert message.</div>
                    <div class="alert alert-warning">Well done! You successfully read this important alert message.</div>
                    <div class="alert alert-info">Well done! You successfully read this important alert message.</div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-title">
                    按钮
                </div>
                <div class="panel-body">
                    <div style="margin-bottom: 5px;"><button type="button" class="pure-button pure-u-1-4">确认</button></div>
                    <div style="margin-bottom: 5px;"><button type="button" class="pure-button pure-button-primary pure-u-1-4">确认</button></div>
                    <div style="margin-bottom: 5px;"><button type="button" class="pure-button pure-button-active pure-u-1-4">确认</button></div>
                    <div style="margin-bottom: 5px;"><button type="button" class="pure-button pure-button-disabled pure-u-1-4">确认</button></div>
                    <div style="margin-bottom: 5px;"><button type="button" class="pure-button pure-button-primary pure-u-1-4"><i class="icon-save"></i> 确认</button></div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-title">
                    标签
                </div>
                <div class="panel-body">
                    <span class="label label-default">default</span>
                    <span class="label label-primary">primary</span>
                    <span class="label label-success">成功</span>
                    <span class="label label-danger">危险操作</span>
                    <span class="label label-info">Info</span>
                    <span class="label label-warning">Warning</span>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-title">
                    面包屑导航
                </div>
                <div class="panel-body">
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Library</a></li>
                        <li class="active">Data</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
<!--BEGIN FOOT-->
<div class="pure-g copyright">
    <div class="pure-u-1"> 2013 © TWStudio Admin Dashboard Template. </div>
</div>
<!--END FOOT-->
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
});
</script>
</body>
</html>