Cet article présente un cadre si simple qu'il ne peut pas être plus simple.
Examinons d'abord la composition de la page de ce cadre. Comme il s'agit d'un programme de test purement manuel, je viens de faire du code dans NOTEPA ++, ce qui est très sommaire. Mais il contient toujours le contenu général dans le cadre de cadres. Ok, revenons au point, examinons d'abord la composition du fichier.
1.Frame.html contient la structure du cadre
2.Link.html contient la barre de menu sur le côté gauche du cadre
3.Firstpage.html contient une ligne de texte sur la page principale du cadre (je suis paresseux et je ne l'ai pas bien fait)
4.SecondPage.html est similaire à celle ci-dessus et est utilisé pour les tests.
Vous trouverez ci-dessous une capture d'écran (pas clair, je fais ça pour la première fois)
Jetons un coup d'œil au code dans frame.htm:
<html>
<adal>
</ head>
<frameset Cols = 159px, *>
<frame name = a1 src = link.html noresize = oui border = 1px défilement = auto borderColor = blue>
<frame name = a2 src = firstpage.html>
</ FrameSet>
</html>
Cela ne semble-t-il pas très simple? Il se compose principalement d'un élément de jeu de cadres, puis l'attribut Cols = 159px, * est défini. Le but de cette propriété est de diviser la page en 159px et deux autres domaines. Comme indiqué dans l'image ci-dessus.
Ensuite, il y a la balise de cadre. L'attribut COLS ci-dessus a plusieurs valeurs. Les éléments enfants <trame> ci-dessous devraient également avoir plusieurs valeurs correspondantes. Ensuite, il y a quelques attributs communs de <Frame>. Y compris la largeur de la bordure, si les barres de défilement apparaissent, la couleur de la bordure et si l'utilisateur est autorisé à modifier la taille. Quel fichier source est, etc.
Ensuite, le deuxième fichier source pointe vers FirstPage comme test.
Ensuite, Link.html:
<style type = text / css>
<! -
* {marge: 0; rembourrage: 0; bordure: 0;}
corps {
Font-Family: Arial, Serif, Serif;
taille de police: 12px;
}
#nav {
Largeur: 180px;
hauteur de ligne: 24px;
Type de style liste: aucun;
Texte-aligne: gauche;
/ * Définissez la hauteur de ligne et la couleur d'arrière-plan de l'ensemble du menu UL * /
}
/ * =================================================.
#nav a {
Largeur: 160px;
Affichage: bloc;
Padding-Left: 20px;
/ * Largeur (MUST), sinon le Li ci-dessous déformera * /
}
#nav li {
Contexte: #ccc; / * Couleur d'arrière-plan du répertoire de premier niveau * /
Border-Bottom: #fff 1px solide; / * Un bord blanc en dessous * /
flottant: à gauche;
/ * float: à gauche, ne doit pas être réglé, mais il ne peut pas être affiché normalement dans Firefox.
Héritage de la largeur de la navigation, limitant la largeur, Li s'étend automatiquement vers le bas * /
}
#nav li a: hover {
Contexte: # CC0000; / * La couleur d'arrière-plan affichée par répertoire de premier niveau OnMouseover * /
}
#nav a: lien {
Couleur: # 666; Décoration du texte: aucune;
}
#nav a: visité {
Couleur: # 666; text-décoration: Aucun;
}
#NAV A: Hover {
Couleur: #FFF; Text-Decoration: Aucun; Font-Weight: Bold;
}
/ * ====================================================.
#nav li ul {
Style de liste: aucun;
Texte-aligne: gauche;
}
#nav li ul li {
Contexte: #EBEBEB; / * Couleur d'arrière-plan du répertoire secondaire * /
}
#nav li ul a {
padding-gauche: 10px;
Largeur: 160px;
/ * Padding-gauche répertoire secondaire Les caractères chinois se déplacent vers la droite, mais la largeur doit être réinitialisée = (largeur totale-padding-left) * /
}
/ * Ce qui suit est le style de lien du répertoire secondaire * /
#nav li ul a: lien {
Couleur: # 666; Décoration du texte: aucune;
}
#nav li ul a: visité {
Couleur: # 666; text-décoration: Aucun;
}
#nav li ul a: hover {
Couleur: # F3F3F3;
Décoration du texte: aucune;
Police-poids: normal;
Contexte: # CC0000;
/ * Couleur de police et couleur d'arrière-plan de OnMouseover secondaire * / /
}
/ * =========================================.
#nav li: planer ul {
Gauche: Auto;
}
#nav li.sfhover ul {
Gauche: Auto;
}
#contenu {
Clear: à gauche;
}
#nav ul.collapsed {
Affichage: aucun;
}
->
#MÈRE{
Largeur: 180px;
}
*#MÈRE{
Largeur: 100%;
}
</ style>
<div id = parent>
<ul id = nav>
<li> <a href = # menu = ChildMenu1 onClick = Domenu ('ChildMenu1')> mon site Web </a>
<ul id = childmenu1 class = effondré>
<li> <a href = firstpage.html cible = a2> première page </a> </li>
<li> <a href = secondpage.html cible = a2> deuxième page </a> </li>
</ul>
</li>
<li> <a href = # menu = childmenu2 onclick = domenu ('childmenu2')> mon compte </a>
<ul id = childmenu2 class = effondré>
<a href = #> payer </a> </li>
<li> <a href = #> gestion </a> </li>
<li> <a href = #> Paiement en ligne </a> </li>
<li> <a href = #> Registre des remises </a> </li>
<li> <a href = #> en ligne trouvé </a> </li>
<li> <a href = #> Comptes historiques </a> </li>
</ul>
</li>
<li> <a href = # menu = ChildMenu3 onClick = Domenu ('ChildMenu3')> Gestion du site Web </a>
<ul id = childmenu3 class = effondré>
<li> <a href = #> Connexion </a> </li>
<a href = #> Gestion des rôles </a> </li>
<li> <a href = #> Gestion des utilisateurs </a> </li>
</ul>
</li>
</ul>
</div>
<script type = text / javascript>
<! -
var lastleftid =;
fonction menufix () {
var obj = document.getElementById (nav) .getElementsByTagName (li);
pour (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 (new regexp ((? | ^) sfhover // b),);
}
}
}
Fonction Domenu (EMID)
{
var obj = document.getElementById (emid);
obj.classname = (obj.classname.tolowercase () == élargi? Effondu: étendu);
if ((lastleftid! =) && (emid! = LastLeftid)) // Fermez le menu précédent
{
document.getElementById (LastLefTID) .className = effondrement;
}
LastLeftid = emid;
}
fonction getMenuid ()
{
var menuID =;
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);
}
autre
{
_Paramstr =;
}
if (_paramstr.length> 0)
{
var _paramarr = _paramstr.split (&);
if (_paramarr.length> 0)
{
var _paramkeyval = _paramarr [0] .split (=);
if (_paramkeyval.length> 0)
{
MenuID = _ParamKeyVal [1];
}
}
}
if (menuId! =)
{
Domenu (menuID)
}
}
GetMenuid (); // * Veuillez prêter attention à l'ordre de ces deux fonctions, sinon getMenuid () n'aura aucun effet dans Firefox
Menufix ();
->
</cript>
C'est en fait paresseux. Il s'agit d'un menu déroulant fabriqué par Div + CSS + JS trouvé sur Internet. Si vous êtes intéressé, vous pouvez y jeter un œil vous-même. Je pense que je peux l'utiliser moi-même, et ce sera OK de savoir comment le changer.
Voici deux pages de test. Étant donné que même ceux qui connaissent un peu de HTML peuvent les écrire, seul le code de la page 1 est publié ici:
<html>
<adal>
<Title> Première page </TITME>
<style>
</ style>
</ head>
<body>
<h1> Première page </h1>
</docy>
</html>
Je suppose que le maître vomira quand il le verra, et il a dû dire que c'est très poubelle, mais il enregistre juste les petites choses qu'il a faites. Haha, pardonne-moi.