html 左浮动-一个案例说明网页浮动框架的应用以及静态网站使用框架的注意事项!

在开发程序时,经常会用到框架。 例如,常见的测试管理系统涉及浮动框架。 今天我给大家展示一个简单的例子,如何使用浮动框架(具有独立功能的页面)重构一个完整的页面(页面A)并在浏览器中显示。 达到以下效果:

将要实现的页面分为两部分,一部分是两侧的系统管理选项(B页面),另一部分是左侧的查询结果显示(C页面),最后使用浮动框架嵌入它们在最后的显示页面,方便表达html 左浮动,我们称之为A页面。 A页面代码如下:

浮动左对齐css_html 左浮动_浮动左对齐代码

图标上红框的位置就是嵌入该框的页面html 左浮动,分别是A页面的右侧(B页面)和A页面的左侧(C页面)。 B页和C页的代码如下:

B页代码

C页部分代码

浮动左对齐代码_浮动左对齐css_html 左浮动

技术要点

浮动框架的共同属性

浮动框架iframe是一种特殊的框架页面,它可以在浏览器窗口中嵌套子窗口,并在其中显示子页面的内容。 语法格式为:

html 左浮动_浮动左对齐css_浮动左对齐代码

file是其他框架文件的文件名或者链接,name是框架的名称,align是指对齐方式(左、右、居中、对齐),scrolling是框架的滚动条,有三种values(yes, no, auto ),frameborder是浮动框架的边框属性。

静态网站使用框架的注意事项

1、在SEO中大量应用框架结构会导致搜索引擎的“蜘蛛”程序无法抓取页面,不利于网站SEO,所以不建议在静态网页上应用框架结构规模很大。

2、需要对框架页面出现的滚动条进行处理。 过多的滚动条会影响用户体验,最终得不偿失。

3、该框架不适合效果复杂的页面布局(如特殊页面),静态网站建议使用div+css布局页面。

我们先来说说“浮动框架在HTML中的应用”。 图片为部分源码,源码私信。 每天学习一个知识点,每天发一条信息“所有的努力都有痕迹可循”。