Beispielcode für HTML-Framesets

Beispielcode für HTML-Framesets

Dieser Artikel stellt ein möglichst einfaches Framework von Frameset vor.

Schauen wir uns zunächst die Seitenstruktur dieses Frameworks an. Da es sich um ein rein manuelles Testprogramm handelt, habe ich einfach etwas Code in Notepa++ erstellt, der sehr grob ist. Es enthält aber weiterhin den allgemeinen Inhalt des Framesets. Okay, kommen wir zurück zum Thema und schauen uns zunächst die Dateistruktur an.

1.Frame.html enthält die Struktur des Rahmens

2.link.html enthält die Menüleiste auf der linken Seite des Frames

3.firstPage.html enthält eine Textzeile für die Hauptseite des Frameworks (ich bin faul und habe es nicht gut gemacht)

4.secondPage.html ist ähnlich wie 3 oben und wird zu Tests verwendet.

Hier ist ein Screenshot (nicht klar, mache ich zum ersten Mal)

Schauen wir uns den Code in Frame.htm an:

<html>
<Kopf>
</Kopf>
<frameset cols="159px,*">
<frame name="a1" src="link.html" noresize="ja" border="1px" scrolling="auto" bordercolor="blau" >
<frame name="a2" src="ersteSeite.html">
</frameset>
</html>

Fühlt es sich nicht einfach an? Es handelt sich dabei in erster Linie um ein Frameset-Element, wobei dann das Attribut cols="159px,*" gesetzt wird. Der Zweck dieses Attributs besteht darin, die Seite in 159 Pixel und zwei weitere Bereiche zu unterteilen. Wie im Bild oben gezeigt.

Dann kommt das Frame-Tag. Das cols-Attribut oben hat mehrere Werte, und die <frame>-Unterelemente unten sollten die gleiche Anzahl an Werten haben. Dann gibt es einige allgemeine Attribute von <frame>. Einschließlich der Breite des Rahmens, ob eine Bildlaufleiste angezeigt wird, der Rahmenfarbe und ob der Benutzer die Größe ändern darf. Um welche Quelldatei handelt es sich usw.

Dann verweist die zweite Quelldatei zum Testen auf firstPage.

Als nächstes kommt link.html:

<style type="text/css">
<!--
*{Rand:0;Polsterung:0;Rahmen:0;}
Körper {
Schriftfamilie: Arial, Serif, Serif;
Schriftgröße: 12px;
}
#nav {
Breite: 180px;
Zeilenhöhe: 24px;
Listenstiltyp: keiner;
Textausrichtung: links;
/*Definieren Sie die Zeilenhöhe und Hintergrundfarbe des gesamten UL-Menüs*/
}
/*===================Verzeichnis der ersten Ebene====================*/
#nav ein {
Breite: 160px;
Anzeige: Block;
Polsterung links: 20px;
/*Breite (muss sein), sonst wird das Li darunter deformiert*/
}
#nav li {
background:#CCC; /*Hintergrundfarbe des Verzeichnisses der ersten Ebene*/
border-bottom:#FFF 1px solid; /*weißer Rand unten*/
schweben: links;
/*float: left, sollte nicht gesetzt werden, kann aber in Firefox nicht normal angezeigt werden
Übernimm die Breite von Nav, begrenze die Breite und li wird automatisch nach unten erweitert*/
}
#nav li a:hover{
background:#CC0000; /*Hintergrundfarbe, die beim Überfahren mit der Maus im Verzeichnis der ersten Ebene angezeigt wird*/
}
#nav a:link {
Farbe: #666; Textdekoration: keine;
}
#nav a:besucht {
Farbe: #666; Textdekoration: keine;
}
#nav a:hover {
Farbe: #FFF; Textdekoration: keine; Schriftstärke: fett;
}
/*===================Sekundäres Verzeichnis====================*/
#nav li ul {
Listenstil: keiner;
Textausrichtung: links;
}
#nav li ul li {
Hintergrund: #EBEBEB; /*Hintergrundfarbe des sekundären Verzeichnisses*/
}
#nav li ul a{
Polsterung links: 10px;
Breite: 160px;
/* Der Text im sekundären Verzeichnis „padding-left“ wird nach rechts verschoben, aber die Breite muss zurückgesetzt werden = (Gesamtbreite – padding-left)*/
}
/*Das Folgende ist der Linkstil des sekundären Verzeichnisses*/
#nav li ul a:link {
Farbe: Nr. 666; Textdekoration: keine;
}
#nav li ul a:besucht {
Farbe: #666; Textdekoration: keine;
}
#nav li ul a:hover {
Farbe: #F3F3F3;
Textdekoration: keine;
Schriftstärke: normal;
Hintergrund: #CC0000;
/* Sekundäre OnmouseOver-Schriftfarbe, Hintergrundfarbe*/
}
/*=================================*/
#nav li:hover ul {
links: auto;
}
#nav li.sfhover ul {
links: auto;
}
#Inhalt {
klar: links;
}
#nav ul.collapsed {
Anzeige: keine;
}
-->
#ELTERNTEIL{
Breite: 180px;
}
*#ELTERNTEIL{
Breite: 100 %;
}
</Stil>
<div id="ELTERN">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">Meine Website</a>
<ul id="Untermenü1" class="collapsed">
<li><a href="firstPage.html" target="a2">Erste Seite</a></li>
<li><a href="secondPage.html" target="a2">Zweite Seite</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">Mein Konto</a>
<ul id="Untermenü2" class="collapsed">
<a href="#">Zahlung</a></li>
<li><a href="#">Verwaltung</a></li>
<li><a href="#">Online-Zahlung</a></li>
<li><a href="#">Für Überweisung registrieren</a></li>
<li><a href="#">Online gefunden</a></li>
<li><a href="#">Historische Berichte</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">Website-Verwaltung</a>
<ul id="Untermenü3" class="collapsed">
<li><a href="#">Anmelden</a></li>
<a href="#">Rollenverwaltung</a></li>
<li><a href="#">Benutzerverwaltung</a></li>
</ul>
</li>
</ul>
</div>
<Skripttyp=Text/Javascript>
<!--
var LastLeftID = "";
Funktion menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");

