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>

 

顯示效果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章