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

一、实验内容

  1. 利用框架实现下面页面,页面效果如下图(文件命名遵照图示):
    在这里插入图片描述

二、实验代码及成品

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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43795975/article/details/108783911