html_框架页 左右联动

程序员_Mr_Shan
333 阅读1分钟

html_框架页 左右联动

  1. 效果图

d3_左右联动.jpg

  1. 功能

    点击下方左侧超链接，下方右侧显示连接跳转内容，实现了左右联动

  2. 代码

    • 框架页.html
     <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     
 </head>
 ​
 <frameset rows="30%,*" >
     <frame src="top.html" noresize>
         <frameset cols="30%,*" >
             <frame src="./left.html" noresize >
                 <frame src="./right.html" name="rightname">
 ​
 ​
 ​
 ​
 ​
         </frameset>
 ​
 </frameset>
 </html>

    • left.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./d3_任务说明_3.css">
 </head>
 <body>
     <ul>
         <li><a href="./文本.html" target="rightname">文本</a></li>
         <li> <a href="./question.html" target="rightname">question.html</a></li>
         <li><a href="./student.html" target="rightname">student.html</a></li>
         <li><a href="./register.html" target="rightname">register.html</a></li>
       
     </ul>
     
    
     
     
     
 </body>
 </html>

    • right.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <p>right</p>
 </body>
 </html>

    • top.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <h2>top</h2>
 </body>
 </html>

    • 文本.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./d3任务说明.css">
 </head>
 <!-- d3任务说明前3问 -->
 <body>
    <p><span class="bold">大连高新园区爱尚教育科技培学校</span> 是专门培养高素质程序员的摇篮</p>
    <p>用实力说话，<span class="i">爱尚教育</span></p>
    <ul>
        <li><span class="bold">科学的培训方案：</span>资深T行业咨询 </li>
        <li><span class="bold">科学的培训方案：</span>资深T行业咨询 </li>
        <li><span class="bold">科学的培训方案：</span>资深T行业咨询 </li>
        <li><span class="bold">科学的培训方案：</span>资深T行业咨询 </li>
        <li><span class="bold">科学的培训方案：</span>资深T行业咨询 </li>
        <li><span class="bold">科学的培训方案：</span>资深T行业咨询 </li>
    
        
    </ul>
    <img src="../day3/d3_素材/d3_任务素材/mobile1.jpg" alt="">
    <img src="../day3/d3_素材/d3_任务素材/mobile2.jpg" alt="">
    <img src="../day3/d3_素材/d3_任务素材/mobile3.jpg" alt="">
    <img src="../day3/d3_素材/d3_任务素材/mobile4.jpg" alt="">
    <img src="../day3/d3_素材/d3_任务素材/mobile5.jpg" alt="">
 </body>
 </html>

    • question.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./d3任务说明.css">
 </head>
 <body>
     <ol>
         <li>人为什么活着？</li>
         <li>活着的意义是什么？</li>
         <li>钱重要吗？</li>
         <li>有钱就能幸福吗？</li>
       
     </ol>
 ​
     <a href="https://wenku.baidu.com/view/5a615d200440be1e650e52ea551810a6f524c8d3.html" > 详细内容</a>
 </body>
 </html>

    • student.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./d3_任务说明_2.css">
 </head>
 <body>
     <table>
         <tr>
             <td><img src="../day3/d3_素材/d3_任务素材/mobile1.jpg" alt=""></td>
             <td><img src="../day3/d3_素材/d3_任务素材/mobile2.jpg" alt=""></td>
             <td><img src="../day3/d3_素材/d3_任务素材/mobile3.jpg" alt=""></td>
             <td><img src="../day3/d3_素材/d3_任务素材/mobile4.jpg" alt=""></td>
             <td><img src="../day3/d3_素材/d3_任务素材/mobile5.jpg" alt=""></td>
         </tr>
         <tr>
             <td><a href="../day3/d3_素材/d3_任务素材/mobile1.jpg">mobile1</a></td>
             <td><a href="../day3/d3_素材/d3_任务素材/mobile2.jpg">mobile2</a></td>
             <td><a href="../day3/d3_素材/d3_任务素材/mobile3.jpg">mobile3</a></td>
             <td><a href="../day3/d3_素材/d3_任务素材/mobile4.jpg">mobile4</a></td>
             <td><a href="../day3/d3_素材/d3_任务素材/mobile5.jpg">mobile5</a></td>
             
         </tr>
     </table>
 </body>
 </html>

    • register.html

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./d3任务说明.css">
 </head>
 <body class="bk">
     <form action="./hello.html">
         <table align="center" valign="middle" border="1">
             <tr>
                 <td align="right">手机号码:</td>
                 <td> <input type="tel" required>
                 <textarea name="" id="" cols="4" rows="1" valign="middle"></textarea>
                 </td>
                 
             </tr>
             <tr>
                 <td align="right">密码:</td> 
                 <td> <input type="password" required>
                 <textarea name="" id="" cols="4" rows="1.5" height="20" ></textarea></td>
             </tr>
             <tr>
                 <td align="right">重复密码:</td>
                 <td> <input type="password" required>
                     <textarea name="" id="" cols="4" rows="1.5" height="20" ></textarea></td>
             </tr>
             <tr>
                 <td align="right">图形验证码:</td>
                 <td><input type="text">
                     <textarea name="" id="" cols="4" rows="1.5" height="20" class="textarea" valign="middle">0712</textarea></td>
             </tr>
             <tr>
                 <td align="right">短信验证码:</td>
                <td valign="middle"> <input type="text">
                  <input type="image" src="../d2_任务素材/yanzhengma.jpg" height="20"required></td>
                 
             </tr>
             <tr>
                 <td align="center" colspan="2"> <input type="image" src="../d2_任务素材/register_img4.gif" ></td>
                
             </tr>
             <tr>
                 <td align="center" colspan="2">
                     <input type="checkbox">我已阅读服务声明
                 </td>
             </tr>
         </table>
     </form>
 </body>
 </html>

  3. 基础知识

    • frameset标签和frame标签

    • 下面是框架页部分代码（伪代码），需要输入真实文件路径,且html文件中没有body，frame代码写在head之后

    • noresize表示不可调整宽度

    • cols表示列，rows表示行

       ​
 <frameset rows="30%,*"> 
     <frame src="top文件路径" noresize>
     <frameset cols="30%,*">
     <frame src=" left文件路径" noresize>
          <frame src=" right文件路径"  name="rightname">
         
         
     </frameset>
     
 </frameset>

    • 下面是left.html部分代码

       <ul>
         <li><a href="./文本.html" target="rightname">文本</a></li>
         <li> <a href="./question.html" target="rightname">question.html</a></li>
         <li><a href="./student.html" target="rightname">student.html</a></li>
         <li><a href="./register.html" target="rightname">register.html</a></li>
       
     </ul>

      注：left.html中的a标签（超链接）多了一个target属性，指向了right.html的name，即left.html文件的超链接通过target指向了right框架

  4. 注意事项

    frameset出现时，html文件不能出现body，frameset代码写在head之后

avatar
文章
阅读
粉丝