实例
<!doctype html>
<html>
<head>
<title>文档管理</title>
<meta charset="utf-8">
</head>
<body>
<div class="box1" style="line-height:normal;">
<ul class="box2">
<li class="box3" >
<a href="">文档设置</a>
</li>
<li>
<a href="">文档管理</a>
</li>
<li>
<a href="">文档博文管理</a>
</li>
<li>
<a href="">文档评论管理</a>
</li>
</ul>
</div>
<div class="box4">
<p>+新增文档</p>
</div>
<table border="1" align="center" bgcolor="Orange">
<tr>
<th>ID</th>
<th>文档名称</th>
<th>文档添加时间</th>
<th>文档排序</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>该如何学习PHP</td>
<td>2018-08-13 13:19:04</td>
<td>1st</td>
<td><a>删除</a>|<a>编辑</a>
</td>
</tr>
<tr>
<td>2</td>
<td>该如何学习html</td>
<td>2018-09-13 13:19:04</td>
<td>2st</td>
<td><a>删除</a>|<a>编辑</a>
</td>
</tr>
</table>
<style>
table{
margin-left: 500px;
}
.box4{
width:100px;
height:50px;
background: red;
margin-left:40px;
}
.box4 p{
text-align:center;
font-size:15px;
line-height: 50px;
color:darkgray;
}
.box1{
width:700px;
height:30px;
}
</style>
</body>
<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>
<style>
li{
float:left;
text-align:center;
list-style-type:none;
font-size:20px;
margin:4px;
}
a {
text-decoration-line: none;
color: green;
}
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;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html>
<head>
<title>分类管理</title>
<meta charset="utf-8">
</head>
<body>
<div class="box1" style="line-height:normal;">
<ul class="box2">
<li class="box3" >
<a href="">分类设置</a>
</li>
<li>
<a href="">分类栏目管理</a>
</li>
<li>
<a href="">分类博文管理</a>
</li>
</ul>
</div>
<div class="box4">
<p>+新增分类</p>
</div>
<table border="1" align="center" bgcolor="Orange">
<tr>
<th>ID</th>
<th>分类名称</th>
<th>分类添加时间</th>
<th>分类排序</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机分类</td>
<td>2018-08-13 13:19:04</td>
<td>1st</td>
<td><a>删除</a>|<a>编辑</a>
</td>
</tr>
<tr>
<td>2</td>
<td>电脑分类</td>
<td>2018-09-13 13:19:04</td>
<td>2st</td>
<td><a>删除</a>|<a>编辑</a>
</td>
</tr>
</table>
<style>
table{
margin-left: 500px;
}
.box4{
width:100px;
height:50px;
background: red;
margin-left:40px;
}
.box4 p{
text-align:center;
font-size:15px;
line-height: 50px;
color:darkgray;
}
.box1{
width:700px;
height:30px;
}
</style>
</body>
<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>
<style>
li{
float:left;
text-align:center;
list-style-type:none;
font-size:20px;
margin:4px;
}
a {
text-decoration-line: none;
color: green;
}
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;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html>
<head>
<title>产品管理</title>
<meta charset="utf-8">
</head>
<body>
<div class="box1" style="line-height:normal;">
<ul class="box2">
<li class="box3" >
<a href="">产品设置</a>
</li>
<li>
<a href="">产品栏目管理</a>
</li>
<li>
<a href="">产品博文管理</a>
</li>
<li>
<a href="">产品评论管理</a>
</li>
</ul>
</div>
<div class="box4">
<p>+新增产品</p>
</div>
<table border="1" align="center" bgcolor="Orange">
<tr>
<th>ID</th>
<th>分类名称</th>
<th>分类添加时间</th>
<th>分类排序</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机分类</td>
<td>2018-08-13 13:19:04</td>
<td>1st</td>
<td><a>删除</a>|<a>编辑</a>
</td>
</tr>
<tr>
<td>2</td>
<td>电脑分类</td>
<td>2018-09-13 13:19:04</td>
<td>2st</td>
<td><a>删除</a>|<a>编辑</a>
</td>
</tr>
</table>
<style>
table{
margin-left: 500px;
}
.box4{
width:100px;
height:50px;
background: red;
margin-left:40px;
}
.box4 p{
text-align:center;
font-size:15px;
line-height: 50px;
color:darkgray;
}
.box1{
width:700px;
height:30px;
}
</style>
</body>
<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>
<style>
li{
float:left;
text-align:center;
list-style-type:none;
font-size:20px;
margin:4px;
}
a {
text-decoration-line: none;
color: green;
}
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;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
