框架已经存在很长时间了，每个已知的浏览器都支持。虽然有些人认为它们很烦人，设计得很好，但在浏览网站时，框架可能非常有用。在本教程中，我们将讨论如何实现框架，并完成如何创建无边框框架，以及如何创建将内容加载到另一个框架的链接。
创建框架所需要知道的一切
所有帧都使用
//母版页 我的例子</ title> </ HEAD><frameset cols =“30％，50％”><frame src =“page1.htm”> <frame src =“page2.htm”></ frameset> </ html></pre></td><td ><br/></td></tr></tbody></table><p>Page1.htm和Page2.htm作为“普通”html页面单独创建，并包含在此母版页中。我们使用关键字“cols”来表示我们要定义列框架。要改为创建行，只需使用关键字“rows”：</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><html> <frameset rows =“50％，50％”><frame src =“page1.htm”> <frame src =“page2.htm”></ frameset> </ html></pre></td><td ><br/></td></tr></tbody></table><p>在这两个例子中，我们使用百分比作为宽度测量。您也可以谨慎使用像素，但是：</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><html> <frameset cols =“100,200,340”><frame src =“page1.htm”> <frame src =“page2.htm”> <frame src =“page3.htm”></ frameset> </ html></pre></td><td ><br/></td></tr></tbody></table><p>如果您将总宽度（100 + 200 + 340 = 640）相加，这将等于分辨率为640 * 480的屏幕宽度。大多数14'屏幕都设置为这样，但人们如何使用（800 * 600）的屏幕分辨率？如果它们出现，您的框架页面将如何显示？好吧，浏览器别无选择，只能将宽度拉伸到640以上，以适应这个更大的屏幕。（根据用户的屏幕分辨率，使用百分比定义的所有帧都将被拉伸，（或缩小）。这可能会给开发人员带来麻烦，因为您永远不知道如何显示帧。这是否意味着你永远不应该使用像素？绝对不。让我们看看我们如何克服这个问题：</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><HTML> <frameset cols =“100,200，* ”> <frame src =“page1.htm”> <frame src =“page2.htm”> <frame src =“page3.htm”> </ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>我们使用了一个特殊的关键字“*”，这意味着未定义。通过使用它，如果需要，只有这部分将被拉伸。另外两个，100和200，不会被无意中拉长。这样，您可以在右侧框架上保留所有页面的布局，这些布局不希望在左侧两个框架上拉伸，也可以使用它。</p><p>创建复杂的框架：</p><p>到目前为止，我们只创建了简单的所有列或所有行，帧。现在让我们继续前进到两者，我们呢？</p><p>定义具有列和行的帧的关键是在主页中放置多对<frameset> </ frameset>标记，每对包含“cols”或“rows”声明。这可能会有点棘手，所以我将尝试使用多个示例进行解释。让我们开始切片</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><HTML> <frameset cols =“50％，50％”> <frameset rows =“50％，50％”> <frame src =“page1.htm”> <frame src =“page2.htm”> </ frameset> <frame src =“page3.htm”> </ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>好的，到底是怎么回事？首先，在蓝色中，我们定义了两列。然后，对于第一列，我们将更多切成两行。正如您所看到的，行和列“chunk”都以</ frameset>标记结尾，准确地说是两个。就像我说的那样，我们通过定义cols =“50％，50％”开始了“框架”。让我们看看如果我们首先定义行而不是反过来会发生什么：</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre>//母版页 <HTML> <frameset rows =“50％，50％”> <frameset cols =“50％，50％”> <frame src =“page1.htm”> <frame src =“page2.htm”> </ FRAMESET> <frame src =“page3.htm”> </ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>如您所见，完全不同的结果！困惑？这是一个<em>值得</em>记住的好规则：<em>无论何时切割一个框架，无论是切割成一列还是一行，切片都会切片，直到它碰到“墙”。</em></p><p>复杂框架分步示例：</p><p>让我们充分利用上述规则。记住这条规则可以省去很多麻烦。好吧，假设我们想要创建一个这样的框架：</p><table class="cke_show_border" width="200"><tbody><tr class="firstRow"><td><br/></td><td rowspan="2"><br/></td><td rowspan="2"><br/></td><td><br/></td><td rowspan="2"><br/></td></tr><tr><td><br/></td><td><br/></td></tr></tbody></table><p>这可能看起来势不可挡，但如果你把寿司规则牢牢地放在脑海中，那你就没事了。我们该怎么做呢？从行开始？列？好吧，首先取出我们的刀，并记住，这把刀将继续切片，直到它撞到“墙”。如果我们从行开始，我们会有这样的事情：</p><table class="cke_show_border" width="200"><tbody><tr class="firstRow"><td><br/></td></tr><tr><td><br/></td></tr></tbody></table><p>这把寿司刀一直切割直到遇到障碍物，在这种情况下，是页面的边缘。如您所见，从使用行开始将无法实现我们期望的目标。</p><p>好吧，让我们从列开始：</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><HTML> <FRAMESET COLS = “33％，17％，17％，17％，17％”> </ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>到现在为止还挺好。现在我们需要将第一列拆分为两行。请记住，这把瑞士刀不是很锋利，所以它不会穿过第一列的墙壁。</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><HTML> <FRAMESET COLS = “33％，17％，17％，17％，17％”><frameset rows =“50％，50％”> <frame src =“page1.htm”> <frame src =“page2.htm”> </ FRAMESET></ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>如您所见，“行”部分嵌套在“cols”部分中，因为行是列声明的“子部分”。</p><p>让我们继续我们的寿司切碎，好吗？</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><HTML> <FRAMESET cols =“33％，17％，17％，17％，17％”> <frameset rows =“50％，50％”> <frame src =“page1.htm”> <frame src =“page2.htm”> </ FRAMESET><frame src =“page3.htm”> <frame src =“page4.htm”></ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>最后：</p><table class="cke_show_border" width="100"><tbody><tr class="firstRow"><td ><pre><HTML> <FRAMESET cols =“33％，17％，17％，17％，17％”> <frameset rows =“50％，50％”> <frame src =“page1.htm”> <frame src =“page2.htm”> </ FRAMESET> <frame src =“page3.htm”> <frame src =“page4.htm”><frameset rows =“50％，50％”> <frame src =“5.htm”> <frame src =“6.htm”> </ FRAMESET><frame src =“7.htm”></ FRAMESET> </ HTML></pre></td><td ><br/></td></tr></tbody></table><p>我知道这可能非常令人困惑，但是通过自己玩它来学习它的最佳方式...所以打开你的编辑器，尝试一下！好吧，我们已经了解了框架的整体结构 - 让我们继续看看我们可以添加到框架中的一些属性，并掌握从一个框架到另一个框架的链接和加载内容的艺术。</p><p><br/></p> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/kaifa/show-101159.html">如何玩转WhatsApp，WhatsApp连不上网络解决方法</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/kaifa/show-101173.html">TeamTalk项目iOS端代码总结</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202604/c561427e00d34fa.webp')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520822.html" class="text-dark fw-bold text-hover-primary fs-6">德国总理：美国正在被伊朗羞辱</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">德国之声4月27日报道，德国总理默茨在访问一所学校时表示，在当前的持续冲突中，伊朗领导层正试图羞辱美...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202604/913dbad4da97c0d.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520821.html" class="text-dark fw-bold text-hover-primary fs-6">理响中国｜“长”歌以行，风云激...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">光阴如梭，东方潮阔。这里是中国的长三角，世界的长三角。无论过去、现在还是未来，这片土地都因时代而生，...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520820.html" class="text-dark fw-bold text-hover-primary fs-6">白宫：特朗普及其国安团队开会讨...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">新华社华盛顿4月27日电 美国白宫新闻秘书莱维特27日在记者会上证实，总统特朗普及其国家安全团队当天...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520819.html" class="text-dark fw-bold text-hover-primary fs-6">人民日报刊文：日本放开杀伤性武...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">日本放开杀伤性武器出口推高地缘冲突风险（国际论坛）常思纯《人民日报》（2026年04月28日 第 0...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520818.html" class="text-dark fw-bold text-hover-primary fs-6">医疗保障法草案二审：明确生育保...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">满足多样化健康保障需求本报记者 彭 波4月27日，医疗保障法草案二审稿提请十四届全国人大常委会第二十...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXy8vJkA4prAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520817.html" class="text-dark fw-bold text-hover-primary fs-6">天津一景区发生自转旋翼机事故1...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">澎湃新闻记者 吕新文中国民用航空华北地区管理局4月22日公布《豪客通航“10•1”天津长芦汉盐旅游区...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202604/057da53c0dddb41.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520816.html" class="text-dark fw-bold text-hover-primary fs-6">卡塔尔埃米尔与美国总统特朗普通...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">当地时间24日，卡塔尔埃米尔塔米姆与美国总统特朗普通电话，重点就中东地区局势以及伊朗与美国谈判问题交...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXy8vJkA4prAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520815.html" class="text-dark fw-bold text-hover-primary fs-6">男子30年前被扣押2859克黄...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">澎湃新闻记者 王鑫家住辽宁省大连市的潘永嘉近日向澎湃新闻反映称，三十年前，他在大连周水子机场被盖州市...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520814.html" class="text-dark fw-bold text-hover-primary fs-6">商务部：取消反制欧盟两家金融机...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">中华人民共和国商务部令二〇二六年 第1号鉴于欧盟已取消对中国两家金融机构的制裁措施，现公布《关于取消...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://x0.ifengimg.com/res/2026/29CD1B22A4B3F416DAFA44073F8FC3CAB3E382D4_size229_w929_h515.png')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/news/show-14520813.html" class="text-dark fw-bold text-hover-primary fs-6">过去24小时共有5艘船只通过霍...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">总台记者当地时间24日获悉，过去24小时内，共有5艘船只通过霍尔木兹海峡，其中包括一艘伊朗油轮。（总...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2026 ©</span> 太卓网<a href="http://www.yexian114.com/">叶县生活网</a> <a href="https://www.wxx86.cn/">编程知识网</a> <a href="http://www.kcwzh.com/">开创游戏网</a> <a href="https://www.caiding5.net">菜丁网</a><a href="http://cn.office369.com">奥飞商务网</a> <a href="http://www.zlnznjj.com/">众乐知识网</a><a href="http://www.lhjia.com/">乐活家</a><a href="http://www.nengyuan100.com/">能源100网</a> <a href="http://it.tdroid.net/">泰达科技</a><a href="http://cn.tdroid.net/">太卓开发网</a><a href="http://cn.yuansudz.com/">元素科技网</a><a href="http://www.80hlw.com/">八零商务网</a><a href="http://game.tdroid.net/">土豆游戏网</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news" target="_blank" class="menu-link px-2">科技资讯</a> </li> <li class="menu-item"> <a href="/jishu" target="_blank" class="menu-link px-2">技术分享</a> </li> <li class="menu-item"> <a href="/kaifa" target="_blank" class="menu-link px-2">程序开发</a> </li> <li class="menu-item"> <a href="/weixiu" target="_blank" class="menu-link px-2">设备维修</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>
