search

博客列表 >html语义化布局标签、后台模板布局-2018年8月20日

html语义化布局标签、后台模板布局-2018年8月20日

马聪 15558002279的博客
马聪 15558002279的博客原创
2018年08月21日 13:10:05880浏览

  1. 后台主页面：

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>系统管理后台</title>
	<style>
		body{margin: 0;background:#efefef;}
		a{text-decoration-line:none;color:green;}
		a:hover{color:blue;}
		li{list-style-type:none}
		header{background:linear-gradient(to bottom,lightgrey,grey);height:80px;width:100%;overflow:hidden;}
		.top{height:80px;width:1000px;margin:auto;}
		.top_title{font-size:30px;font-family:"微软雅黑";line-height: 80px;padding-left:20px;}
		.top_botton{width:400px;height:80px;background-color:green;float:right;}
		.top nav{float:right;margin-right:10px;}
		.top nav ul li{float:left;line-height:70px;padding-left:20px;}

		main{width:1000px;margin:auto;overflow: hidden;}
		main article{width:100%;height:800px;float:left;margin-left:200px;}
		main aside{width:200px;height:800px;float:left;margin-left: -100%;position:relative;left:-200px;}
		article iframe{width:100%;height:100%;}
		footer{width:100%;text-align:center;}
	</style>
</head>
<body>
	<header>
	<div class="top">		
		<font class="top_title">系统管理后台</font>
        <nav role="user">
            <ul>
                <li>欢迎管理员:<strong>admin</strong></li>
                <li><a href="#" target="main">修改密码</a></li>
                <li><a href="#" onclick="logout()">退出登录</a></li>
            </ul>
        </nav>
	</div>
	</header>
	<main>
		<article>
			<iframe src="setting.html" name="main"></iframe>
		</article>
		<aside><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="products.html" target="main">产品管理</a></li>
            </ul>
        </nav></aside>
	</main>
	<hr>
		<footer role="copyright">
            <p><a href="http://php.cn">php.cn</a> ©版权所有</p>
        </footer>
	<hr>
</body>
</html>

运行实例 »

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

效果图：

1.png

2.分类页面：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <style>
        a{text-decoration-line:none}
        table{border-collapse:collapse;width:780px;margin:0;padding:0;font-size:14px;}
        table tr:first-child td{background:lightgrey}
        table tr:nth-child(2) td{border:none;padding-left:20px;}
        table tr:nth-child(3) td{border:none;padding-left:30px;}
        table tr td{border:1px solid grey;text-align:left;height:30px;line-height:30px;border-left:none;border-right:none;}
        .title tr td{border:none;font-size:18px;font-weight:bold;text-align:center;d}
    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;
        margin-left:2px;
        line-height: 24px;
    }
    </style>
</head>
<body>
<h2>分类管理<table>
    <form action="" method="post">
        <input type="text" name="zhulei" placeholder="添加主类">
        <input type="submit" value="添加">
    </form>
</table></h2>
<table class="title">
    <tr>
        <td width="10%">展开</td>
        <td width="10%">类别等级</td>
        <td width="20%">分类名称</td>
        <td width="10%">是否启用</td>
        <td width="50%">操作</td>
    </tr>
</table>

<table>
    <tr>
        <td><a href="">+</a></td>
        <td>主类</td>
        <td>电脑</td>
        <td><a href="" style="color:green">启用</a></td>
       <td>
        <a href="">编辑</a>  
        <a href="">删除</a>  
        <a href="">添加子类</a>
        </td>
    </tr>
    <tr>
        <td><a href="">-</a></td>
        <td>二级分类</td>
        <td>笔记本</td>
        <td><a href="" style="color:green">启用</a></td>
       <td>
        <a href="">编辑</a>  
        <a href="">删除</a>  
        <a href="">添加子类</a>
        </td>
    </tr>
        <tr>
        <td><a href="">+</a></td>
        <td>三级分类</td>
        <td>dell</td>
        <td><a href="" style="color:green">启用</a></td>
       <td>
        <a href="">编辑</a>  
        <a href="">删除</a>  
        <a href="">添加子类</a>
        </td>
    </tr>
</table>

<table>
    <tr>
        <td><a href="">+</a></td>
        <td>主类</td>
        <td>电视机</td>
        <td><a href="" style="color:green">启用</a></td>
       <td>
        <a href="">编辑</a>  
        <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>

运行实例 »

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

效果图：

2.png

3.产品页面：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品设置</title>
    <style>
        a{text-decoration-line:none}
        table{border-collapse:collapse;width:780px;margin:0;padding:0;font-size:14px;}
        table tr:first-child{font-size:16px;font-weight:bold;}
        table tr td{border:1px solid grey;text-align:center;height:50px;line-height:50px;}
        table tr td img{width:100px;padding-top:10px;} 
    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;
        margin-left:2px;
        line-height: 24px;
    }
    </style>
</head>
<body>
<h2>产品设置</h2>
<table>
    <tr>
        <td width="5%">选择</td>
        <td width="5%">序号</td>
        <td width="10%">产品名称</td>
        <td width="20%">产品图片</td>
        <td width="10%">产品型号</td>
        <td width="20%">产品说明</td>
        <td width="20%">操作</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>xx牛奶</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</td>
        <td>不错，很好。很不错...</td>
       <td><a href="">编辑</a>  <a href="">删除</a></td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>xx牛奶</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</td>
        <td>不错，很好。很不错...</td>
        <td><a href="">编辑</a>  <a href="">删除</a></td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>xx牛奶</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</td>
        <td>不错，很好。很不错...</td>
        <td><a href="">编辑</a>  <a href="">删除</a></td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td>xx牛奶</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</td>
        <td>不错，很好。很不错...</td>
        <td><a href="">编辑</a>  <a href="">删除</a></td>
    </tr>
        </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>5</td>
        <td>xx牛奶</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</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.jpg

4.文档管理页面：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档管理</title>
    <style>
        a{text-decoration-line:none}
        table{border-collapse:collapse;width:780px;margin:0;padding:0;font-size:14px;}
        table tr:first-child{font-size:16px;font-weight:bold;}
        table tr td{border:1px solid grey;text-align:center;height:50px;line-height:50px;}
        table tr td img{width:100px;padding-top:10px;} 
    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;
        margin-left:2px;
        line-height: 24px;
    }
    </style>
</head>
<body>
<h2>文档管理</h2>
<table>
    <tr>
        <td width="5%">选择</td>
        <td width="5%">序号</td>
        <td width="10%">标题名称</td>
        <td width="20%">标题图片</td>
        <td width="10%">所属分类</td>
        <td width="20%">操作</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>xx牛奶</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</td>
       <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>矿泉水</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</td>
       <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td>红牛</td>
        <td><img src="http://www.baidu.com/img/bd_logo1.png?qua=hight" alt=""></td>
        <td>tc130-tt</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>

运行实例 »

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

效果图：

1534827341(1).jpg

 手抄语义化标签：

386582939495369410.jpg

上一条：html新增语义标签了解,使用圣杯布局完成后台管理首页布局 2018/8/20下一条：echarts做后台报表
语义话标签、后台模板
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多