📜  使用 HTML 和 CSS 打开或关闭灯泡

📅  最后修改于: 2021-08-31 02:14:14             🧑  作者: Mango

HTML 框架用于将浏览器窗口划分为多个部分,每个部分加载一个单独的 HTML 文档。在这个项目中,我们将制作一个网页,在用户点击时打开和关闭灯泡。我们将使用 HTML 框架和框架集功能以及一些 CSS 来设计我们的 ON 和 OFF 按钮。

方法:

  • 为了使用框架,我们使用了标签而不是标签。 标签定义了如何将窗口划分为框架。 标签的 rows 属性定义水平框架, cols属性定义垂直框架。在框架内部,我们使用了src属性,该属性用于给出应该在框架中加载的文件名。
  • 我们分别创建了两个文件,即 ON.html 和 OFF.html,它们分别具有打开和关闭位置的灯泡图像。每当用户按下 on 时,ON 文件就会加载到框架中,而每当按下 off 时,就会加载 OFF 文件。

例子:

index.html


  


    
    

  
  


main.html


  

  

  

    

        ON     

       

        OFF     

  


on.html


  

    

  

    

  


off.html


  

    

  

    

  


主文件



  

  

  

    

        ON     

       

        OFF     

  

.html



  

    

  

    

  

关闭.html



  

    

  

    

  

输出: