主页实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站后台模板</title>
<link rel="stylesheet" href="./static/css/style.css">
</head>
<body>
<!-- 后台管理页面的DOM结构-->
<!-- 头部 -->
<header role="header">
<!-- 加div防止内部padding撑开父级容器-->
<div>
<h1>后台管理系统</h1>
<nav role="user">
<ul>
<li>欢迎管理员：<strong>admin</strong></li>
<li> <a href="">修改密码</a></li>
<li><a href="javascript:void(0);" onclick="logout()">退出登录</a></li>
</ul>
</nav>
</div>
</header>
<!--圣杯布局-->
<main role="main">
<article role="content">
<iframe src="welcome.html" name="main"></iframe>
<footer role="copyright">
<p><a href="http://php.cn">php.cn</a>©版权所有</p>
</footer>
</article>
<!-- 左侧导航栏-->
<aside role="menu">
<nav role="option">
<ul>
<li> <a href="setting.html" target="main">系统设置</a>
</li>
<li> <a href="user.html" target="main">用户管理</a>
</li>
<li><a href="article.html" target="main">文档管理</a>
</li>
<li> <a href="category.html" target="main">分类管理</a>
</li>
<li> <a href="product.html" target="main">产品管理</a>
</li>
</ul>
</nav>
</aside>
</main>
</body>
</html>
<script>
function logout(){
if (window.confirm('是否退出?')){
window.location.href='login.html';
} else{
return false;
}
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
登陆实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<form action="" method="post">
<table>
<caption>用户登录</caption>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="email" id="email" placeholder="example@mail.com" ></td>
</tr> <tr>
<td><label for="password">密码:</label></td>
<td><input type="password" id="password" placeholder="******" required></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" name="submit" onclick="alert('提交成功'); location.href='index.html'">
</td>
</tr>
</table>
</form>
</body>
<style>
bordy{
background-color: #efefef;
}
table,td{
border: none;
padding: 15px;
}
table{
width: 400px;
margin: auto;
background-color: lightgray;
border-radius: 8px;
box-shadow: 3px 3px 3px #888;
}
table td:first-child{
text-align: right;
}
input[type]{
width: 150px;
height: 30px;
border: 1px solid black;
border-radius: 5px;
padding-left: 15px;
}
caption{
font-size: 1.5rem;
margin-top: 40px;
margin-bottom: 20px;
}
table tr:last-child td:last-child{
text-align: center;
}
input[type="submit"]{
width: 100px;
height: 36px;
border-radius: 8px;
background-color: #fff;
border: 2px solid black;
}
input[type="submit"]:hover{
background-color:black;
color: white;
cursor: pointer;
}
</style>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
用户实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户管理</title>
</head>
<style>
* {
text-decoration: none;
}
table {
width: 700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table tr td:last-child {
color: #919191;
}
caption {
font-size: 1.5rem;
/*1rem=10px*/
font-weight: bolder;
color: #666;
margin-bottom: 20px
}
table tr{
height: 50px;
margin: 10px 0 10px 0;
}
table th,td {
border: 1px solid #666;
}
th{
color: #5b6f6b;
}
table tr:first-child {
background-color: #c6e0d6;
height: 45px;
}
table tr:hover {
background-color: #dce6e4;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 5px 10px;
font-size: 15px;
cursor: pointer;
transition: box-shadow, background-color 0.4s, 0.2s;
}
button:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
button:active {
background-color: #dd966a;
}
a{
text-decoration-line: none;
color: #47908d;
}
a:hover{
text-decoration-line: underline;
color: #e59149;
}
p{
text-align: center;
}
p a:first-child{
width: 56px;
}
p a:last-child{
width: 56px;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid #93bc93;
margin-left: 2px;
line-height: 24px;
}
.active{
background-color: #47908d;
color: white;
}
.more{
border: none;
}
</style>
<body>
<table>
<caption>用户管理</caption>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>角色</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>admin </td>
<td>admin@php.cn</td>
<td>
超级管理员
</td>
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>peter</td>
<td>peter@php.cn</td>
<td>
会员
</td>
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>zhu</td>
<td>zhu@php.cn</td>
<td>
会员
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>猪哥</td>
<td>zhuge@php.cn</td>
<td>会员
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
</table>
<p>
<a href="" class="active">首页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
文档实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档管理</title>
</head>
<body>
<table>
<caption>文档管理</caption>
<tr>
<td>ID</td>
<td>标题图片</td>
<td>文档标题</td>
<td>所属分类</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td><img src="./static/images/1.jpg" alt="" width="50"></td>
<td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td><img src="./static/images/2.jpg" alt="" width="50"></td>
<td><a href="">华为P20手机将全面采用自主研发的麒麟系统xin片</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td><img src="./static/images/3.jpg" alt="" width="50"></td>
<td><a href="">小米9手机预计在明年8月正式上市</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td><img src="./static/images/4.jpg" alt="" width="50"></td>
<td><a href="">OPPO手机勇夺印度市销售冠军</a></td>
<td>手机</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<!--分页-->
<p>
<a href="">首页</a>
<a href="" class="active">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 780px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td {
padding: 10px;
}
a {
text-decoration-line: none;
color: green;
}
a:hover {
color: brown;
text-decoration-line: underline;
}
tr:first-child {
margin-top: 20px;
background-color: lightblue;
}
table caption {
font-size: 1.5rem;
font-weight: bolder;
margin-bottom: 20px;
}
p {
text-align: center;
}
/*首页样式*/
p a:first-child {
width: 56px;
}
p a:last-child {
width: 56px;
}
p a {
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid green;
margin-left:2px;
line-height: 24px;
}
/*当前页样式*/
.active {
background-color: green;
color: white;
}
.more {
border: none;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
分类实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类管理</title>
</head>
<body>
<table>
<caption>分类管理</caption>
<tr>
<td>ID</td>
<td>分类名称</td>
<td>层级</td>
<td>是否启用</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>笔记本电脑</td>
<td>顶级</td>
<td class="disable">禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>打印机</td>
<td>顶级</td>
<td>启用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>显示器</td>
<td>顶级</td>
<td>禁用</td>
<td><a href="">编辑</a> | <a href="">删除</a></td>
</tr>
</table>
<!--分页-->
<p>
<a href="">首页</a>
<a href="" class="active">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 650px;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td {
padding: 10px;
}
a {
text-decoration-line: none;
color: green;
}
a:hover {
color: brown;
text-decoration-line: underline;
}
tr:first-child {
margin-top: 20px;
background-color: lightblue;
}
table caption {
font-size: 1.5rem;
font-weight: bolder;
margin-bottom: 20px;
}
p {
text-align: center;
}
/*首页样式*/
p a:first-child {
width: 56px;
}
p a:last-child {
width: 56px;
}
p a {
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid green;
margin-left:2px;
line-height: 24px;
}
/*当前页样式*/
.active {
background-color: green;
color: white;
}
.more {
border: none;
}
.disable {
color: red;
}
</style>运行实例 »
点击 "运行实例" 按钮查看在线实例
产品实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product</title>
</head>
<style>
* {
text-decoration: none;
}
table {
width: 700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table tr td:last-child {
color: #919191;
}
caption {
font-size: 1.5rem;
/*1rem=10px*/
font-weight: bolder;
color: #666;
margin-bottom: 20px
}
th {
padding: 10px 0 10px 0;
}
table,
th,
td {
border: 1px solid #666;
}
table tr:first-child {
background-color: #b2edd6;
}
table tr:hover {
background-color: #dce6e4;
}
img {
border-radius: 20%;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
transition: box-shadow, background-color 0.4s, 0.3s;
}
button:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
button:active {
background-color: #dd966a;
}
a{
text-decoration-line: none;
color: #47908d;
}
a:hover{
text-decoration-line: underline;
color: #e59149;
}
p{
text-align: center;
}
p a:first-child{
width: 56px;
}
p a:last-child{
width: 56px;
}
p a{
display: inline-block;
width: 28px;
height: 24px;
border: 1px solid #93bc93;
margin-left: 2px;
line-height: 24px;
}
.active{
background-color: #47908d;
color: white;
}
.more{
border: none;
}
</style>
<body>
<table>
<caption>手机产品</caption>
<tr>
<th>ID</th>
<th>品 牌</th>
<th>型 号</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>苹 果</td>
<td>iphone x</td>
<td> <img src="//g-search1.alicdn.com/img/bao/uploaded/i4/TB1nYk_aGLN8KJjSZFGXXbjrVXa.jpg_180x180.jpg_.webp" width="100px" ;> </td>
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>华为</td>
<td>荣耀10</td>
<td><img src="https://img.alicdn.com/imgextra/i4/2215302589/TB2erJca6bguuRkHFrdXXb.LFXa_!!2215302589.jpg_430x430q90.jpg" width="100px"></td>
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>华为</td>
<td>nova3</td>
<td><img src="https://img.alicdn.com/imgextra/i1/2838892713/TB2akPHlOQnBKNjSZFmXXcApVXa_!!2838892713.jpg_430x430q90.jpg" width="100px">
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
<tr>
<td>4</td>
<td>小米</td>
<td>小米8</td>
<td><img src="//g-search3.alicdn.com/img/bao/uploaded/i4/TB1319dicj_B1NjSZFHXXaDWpXa.jpg_180x180.jpg_.webp" width="100px">
<td>
<button>编辑</button> |
<button>删除</button>
</td>
</tr>
</table>
<p>
<a href="" class="active">首页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="" class="more">...</a>
<a href="">尾页</a>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
