简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html5新增语义及后台管理页面实现-20180820

html5新增语义及后台管理页面实现-20180820

NiceLiving的博客
NiceLiving的博客原创
2019年02月20日 15:56:30758浏览

  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>

    运行实例 »

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

上一条：变量的作用域+ 变量的类型与检测+分支结构的实例下一条：php变量作用域、变量类型及检测和分支结构的使用
html5新增语义、后台页面实现
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多