HTML5教程
前端首页html
本文主要是介绍前端首页html，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
前端首页html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Wmyskxz个人博客后台</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<!-- FontAwesome Styles-->
<!--<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>-->
<!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">-->
<link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet"/>
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet"/>
<!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<!-- TABLE STYLES-->
<link href="assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Wmyskxz</a>
</div>
</nav>
<!--/. NAV TOP -->
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<a class="active-menu" href="index.html"><i class="fa fa-bar-chart-o"></i> 数据统计</a>
</li>
<li>
<a href="category.html"><i class="fa fa-bars"></i> 分类管理</a>
</li>
<li>
<a href="article.html"><i class="fa fa-file-text-o"></i> 博文管理</a>
</li>
<li>
<a href="comment.html"><i class="fa fa-envelope"></i> 评论管理</a>
</li>
</ul>
</div>
</nav>
<!-- /. NAV SIDE -->
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
数据统计
<small>Summary of my blog</small>
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-color-green">
<div class="panel-body">
<i class="fa fa-bar-chart-o fa-5x"></i>
<h3 id="count-visits"></h3>
</div>
<div class="panel-footer back-footer-green">
Visits
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-color-blue">
<div class="panel-body">
<i class="fa fa-code fa-5x"></i>
<h3 id="count-logs"></h3>
</div>
<div class="panel-footer back-footer-blue">
Logs
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-primary text-center no-boder bg-color-red">
<div class="panel-body">
<i class="fa fa fa-comments fa-5x"></i>
<h3 id="count-comments"></h3>
</div>
<div class="panel-footer back-footer-red">
Comments
</div>
</div>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">浏览量统计</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-visits">
<thead>
<tr>
<th>ID</th>
<th>访问IP</th>
<th>访问时间</th>
</tr>
</thead>
<tbody id="tbody-visits">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /. END ROW -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">日志统计</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-logs">
<thead>
<tr>
<th>ID</th>
<th>访问IP</th>
<th>访问时间</th>
<th>操作内容</th>
<th>访问url</th>
<th>客户端信息</th>
</tr>
</thead>
<tbody id="tbody-logs">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /. END ROW -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">留言统计</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-comments">
<thead>
<tr>
<th>ID</th>
<th>留言内容</th>
<th>留言时间</th>
<th>用户名称</th>
<th>IP地址</th>
<th>是否有效</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody-comments">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /. END ROW -->
<footer>
<p>Copyright © 2018.Company name.Wmyskxz</p>
</footer>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert-danger">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">警告信息</h4>
</div>
<div class="modal-body">
请确认是否删除！
</div>
<div class="modal-footer">
<button type="button" id="confirmBtn" class="btn btn-danger" data-dismiss="modal" commentId="">确认
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- /. END MODAL -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
<!-- 引入自己写的JS -->
<script src="assets/js/pages/index.js"></script>
</body>
</html>```
这篇关于前端首页html的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Vite多环境配置资料：新手入门教程11-27
-
Vite多环境配置学习：新手入门教程11-24
-
实现OSS直传，前端怎么实现？-icode9专业技术文章分享11-23
-
在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案？-icode9专业技术文章分享11-22
-
html 自带属性有哪些？-icode9专业技术文章分享11-22
-
Sass教程：新手入门及初级技巧11-21
-
Sass学习：初学者必备的简单教程11-21
-
Elmentplus入门：新手必看指南11-21
-
Sass入门：初学者的简单教程11-21
-
前端页面设计教程：新手入门指南11-21
-
Elmentplus教程：初学者必备指南11-21
-
SASS教程：从入门到实践的简单指南11-21
-
前端页面设计项目实战：新手入门教程11-21
-
Elmentplus项目实战：从入门到简单应用11-21
-
Sass项目实战：新手入门教程11-21
栏目导航
