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

Beispiel für die Implementierung eines Login-Effekts mit Vue-ElementUIs aus einem Formular

Detaillierte Erläuterung zur Lösung des Problems, dass der Docker-Container nicht über IP auf den Hostcomputer zugreifen kann

Artikel

Erweiterte Erklärung der Javascript-Funktionen

Tutorial zur Verwendung des Frameset-Tags in HTML

Beispiel für die Implementierung eines Login-Effekts mit Vue-ElementUIs aus einem Formular

LINUX Prüft, ob der Port belegt ist

Eine kurze Diskussion über den Spaß von :focus-within in CSS

So erstellen Sie eine kontinuierliche Integrationsumgebung mit Jenkins+Maven+Git auf CentOS7

Detaillierte Erklärung der JQuery-Datagrid-Abfrage

Detaillierte Erläuterung zur Lösung des Problems, dass der Docker-Container nicht über IP auf den Hostcomputer zugreifen kann

Erweiterte Erklärung der Javascript-Funktionen

Teilen Sie die 15 besten HTML/CSS-Design- und Entwicklungsframeworks

Sprechen Sie kurz über MySQL Left Join Inner Join

Übersicht über MySQL-Statistiken

Artikel empfehlen

Eine kurze Analyse des Zeitproblems von MySQL

Detailliertes Beispiel zur Verwendung der distinct-Methode in MySQL

So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis

mysql5.7.18.zip – Tutorial zur Konfiguration der installationsfreien Version (Windows)

Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container

So zeigen Sie MySQL-Links an und löschen abnormale Links

Docker-Container vom Einstieg bis zur Obsession (empfohlen)

So schreiben Sie DROP TABLE in verschiedene Datenbanken

JS removeAttribute()-Methode zum Löschen eines Attributs eines Elements

Eine kurze Diskussion über die perfekte Anpassungslösung für das mobile Vue-Terminal

Vue implementiert die Funktion zum Aufrufen der Handykamera und des Albums

Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 mit Bildern und Text

Häufige Ursachen und Lösungen für langsame MySQL-SQL-Anweisungen

Beherrschen Sie einfach die Verwendung horizontaler Zeilenanmerkungen und Codekommentare in HTML

Beispielcode zur Implementierung einer DIV-Aufhängung mit reinem CSS (feste Position)