实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理系统CMS</title>
<link rel="stylesheet" href="css/sytle.css">
<style type="text/css">
/*清除默认样式*/
* {
margin: 0;
padding: 0;
}
body, ul, li, article {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #c1c2c6;
text-decoration: none;
}
a:hover {
color: #fff;
}
/*顶部样式*/
header {
width: 100%;
height: 60px;
background-color: #1aa094;
border-bottom: 1px solid #666;
overflow: hidden;
}
header div {
width: 1200px;
min-height: 100%;
margin: 0 auto;
}
header div h1 {
font-size: 1.5rem;
color: #fff;
float: left;
line-height: 60px;
}
header nav {
float: right;
}
header nav ul li {
float: left;
margin-right: 20px;
line-height: 80px;
color: #fff;
}
header nav ul li img {
width: 40px;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
position: relative;
top: -5px;
}
/*主体样式*/
main {
width: 1000px;
min-height: 100%;
margin: 0 auto;
padding-left: 200px;
vertical-align: middle;
}
main article {
float: left;
width: 100%;
min-height: 100%;
}
main aside {
float: left;
width: 200px;
min-height: 800px;
margin-left: -100%;
position: relative;
left: -200px;
background-color: #393d49;
}
main aside nav {
}
main aside nav ul li {
padding: 10px 0;
padding-left: 50px;
border-bottom: 1px solid #666;
font-size: 14px;
}
/*底部样式*/
footer {
background-color: #1aa094;
height: 40px;
clear: both;
border-top: 1px solid #666;
text-align: center;
}
footer p {
line-height: 40px;
display: inline;
color: #fff;
}
iframe {
min-width: 100%;
min-height: 800px;
border: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<header role="header">
<div>
<h1>后台管理系统CMS</h1>
<nav>
<ul>
<li><img src="images/user_avatar.jpg" alt="">超级管理员：admin</li>
<li><a href="">个人设置</a></li>
<li><a href="">注销登录</a></li>
</ul>
</nav>
</div>
</header>
<main role="main">
<article role="content">
<iframe src="welcome.html" name="main"></iframe>
</article>
<aside role="menu">
<nav>
<ul>
<li><a href="welcome.html" target="main">后台首页</a></li>
<li><a href="classify.html" target="main">分类管理</a></li>
<li><a href="" target="main">产品管理</a></li>
<li><a href="" target="main">栏目管理</a></li>
<li><a href="" target="main">内容管理</a></li>
<li><a href="" target="main">会员管理</a></li>
<li><a href="" target="main">数据库管理</a></li>
<li><a href="permission.html" target="main">权限管理</a></li>
<li><a href="setting.html" target="main">系统设置</a></li>
</ul>
</nav>
</aside>
</main>
<footer role="footer">
<p>版权属php.cn©</p>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
分类页面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
</head>
<body>
<table>
<caption>产品分类管理</caption>
<tr>
<td>编号</td>
<td>名称</td>
<td>添加时间</td>
<td>排序</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>日用百货</td>
<td>2018-8-22</td>
<td>1</td>
<td><a href="">编辑</a><a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>美妆产品</td>
<td>2018-8-22</td>
<td>2</td>
<td><a href="">编辑</a><a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>汽车产品</td>
<td>2018-8-22</td>
<td>3</td>
<td><a href="">编辑</a><a href="">删除</a></td>
</tr>
<tr>
<td colspan="5" style="text-align: center">
<a href="#">首页</a>
<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a>...</a>
<a href="#">尾页</a>
</td>
</tr>
</table>
</body>
</html>
<style type="text/css">
caption {
font-size: 1.5rem;
margin: 20px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin: auto;
color: #666;
text-align: center;
}
table tr td {
border: 1px solid #666;
padding: 10px 0;
}
table tr:hover {
background-color: #1aa094;
color: #fff!important;
}
table tr:first-child {
background-color: #1aa094;
color: #fff!important;
}
table tr td a {
color: #fff;
font-size: 14px;
background-color: #FF5722;
padding: 3px 7px;
margin: 0 5px;
text-decoration: none;
border-radius: 5px;
}
table tr td a:first-child {
color: #fff;
font-size: 14px;
background-color: #ffb800;
padding: 3px 7px;
margin: 0 5px;
}
table tr:last-child {
background: none;
}
table tr:last-child td {
border: none;
}
table tr:last-child td a {
display: inline-block;
padding: 5px 10px;
margin: 10px 5px;
background-color: #1aa094;
color: #fff!important;
border-radius: 3px;
}
table tr:last-child td a:hover {
text-decoration: underline;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
系统设置
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>系统设置</title>
<style type="text/css">
table {
margin: 20px 0 0 40px;
padding: 0;
text-align: center;
}
table tr{
border: none;
border-collapse: separate;
}
table tr td {
padding: 10px;
}
table tr:nth-child(1) {
width: 500px;
height: 30px;
text-align: left;
}
input {
border: none;
}
table tr:nth-child(1) input {
width: 400px;
height: 30px;
border-radius: 5px;
border: 1px solid #666;
}
table tr:nth-child(2) {
width: 500px;
height: 30px;
text-align: left;
}
table tr:nth-child(2) input {
width: 400px;
height: 30px;
border-radius: 5px;
border: 1px solid #666;
}
table tr:last-child input {
padding: 10px 30px;
margin-left: 30px;
text-align: center;
border-radius: 3px;
border: 1px solid #1aa094;
}
table tr:last-child input:hover {
background-color: #1aa094;
color: #fff;
cursor: pointer;
border: 1px solid #666;
}
</style>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td><label for="title">网站标题：</label></td>
<td><input type="text" name="title" id="title" placeholder="标题不超过20个字" required></td>
</tr>
<tr>
<td><label for="keyword">关键字：</label></td>
<td><input type="text" name="keyword" id="keyword" placeholder="标题不超过50个字" required></td>
</tr>
<tr>
<td>网站描述</td>
</tr>
<tr>
<td>备案号</td>
</tr>
<tr>
<td>邮箱</td>
</tr>
<tr>
<td>联系人</td>
</tr>
<tr>
<td>电话</td>
</tr>
<tr>
<td>公司地址</td>
</tr>
<tr>
<td>邮编</td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="提交"><input type="reset" name="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1、利用HTML5制的一个管理后台。HTML5将以前用的DIV标签等头部，主体，底部给用HTML5标签给语义化了。这样写的HTML文档更好的能够让搜索引擎抓取。
2、HTML5语义化的标签有：
header头部 main主体 article内容 aside边栏 footer底部 nav导航 setion内容
3、语义化的标签都是块级元素，如果在遇到浏览器没有不支持html5的时候，可以定义成html这些标签成块级元素就行了。
