In diesem Artikel wird ein Framework eingeführt, das so einfach ist, dass er nicht einfacher sein kann.
Schauen wir uns zunächst die Seitenkomposition dieses Frameworks an. Da es sich um ein rein manuelles Testprogramm handelt, habe ich gerade einen Code in Notepa ++ erstellt, was sehr skizzenhaft ist. Aber es enthält immer noch den allgemeinen Inhalt im Frameset. OK, lassen Sie uns wieder auf den Punkt kommen und sich zuerst die Komposition der Datei ansehen.
1.Frame.html enthält die Struktur des Frameworks
2.Link.html enthält die Menüleiste auf der linken Seite des Rahmens
3.Firstpage.html enthält eine Textzeile auf der Hauptseite des Frameworks (ich bin faul und ich habe es nicht gut gemacht)
4.SecondPage.html ähnelt dem oben genannten 3 und wird zum Testen verwendet.
Unten ist ein Screenshot (nicht klar, ich mache das zum ersten Mal)
Schauen wir uns den Code in Frame.htm an:
<html>
<kopf>
</head>
<Frameset cols = 159px,*>
<Frame Name = a1 Src = link.html noresize = yes border = 1px scrolling = auto borderColor = blau>
<Frame Name = A2 Src = Firstpage.html>
</Frameset>
</html>
Fühlt es sich nicht sehr einfach an? Es besteht hauptsächlich aus einem Frameset -Element, und dann wird das Attribut cols = 159px* gesetzt. Der Zweck dieser Eigenschaft ist es, die Seite in 159px und zwei weitere Bereiche zu unterteilen. Wie im Bild oben gezeigt.
Dann gibt es das Rahmen -Tag. Das obige Cols -Attribut hat mehrere Werte. Die folgenden <Rahmen> untergeordneten Elemente sollten auch mehrere entsprechende Werte aufweisen. Dann gibt es einige gemeinsame Attribute von <Reframe>. Einschließlich der Breite des Randes, ob Scroll -Balken erscheinen, Grenzfarbe und ob der Benutzer die Größe ändern darf. Welche Quelldatei ist usw.
Dann zeigt die zweite Quelldatei als Test auf Firstpage.
Als nächstes kommt link.html:
<style type = text/css>
<!-
*{Margin: 0; Polster: 0; Grenze: 0;}
Körper {
Schriftfamilie: Arial, Serife, Serif;
Schriftgröße: 12px;
}
#nav {
Breite: 180px;
Zeilenhöhe: 24px;
Typ-Typ-Typ: Keine;
Text-Align: links;
/*Definieren Sie die Linienhöhe und die Hintergrundfarbe des gesamten UL -Menüs*/
}
/*============================================================*/////
#nav a {
Breite: 160px;
Anzeige: Block;
Padding-Links: 20px;
/*Breite (Muss), sonst wird der LI unten deform*/
}
#nav li {
Hintergrund: #CCC; /*Hintergrundfarbe des Verzeichnisses erster Ebene*/
Border-Bottom: #fff 1px Solid; /*Eine weiße Kante unten*///
float: links;
/*float: links, sollte nicht eingestellt werden, aber es kann nicht normal in Firefox angezeigt werden.
Wenn Li die Breite des NANs erbt und die Breite begrenzt, erstreckt sich li automatisch nach unten*/
}
#nav li a: hover {
Hintergrund:#CC0000; /*Die Hintergrundfarbe, die im Verzeichnis erster Ebene angezeigt wird.
}
#nav a: link {
Farbe:#666; Textdekoration: Keine;
}
#nav a: besucht {
Farbe:#666; Textdekoration: Keine;
}
#NAV A: Hover {
Farbe: #fff; Textdekoration: Keine; Schriftgewicht: fett;
}
/*=======================================================*///////////////////
#nav li ul {
Listenstil: Keine;
Text-Align: links;
}
#nav li ul li {
Hintergrund: #ebebeb; /*Hintergrundfarbe des Sekundärverzeichnisses*/
}
#nav li ul a {
Padding-Links: 10px;
Breite: 160px;
/* padding-links-Sekundärverzeichnis Chinesische Zeichen bewegen
}
/*Folgendes ist der Linkstil des Sekundärverzeichnisses*/
#nav li ul a: link {
Farbe:#666; Textdekoration: Keine;
}
#nav li ul a: besucht {
Farbe:#666; Textdekoration: Keine;
}
#nav li ul a: hover {
Farbe:#f3f3f3;
Textdekoration: Keine;
Schriftgewicht: normal;
Hintergrund:#CC0000;
/* Schriftfarbe und Hintergrundfarbe der sekundären Onmouseover*///
}
/*===========================================*///////////////////////
#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%;
}
</style>
<div id = parent>
<ul id = nav>
<li> <a href =#mseu = cindMenu1 onclick = domenu ('cindMenu1')> Meine Website </a>
<ul id = cindmenu1 class = zusammengebrochen>
<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 =#mseu = cindMenu2 onclick = domenu ('cindMenu2')> Mein Konto </a>
<ul id = cindmenu2 class = zusammengebrochen>
<a href =#> pay </a> </li>
<li> <a href =#> Management </a> </li>
<li> <a href =#> Online -Zahlung </a> </li>
<li> <a href =#> Register -Überweisung </a> </li>
<li> <a href =#> online gefunden </a> </li>
<li> <a href =#> Historische Konten </a> </li>
</ul>
</li>
<li> <a href =#mseu = cindMenu3 onclick = domenu ('cindMenu3')> Website -Management </a>
<ul id = kindemu3 class = zusammengebrochen>
<li> <a href =#> login </a> </li>
<a href =#> Rollenmanagement </a> </li>
<li> <a href =#> Benutzerverwaltung </a> </li>
</ul>
</li>
</ul>
</div>
<script type = 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 = function () {
this.className + = (this.className.length> 0? :) + sfHover;
}
obj [i] .onmouseDown = function () {
this.className + = (this.className.length> 0? :) + sfHover;
}
obj [i] .onmouseUp = function () {
this.className + = (this.className.length> 0? :) + sfHover;
}
obj [i] .onmouseout = function () {
this.className = this.className.Replace (neuer Regexp ((? |^) sfHover // b),);
}
}
}
Funktion Domenu (Emid)
{
var obj = document.getElementById (emid);
obj.className = (obj.className.tolowerCase () == erweitert? Collabed: erweitert);
if ((lastLeftid! =) && (emid! = lastLeftid)) // das vorherige Menü schließen
{
document.getElementById (lastLeftid) .className = collaped;
}
LastLeftid = emid;
}
Funktion getMenuid ()
{
var mseuId =;
var _paramstr = new String (window.location.href);
var _sharppos = _paramstr.indexof (#);
if (_sharppos> = 0 && _sharppos <_paramstr.length - 1)
{
_paramstr = _paramstr.substring (_sharppos + 1, _paramstr.length);
}
anders
{
_paramstr =;
}
if (_paramstr.length> 0)
{
var _paramarr = _paramstr.split (&);
if (_paramarr.length> 0)
{
var _paramkeyval = _paramarr [0] .Split (=);
if (_paramkeyval.length> 0)
{
Mssuid = _paramkeyval [1];
}
}
}
if (MenüId! =)
{
Domenu (MenüId)
}
}
GetMenuid (); //* Bitte achten Sie auf die Reihenfolge dieser beiden Funktionen, da Andern
Menufix ();
->
</script>
Das ist eigentlich faul. Es handelt sich um ein Dropdown-Menü von Div+CSS+JS, das im Internet zu finden ist. Wenn Sie interessiert sind, können Sie es sich selbst ansehen. Ich habe das Gefühl, dass ich es selbst benutzen kann und es wird in Ordnung sein, zu wissen, wie man es modifiziert.
Hier sind zwei Testseiten. Da selbst diejenigen, die ein bisschen HTML kennen, sie ausschreiben können, wird hier nur der Code für Seite 1 veröffentlicht:
<html>
<kopf>
<title> Erste Seite </title>
<Styles>
</style>
</head>
<body>
<h1> Erste Seite </h1>
</body>
</html>
Ich denke, der Meister wird sich erbrechen, wenn er das sieht, und er muss gesagt haben, dass es sehr Müll ist, aber er zeichnet nur die kleinen Dinge auf, die er gemacht hat. Haha, vergib mir.