08网页前端HTML——HTML项目

一:提前创建好top.html  left.html   right.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>

    <frameset rows="20%,80%">
       <frame src="top.html">
        <frameset cols="15%,85%">
            <frame src="left.html">
             <frame src="right.html">    
        </frameset>
        
    </frameset><noframes></noframes>
    
</html>

页面显示:

二:添加页面跳转

2.设置target的名称为 main ,同时设定框架集中引入页面的名字为main

main.html 的代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>

    <frameset rows="20%,80%">
       <frame src="top.html">
        <frameset cols="15%,85%">
            <frame src="left.html">
             <frame src="right.html" name="main">  //设置name  
        </frameset>
    </frameset><noframes></noframes> 
</html>

left.html的代码如下:

注意:提前创建好要用到的 liebiao.html  biaoge.html   form.html  dongtai.html  这些我用的都是之前写的

form.html  代码:https://blog.csdn.net/weixin_41167340/article/details/81316063

dongtai.html 代码:https://blog.csdn.net/weixin_41167340/article/details/81325190

biaoge.html 代码:https://blog.csdn.net/weixin_41167340/article/details/81304215

liebiao.html代码:https://blog.csdn.net/weixin_41167340/article/details/81301039

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>left</title>
</head>
<body>
    <h3>知识汇总</h3>
<p>
        <a href="./show/liebiao.html" target="main">HTML列表</a><br/>  //设置target
        <a href="./show/biaoge.html" target="main">HTML表格标签</a><br/>
        <a href="./show/form.html" target="main">HTML表单标签</a><br/>
        <a href="./show/dongtai.html" target="main">HTML动态标记</a><br/>
</p>
</body>  
</html>

right.html的代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
    right
</body>
    
</html>

显示效果:

猜你喜欢

转载自blog.csdn.net/weixin_41167340/article/details/81353121
今日推荐