您的位置：首页 > 运维架构 > 网站架构

HTML基础——网站后台显示页面

2017-08-16 15:37 260 查看
1、框架集标签：（作用：将页面进行区域的划分)
　　<frameset rows="" cols="">
　　　　<frame src=""/>
　　　　<frame name=""/>
　　</frameset>

　　属性：
　　　　cols:进行垂直切割划分，可以切割为任一块（参数的值相加=100%，其中有一块可以使用*表示）
　　　　rows:进行水平切割划分，可以切割为任一块（参数的值相加=100%，其中有一块可以使用*表示）
　　一旦划分区域之后，我们需要对具体的区域进行内容的填充，此时需要使用<frame></frame>标签。
　　属性：
　　　　src:指定该区域显示的文件（路径）
　　　　name:它通常会结合超链接的target属性使用，来定义最终的显示位置。

2、实现网站后台显示页面：

首先新建网站后台显示页面的HTML文件，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows=20%,*>
<frame  src=top.html/>
<frameset cols=20%,*>
<frame src="left.html" />
<frame name="right"/>
</frameset>
</frameset>
</html>


然后在同一文件夹下新建top.html文件，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows=20%,*>
<frame  src=top.html/>
<frameset cols=20%,*>
<frame src="left.html" />
<frame name="right"/>
</frameset>
</frameset>
</html>


在同一文件夹下新建left.html文件，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a><br />
</body>
</html>


在同一文件夹下新建right.html文件，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="1000px" height="200px" cellpadding="0px" cellspacing="0px" align="center" bordercolor="blue">
<tr>
<td width="25%" align="center">id</td>
<td width="25%" align="center">会员名称</td>
<td width="25%" align="center">密码</td>
<td width="25%" align="center">地址</td>
</tr>

<tr>
<td width="25%" align="center">1</td>
<td width="25%" align="center">lisi</td>
<td width="25%" align="center">123</td>
<td width="25%" align="center">昌平北七家镇…</td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>


最后，网站后台显示页面的HTML文件在浏览器中运行，效果如下：



点击会员管理，跳出会员信息，

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航