für (var i=0; i<obj.length; i++) {
obj[i].onmouseover=Funktion() {
dieser.Klassenname+=(dieser.Klassenname.Länge>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=Funktion() {
dieser.Klassenname+=(dieser.Klassenname.Länge>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=Funktion() {
dieser.Klassenname+=(dieser.Klassenname.Länge>0? " ": "") + "sfhover";
}
obj[i].onmouseout=Funktion() {
dies.className=dieses.className.replace(neuer RegExp("( ?|^)sfhover\\b"), "");
}
}
}
Funktion DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "erweitert"?"collapsed":"erweitert");
if((LastLeftID!="")&&(emid!=LastLeftID)) //Schließe das vorherige Menü
{
document.getElementById(LastLeftID).className = "reduziert";
}
LastLeftID = emid;
}
Funktion GetMenuID()
{
var MenüID="";
var _paramStr = neuer String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");

wenn (_sharpPos >= 0 und _sharpPos < _paramStr.length - 1)
{
_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
}
anders
{
_paramStr = "";
}

wenn (_paramStr.length > 0)
{
var _paramArr = _paramStr.split("&");
wenn (_paramArr.length>0)
{
var _paramKeyVal = _paramArr[0].split("=");
wenn (_paramKeyVal.length>0)
{
MenüID = _paramKeyVal[1];
}
}
}

wenn(MenüID!="")
{
DoMenu(Menü-ID)
}
}
GetMenuID(); //*Achten Sie auf die Reihenfolge dieser beiden Funktionen, sonst funktioniert GetMenuID() in Firefox nicht
MenüFix();
-->
</Skript>

Das ist eigentlich nur eine faule Idee. Ich habe ein Dropdown-Menü mit DIV+CSS+JS erstellt, das ich im Internet gefunden habe. Wenn Sie interessiert sind, können Sie es sich selbst ansehen. Ich denke, ich kann es verwenden und es wird in Ordnung sein, solange ich weiß, wie ich es ändern kann.

Nachfolgend sind zwei Testseiten aufgeführt. Da jeder, der ein wenig HTML kennt, eine Testseite schreiben kann, werde ich hier nur den Code für Seite 1 veröffentlichen:

<html>
<Kopf>
<title>Erste Seite</title>
<Stil>
</Stil>
</Kopf>
<Text>
<h1>Erste Seite</h1>
</body>
</html>

Ich schätze, allen Experten würde beim Anblick das Kotzen ins Gesicht fallen und sie würden sagen, das sei Blödsinn, aber es ist nur eine Aufzeichnung der kleinen Dinge, die ich gemacht habe. Haha, das tut mir leid.

<<:  Lösung für die Docker-Befehlsausnahme „Zugriff verweigert“

>>:  Analysieren Sie die Verwendung und Prinzipien von Vues Bereitstellung und Injektion

Artikel empfehlen

Detaillierte Schritte zum Upgrade von mysql8.0.11 auf mysql8.0.17 unter Win2008

Upgrade-Hintergrund: Um die Sicherheitslücke in d...

Detaillierte Installations- und Konfigurationsschritte für die MySQL 5.7-Zip-Version (Zip-Version)

Vorwort: Ich habe Win10 neu installiert und gleic...

Grundprinzipien des skalierbaren MySQL-Designs

Inhaltsverzeichnis Vorwort 1. Was ist Skalierbark...

Grafisches Tutorial zur Installation von MySQL 8.0.15 und Datenbankgrundlagen

Die Installation der MySQL-Software und die Daten...

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort Manchmal habe ich das Gefühl, dass die na...

Diskussion über die Möglichkeit zum Öffnen von Website-Hyperlinks

Ein neues Fenster wird geöffnet. Vorteile: Wenn d...

Welche Bilddateiformate gibt es und wie wählt man sie aus?

1. Welche drei Formate? Dies sind: gif, jpg und pn...

Detaillierte Einführung in die Chrome-Entwicklertools - Zeitleiste

1. Übersicht Benutzer erwarten, dass die Webanwen...

Einführung in gängige MySQL-Speicher-Engines sowie Parametereinstellung und -optimierung

MyISAM, eine häufig verwendete Speicher-Engine in...

Lassen Sie uns ausführlich über die Requisitenattribute von Komponenten in Vue sprechen

Inhaltsverzeichnis Frage 1: Wie werden Requisiten...

Wie kann das Front-End die 100.000 vom Back-End zurückgegebenen Daten besser anzeigen?

Inhaltsverzeichnis Vorarbeit Backend-Konstruktion...

Detaillierte Erklärung zur Abfrage von Feldern im JSON-Format in MySQL

Während des Entwicklungsprozesses trat eine Anfor...

12 Javascript-Tabellensteuerelemente (DataGrid) sind aussortiert

Wenn die DataSource-Eigenschaft eines DataGrid-Ste...

Jenkins erstellt Docker-Images und überträgt sie in das Harbor-Warehouse.

Inhaltsverzeichnis Docker-Datei pom.xml Jenkins-K...

Zusammenfassung neuer Anwendungsbeispiele für Calculated in Vue3

Die Verwendung von „Computed“ in vue3. Da vue3 mi...