Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html5新增语义及后台管理页面实现-20180820
Blogger Information
Blog 17
fans 0
comment 0
visits 10038
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html5新增语义及后台管理页面实现-20180820
NiceLiving的博客
Original
760 people have browsed it

  1. html5新增语义

    html5新增语义.png


  2. 实例 文档管理实现代码

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>文档管理</title>
    <style type="text/css">
	table td{
		border: 1px solid black;
	}
	table{
		width: 650px;
		margin: auto;
		border-collapse: collapse; /* 折叠表格线*/
		text-align: center;
	}
    caption {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    td{
    	padding: 10px;
    }
    table tr:first-child{
    	background-color:cyan;
    	font-weight: bold;
    }
     a{
    	text-decoration-line: none;
    	color: green;
    }
     a:hover{
    	text-decoration: underline;
    	color:brown;
    }

   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 black;
   	margin-left: 2px;
   	line-height: 24px;
   }
   .active {
   	background-color: green;
   	color: #fff;
   }
   .more{
   	border: none;
   }
    </style>
</head>

<body>
    <table>
        <caption>文档管理</caption>
        <tr>
            <td>ID</td>
            <td>用户名</td>
            <td>标题</td>
            <td>内容</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>admin</td>
            <td>年后</td>
            <td>顶顶顶顶顶顶顶顶</td>
            <td><a href="">修改</a> | <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>admin</td>
            <td>年后</td>
            <td>顶顶顶顶顶顶顶顶</td>
            <td><a href="">修改</a> | <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>admin</td>
            <td>年后</td>
            <td>顶顶顶顶顶顶顶顶</td>
            <td><a href="">修改</a> | <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>admin</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>
    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  3. 实例 分类管理实现

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <style type="text/css">
	table td{
		border: 1px solid black;
	}
	table{
		width: 650px;
		margin: auto;
		border-collapse: collapse; /* 折叠表格线*/
		text-align: center;
	}
    caption {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    td{
    	padding: 10px;
    }
    table tr:first-child{
    	background-color:cyan;
    	font-weight: bold;
    }
     a{
    	text-decoration-line: none;
    	color: green;
    }
     a:hover{
    	text-decoration: underline;
    	color:brown;
    }

   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 black;
   	margin-left: 2px;
   	line-height: 24px;
   }
   .active {
   	background-color: green;
   	color: #fff;
   }
   .more{
   	border: none;
   }
    </style>
</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>顶顶顶顶顶顶顶顶</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>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

  4. 实例 产品管理实现

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
    <style type="text/css">
	table td{
		border: 1px solid black;
	}
	table{
		width: 650px;
		margin: auto;
		border-collapse: collapse; /* 折叠表格线*/
		text-align: center;
	}
    caption {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    td{
    	padding: 10px;
    }
    table tr:first-child{
    	background-color:cyan;
    	font-weight: bold;
    }
     a{
    	text-decoration-line: none;
    	color: green;
    }
     a:hover{
    	text-decoration: underline;
    	color:brown;
    }

   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 black;
   	margin-left: 2px;
   	line-height: 24px;
   }
   .active {
   	background-color: green;
   	color: #fff;
   }
   .more{
   	border: none;
   }
    </style>
</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>20</td>
            <td>书</td>
            <td><a href="">修改</a> | <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>电脑</td>
            <td>10</td>
            <td>数码</td>
            <td><a href="">修改</a> | <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>洗衣机</td>
            <td>5</td>
            <td>家电</td>
            <td><a href="">修改</a> | <a href="">删除</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>房子</td>
            <td>2</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>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post