Tutorial zur Verwendung des Frameset-Tags in HTML

Frameset-Seiten unterscheiden sich etwas von normalen Webseiten. Obwohl es immer noch mit <HTML> und dem <HEAD>-Tag beginnt, das den Titel und andere Skripte enthält, stellt sein Inhalt nur das Layout-Design jeder Seite dar. Daher ist kein <BODY>-Element mehr erforderlich, sondern nur noch ein <frameset>-Tag.

Attributeinführung
Rahmen: Legt die Randstärke des Rahmens fest.

bordercolor: Legt die Rahmenfarbe des Rahmens fest.

Frameborder: Legen Sie fest, ob der Frame-Rand angezeigt werden soll. Die Einstellwerte sind nur 0 und 1; 0 bedeutet kein Rand, 1 bedeutet, den Rand anzuzeigen.

cols: Teilt die Seite vertikal. Es gibt drei Möglichkeiten, den Wert auszudrücken: „30 %, 30 (oder 30px)“; die Anzahl der Werte stellt die Anzahl der Fenster dar und die Werte sind durch „“, getrennt. „30 %“ bedeutet, dass der Rahmenbereich 30 % der gesamten Browserseitenfläche einnimmt; „30“ bedeutet, dass die horizontale Breite des Bereichs 30 Pixel beträgt; „“ bedeutet, dass der Bereich den verbleibenden Seitenraum einnimmt. Beispiel: cols="25%,200,*" bedeutet, dass die Seite in drei Teile unterteilt ist, der linke Teil 25 % der Seite einnimmt, die horizontale Breite in der Mitte 200 Pixel beträgt und der Rest der Seite der rechte Teil ist.

Zeilen: Seite horizontal unterteilen. Die numerische Darstellungsmethode und Bedeutung sind dieselben wie in den Spalten.

Framespacing: Legen Sie den Leerraum zwischen den Frames fest.

Verwendung
Schauen wir uns diesen Code an:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< Rahmensatz Zeilen = "*" spalten = "180,*" Rahmenrand = 0 Grenze = 0 >
< Rahmen src = "links.html" scrollen = "nein" noresize > </ frame >
< Rahmen src = "main.html" Name = "Haupt" > </ Rahmen >
</frameset>

Dieser Code bedeutet: Es wird ein zweispaltiges Frameset gesetzt, die Breite der linken Spalte beträgt 180px und noresize bedeutet, dass die Breite fix bleibt.

Wie verwenden Sie also die Rahmennavigation, um zu einem bestimmten Abschnitt zu springen? Der folgende Code stellt den Navigationsrahmen auf der linken Seite dar:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< html >
<Kopf>
< Meta Zeichensatz = "utf-8" >
</ Kopf >
< Textkörper Hintergrundfarbe = "#ffffd2" >
<ul>
< li > < ein href = "./reg.html" target = "main" > Benutzer registrieren </ a > </ li >
< li > < ein href = "./main.html" target = "main" > Zurück zur Startseite </ a > </ li >
<ul>
</ Körper >
</ html >

Diese Links zielen auf den zweiten Frame. Der zweite Frame zeigt das verknüpfte Dokument. Ein Navigationsrahmen, in dem Links auf bestimmte Abschnitte in der Zieldatei verweisen.

Schauen wir uns dieses Beispiel genauer an:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "de" >
<Kopf>
< Meta http-equiv = "Inhaltstyp" Inhalt = "Text/HTML; Zeichensatz=UTF-8" >
< Titel > Haorooms Blog-Frame-Standard - Demo </Titel>
</ Kopf >
< Rahmensatz Zeile = "180,*" >
< Rahmen Name = "oberster Rahmen" src = "topframe.html" />
< Rahmensatz Spalten = "50%,50%" >
< Rahmen src = "links.html" Name = "linker Rahmen" />
< Rahmen src = "rechts.html" Name = "rechterRahmen" />
</frameset>
</frameset>
</ html >

Das Layout und die Effekte jedes Teils des Auswahlbereichs mithilfe von js sind wie folgt:
2016530120259070.png (799×559)

<<: Beispiel für die Validierung eines JavaScript-Formulars

>>: So verwenden Sie Portainer zum Erstellen einer visuellen Schnittstelle für Docker

So generieren Sie ein Kommentarskript für die Hive-Tabellenerstellungsanweisung in MySQL-Metadaten

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Es gibt ein solches Szenario: ein kreisförmiger C...

Tutorial zur Verwendung des Frameset-Tags in HTML

So generieren Sie ein Kommentarskript für die Hive-Tabellenerstellungsanweisung in MySQL-Metadaten

Detaillierte Erklärung von react setState

Erläuterung der Überwachungsparameter in Leistung und Systemschema in MySQL 5.7 (empfohlen)

Detaillierte Erklärung der Prinzipien des responsiven Systems von Vue

Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript

Bringen Sie Ihnen kostenlos bei, wie Sie AWS-Serverressourcen nutzen

Einführung und Installation von vue-cli

Das Flex-Layout realisiert den Layoutmodus mit festem oberen und unteren und gleitendem mittleren

Beispielmethode zum Anzeigen von IP in Linux

Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster

Artikel empfehlen

Detaillierte Erklärung der Group-By-Anweisung in der MySQL-Datenbankgruppenabfrage

js-Datentypen und Beispiele für ihre Beurteilungsmethoden

Mehr als 300 Zeilen CSS-Code, um die explosiven Spezialeffekte von WeChat 8.0 zu erzielen

So lösen Sie das Problem unzureichender Berechtigungen beim Benutzerwechsel im Docker-Container

Beispiel für die MySQL-Triggeroperation „Hinzufügen“, „Löschen“, „Ändern“ und „Abfragen“

Beheben Sie das Problem, dass Docker Run oder Docker Restart beim Starten des Images automatisch beendet werden

Virtual Box-Tutorialdiagramm zum Duplizieren virtueller Maschinen

Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 16.04 MySQL 8.0

React antd realisiert dynamische Vergrößerung und Verkleinerung der Form

So erstellen Sie MySQL-Indizes richtig

CSS erzielt den Effekt, dass die äußerste Schicht einer mehrschichtigen verschachtelten Struktur rotiert, während die anderen Schichten unverändert bleiben.

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren

Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators

Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten

Linux-Tutorial zum Ersetzen von Zeichenfolgen mit dem Befehl sed