HTML+CSS教程（二）frameset框架和iframe内嵌

一.框架

（frameset）
1.用<frameset></frameset>代替了<body></body>
2.rows设置行的占页面的百分比；cols设置列的所占百分比；*表示剩余的百分比；frameborder设置框架的边框（取值0/1）0–不显示边框1–在每个页面之间都显示边框；bordercolor设置边框颜色；framespacing表示框架与框架间保留的空白距离。
3.noresize设置禁止用户拖拉框架大小；scrolling设置滚动条是否显示；src路径连接到内容页面
4.用法例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <frameset rows="30%,*,10%" frameborder="1"  bordercolor="blue" framespacing="10">

        <frame src="02.html" noresize="noresize" scrolling="no" />

        <frameset cols="20%,70%,*">

            <frame src="03.html" />

            <frame src="01.html" noresize="noresize" scrolling="no"/>

            <frame src="index.html" noresize="noresize" scrolling="no"/>

        </frameset>

        <frame src="03.html" noresize="noresize" scrolling="no"/>

    </frameset>

</html>

二.内嵌
例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/01.css"/>

    </head>

    <body>

        <h1 align="center">个人简历</h1><!--标题-->

        <form><!--表单-->

        <table border="1" cellspacing="0" cellpadding="0" align="center"><!--表格-->

        <tr align="center">

            <td>姓名</td>

            <td><input type="text" placeholder="觅知网"/></td><!--placeholder设置提示-->

            <td>出生年月</td>

            <td><input type="text"placeholder="1996.05"/></td>

            <td rowspan="4">

                <div id="div1"><img src="img/希望.jpg" width="180" height="90"/></div></td>

        </tr><!--img插入图片-->

        <tr align="center">

            <td>名族</td>

            <td><input type="text"placeholder="汉"/></td>

            <td>政治面貌</td>

            <td><input type="text" placeholder="中共党员"/></td>

        </tr>

        <tr align="center">

            <td>电话</td>

            <td><input type="tel" name="tel" maxlength="11" placeholder="13500135000"/></td>

            <td>毕业院校</td>

            <td><input type="text" placeholder="广州科技大学"/></td>

        </tr>

        <tr align="center">

            <td>邮箱</td>

            <td><input type="email" placeholder="2968218682@qq.com"/></td>

            <td>学历</td>

            <td><input type="text" placeholder="专科"/></td>

        </tr>

        <tr align="center">

            <td>地址</td>

            <td colspan="4"><iframe src="dizhi.html" noresize="noresize" scrolling="no" width="600" height="30" frameborder="0"></iframe></td>

        </tr><!--iframe内嵌一个文件到单元格之中-->

        <tr align="center">

            <td>求职意向</td>

            <td colspan="4"><iframe src="qiuzhiyixiang.html" noresize="noresize" scrolling="no" width="600" height="30" frameborder="0"></iframe></td>

        </tr><!--noresize="noresize"用户无法改动拖拉边框大小-->

        <tr>

            <td>教育背景</td>

            <td colspan="4"><iframe src="jiaoyubeijing.html" noresize="noresize" scrolling="no" width="600" height="80"frameborder="0"></iframe></td>

        </tr><!--scrolling="no"设置滚动条不显示-->

        <tr>

            <td>实习经历</td>

            <td colspan="4"><iframe src="shixijingli.html"noresize="noresize" scrolling="no" width="600" height="140"frameborder="0"></iframe></td>

        </tr><!--frameborder="0"设置无边框-->

        <tr>

            <td>校内实践</td>

            <td colspan="4"><iframe src="xiaoneishijian.html" noresize="noresize" scrolling="no" width="600" height="140"frameborder="0"></iframe></td>

        </tr>

        <tr>

            <td>技能证书</td>

            <td colspan="4"><iframe src="jinengzhengshu.html"noresize="noresize" scrolling="no" width="600" height="60"frameborder="0"></iframe></td>

        </tr>

        <tr>

            <td>自我评价</td>

            <td colspan="4"><iframe src="ziwopingjia.html"noresize="noresize" scrolling="no" width="600" height="50"frameborder="0"></iframe></td>

        </tr>

        </table>

        </form>

    </body>

</html>

注释：iframe可以设置宽width和高height

巴特西

HTML+CSS教程（二）frameset框架和iframe内嵌

最新文章

热门文章