• 移动开发移动端
  • 学习Android基础
  • 学习Android进阶
  • 学习Android组件
  • 学习Android实战
  • 学习Swift
  • 学习ios
  • 学习Android UI
  • 数据库开发数据库
  • 学习Mysql
  • 学习Redis
  • 学习Memcache
  • 学习云计算
  • 产品经理,网站运营产品运营
  • 学习产品经理
  • 学习互联网思维
  • 学习产品分析
  • 学习产品原型
  • 学习产品设计
  • 学习网络运营
  • 学习新媒体运营
  • 学习网络推广
  • 网站设计,UI设计设计教程
  • 学习设计基础
  • 学习设计工具
  • 学习UI设计
  • 学习平面构成
  • 学习AE
  • 学习平面设计
  • 嵌入式开发,物联网开发智能硬件
  • 学习物联网
  • 学习ARM
  • 学习嵌入式
  • 学习蓝牙开发
  • 开发工具开发工具
  • 学习Eclipse IDE
  • 网站建设网站建设
  • 学习Web应用安全
  • web前端培训
    HTML教程

    HTML框架案例



    源码展示


    <html>
    <head>
    <title>HTML框架</title>
    <meta charset="utf-8">
    </head>
    <frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize">
    <frame name="top" src="top.html"/>
    <frameset cols="20%,80%">
    <frame name="left" src="left.html"/>
    <frame name="right" src="right.html" scrolling="no"/>
    </frameset>
    <frame name="bottom" src="bottom.html"/>
    </frameset>
    </html>


     

    运行结果:


     html1.png 

     

     


    bottom:


    <html>
    <head>
    <title>框架</title>
    <meta charset="utf-8">
    </head>
    <body bgcolor="green" topmargin="50">
    <center><font size="2" color="white">© 2015-2099 麦子学院版权所有</font></center>
    </body>

    </html>

     

    运行结果:


     html2.png 

     

     


    left:


    <html>
    <head>
    <title>框架</title>
    <meta charset="utf-8">
    </head>
    <body bgcolor="#ccc" link="green" vlink="#f60" alink="yellow">
    <ul>
    <li><a href="">
    <li><a href="">
    <li><a href="">
    <li><a href="">
    </ul>
    <img src=""></img>
    </body>

    </html>

     

    运行结果:


     html3.png 

     

     


    right:


    <html> 
    <head> 
    <title>框架</title> 
    <meta charset="utf-8"> 
    </head> 
    <body bgcolor="#f2f2f1"> 
    <table width="800" cellspacing="10"> 
    <tr> 
    <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td><img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <img width="120" height="90" src="http://g.hiphotos.baidu.com/news/q%3D100/sign=b13a8f41201f95caa0f596b6f9177fc5/0e2442a7d933c895f7731244d41373f0820200fb.jpg" border="0" align="left"> 
    </td><td> <p>2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。2015年4月23日,继杭州加大治理大气污染,严格控制黄标车以来,杭州“汽车坟场”报废车越来越多,堆积如山的报废车远看像一座山。网友调侃,车满为患都快要溢出墙外。</p> 
    </td> 
    </tr> 
    </table> 
    </body> 
    </html>

     

    运行结果:


     html4.png 

     



    top:


    <html>
    <head>
    <title>框架</title>
    <meta charset="utf-8">
    </head>
    <body bgcolor="green" topmargin="10">
    <img src="logo.jpg"/>
    <h1>  <a href="">
    <p><font color="#fff">    请记住我们的网址是:www.maizi.com</font></p>
    </body>

    </html>


    运行结果:


      html5.png 

     

     

    <html>

    <head>

    <title>框架</title>

    <meta charset="utf-8">

    </head>

    <body bgcolor="green" topmargin="10">

    <img src="logo.jpg" align="left"/>

    <h1>  <a href="1.html" target="_blank"><font color="white">汽车资讯网</font></a></h1>

    <p><font color="#fff">    请记住我们的网址是www.maizi.com</font></p>

    </body>

    </html>



    运行结果:


     html6.png 

     


    【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

    相关内容

  • ·  HTML+CSS基础入门
  • ·  Html5+css3
  • ·  专业Web设计师应该避免的6个关键错误
  • ·  周四直播|搜狐资深前端工程师,30分钟带你跑一遍微信小程序
  • ·  【208期】盘点初入Web前端必备技能
  • logo
    © 2012-2016 www.maiziedu.com
    蜀ICP备13014270号-4 Version 5.0.0 release20160127

    免费领取价值1888元求职宝典!

    客服热线 400-862-8862

    回到顶部