html5利用frame实现简单的框架布局

时间:2026-02-16 19:07:33

1、首先建立一个html5文件,命名为imgx,核心代码如下所示:

<table width="100%">

<tbody>

<tr>

<td  id="t1" background="../../老电脑文件/html5/samle_img/timg.jpg

<h1 >欢迎进入xxx官方网站</h1>

</td>

</tr>

</tbody>

</table>

实现如下图所示的结果:

<style type="text/css">

#t1{

text-align: left;

color: #fff;

vertical-align: top;

}

</style>

html5利用frame实现简单的框架布局

2、新建一个html文件,命名为ol,核心代码:

<ul>

<a href="http://www.baidu.com"><li>首页</li></a>

<li>公司介绍</li>

<ul>

<li>光辉历史</li>

<li>重大事件</li>

<li>公司愿景</li>

</ul>

<li>公司产品</li>

<ul>

<li>液压机</li>

<li>空气压缩机</li>

<li>19#机床</li>

</ul>

<li>招贤纳士</li>

<li>联系我们</li>

</ul>

html5利用frame实现简单的框架布局

3、新建一个文件p,核心代码如下:

初学HTML5,这是我第一次对跑马灯效果的尝试,希望可以有作用

html5利用frame实现简单的框架布局

4、新建一个文件frame.html,核心代码如下:

<frameset rows="300,*,100" border="1">

  <frame src="imgx.html">

  </frame>

  <frameset cols="300,*">

    <frame src="ol.html">

    </frame>

    <frame src="about:blank">

    </frame>

    <frame src="p.html">

    </frame>

  </frameset>

  <frame src="p.html">

</frameset>

<noframes></noframes>

html5利用frame实现简单的框架布局

5、运行frame.html,即可看到最终效果

html5利用frame实现简单的框架布局

© 2026 途途旅游
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com