《Web前端设计与开发》实验一：HTML基本标签实验3

最新推荐文章于 2022-11-11 12:44:12 发布

山河不夜天Ajatar

最新推荐文章于 2022-11-11 12:44:12 发布

阅读量1.5k

点赞数 1

分类专栏：前端开发文章标签： html css web

本文链接：https://blog.csdn.net/weixin_43795975/article/details/108783911

版权

前端开发专栏收录该内容

15 篇文章 9 订阅

订阅专栏

一、实验内容

利用框架实现下面页面，页面效果如下图（文件命名遵照图示）：

二、实验代码及成品

frame_sets.html

<!doctype html>
<html>

<frameset rows="12%,*">

    <frame src="top.html" noresize="noresize" name="topFrame"><!--noresize属性表示无法调整大小的框架。name属性为框架名称，必须书写。-->
    <frameset cols="20%,*">
        <frame src="left.html" noresize="noresize" name="leftFrame">
        <frame src="right1.html" noresize="noresize" name="rightFrame">
    </frameset>

</frameset>

</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>topFrame</title>
    </head>
    <body>
        <h1 align="center" style="font-family: 宋体">HTML开发商业网站</h1>
    </body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
    <head>
     <meta charset="UTF-8">
        <title>Title</title>
        <style>
            a{
                color: darkviolet;
            }
        </style>

    </head>
    <body>
        <h1 style="font-family: 宋体">第2章&nbsp;HTML语言</h1>
        <a href="right1.html" target="rightFrame"><h2 style="font-family: 宋体">2.1HTML基础知识</h2></a>
        <a href="right2.html" target="rightFrame"><h2 style="font-family: 宋体">2.2HTML语言入门</h2></a>
    </body>
</html>

right1.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1 style="color: red;font-family: 宋体" >&emsp;&emsp;HTML语言是网页制作的基础，是初学者必学的内容。</h1>
    </body>
</html>

right2.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
     <title>Title</title>
    </head>
    <body>
        <h1 style="color: blue;font-family: 宋体" >&emsp;&emsp;HTML语言是网页制作的基础，是初学者必学的内容。</h1>
    </body>
</html>

在这里插入图片描述

山河不夜天Ajatar

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
《Web前端设计与开发》实验一：HTML基本标签实验3

一、实验内容3 . 利用框架实现下面页面，页面效果如下图（文件命名遵照图示）：二、实验代码及成品frame_sets.html<!doctype html><html><frameset rows="12%,*"> <frame src="top.html" noresize="noresize" name="topFrame">
复制链接

扫一扫

专栏目录