Wulin.com (www.vevb.com) Artikel Einführung: Webseiten -Produktionsfähigkeiten: XHTML, CSS und JS.
Details 1 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….1. Wenn sich der Text und das Bild in derselben Zeile befinden, muss der Text mit der Unterseite des Bildes in Einklang gebracht werden, und er muss so geschrieben werden:
<li> Denken Sie an das Passwort <img src = align = boden style = margin-bottom: -4px/> </li>
2. Wenn sich der Text und das Bild in derselben Zeile befinden, müssen der Text und das Bild so zentriert und geschrieben werden:
<li> Denken Sie an das Passwort <img src = static/img/xyx.jpg Align = Middle/> </li>
3. Ändern Sie den Editor, der im Menü "IE -Quellcode anzeigen Quellcode" geöffnet wurde
Öffnen Sie den Registrierungsredakteur und geben Sie in Start-Run Rainedit ein
Suchen Sie den folgenden Ort: HKEY_LOCAL_MACHINESOFTWARMIMOSOFT INTERNETRORVIEWiew Sourceitoreditor -Name Ändern Sie die Standarddaten in D: Program Fileemeditoremeditor.exe.exe
Wechseln Sie zu IE, um den Quellcode anzuzeigen, und Sie können den Effekt sehen.
Wenn das Element des Namens der Ansichtsquelle der Redaktionsförderer nicht enthält, können Sie es selbst erstellen.
4. Maximieren Sie das Fenster automatisch und fügen Sie zwischen <body> und </body> hinzu:
<Script Language = JavaScript>
setTimeout ('top.moveto (0,0)', 5000);
setTimeout ('top.Resizeto (screen.availwidth, screen.availHeight)', 5000);
< /script>
5. Fenster. Opener ist eigentlich die übergeordnete Form des mit Fenster geöffneten Formulars. Open.
Beispiel
Es bedeutet übergeordnete Form, Sie können den Wert des übergeordneten Formulars festlegen oder die JS -Methode auf diese Weise aufrufen.
1, window.opener.test (); --- Rufen Sie die methode test () in der übergeordneten Form an;
2. Wenn window.opener existiert, setzen Sie den Wert von StockBox in ParentForm ein.
if (window.opener &&! window.opener.closed)
{
window.opener.document.parentForm.StockBox.Value = Symbol;
}
6. Wie man die Seite aktualisiert
So aktualisieren Sie die Seite in JavaScript:
1 history.go (0)
2 Standort.Reload ()
3 Standort = Ort
4 Standort.Sign (Ort)
5 Document.execcommand ('Aktualisieren')
6 Fenster.Navigiert (Standort)
7 Standort.Replace (Ort)
8 document.url = location.href
So aktualisieren Sie die Seite automatisch:
1. Automatische Seite Aktualisierung: Fügen Sie <meta http-äquiv = aktualisiertes Inhalt = 20> zum <kopf>-Bereich hinzu
2. Automatischer Seitensprung: Fügen Sie <meta http-äquiv = aktualisiert Inhalt = 20; url = http: //www.webjx.com> zum <kopf>-Bereich hinzu
3.js aktualisieren die Seite automatisch
<script Language = JavaScript>
Funktion myrefresh ()
{
window.location.reload ();
}
setTimeout ('myrefresh ()', 1000); // Aktualisieren Sie die Aktualisierung einmal in 1 Sekunde an
< /script>
4.js Refresh Framework
a) Aktualisieren Sie die Seite mit dem Rahmen für
<script Language = JavaScript>
parent.location.reload ();
< /script>
b) Das untergeordnete Fenster aktualisiert das übergeordnete Fenster
<script Language = JavaScript>
self.opener.location.reload ();
< /script>
(oder <a href = javaScript: opener.location.reload ()> aktualisieren </a>)
c) Aktualisieren Sie die Seite eines anderen Rahmens
<script Language = JavaScript>
parent.another Framid.location.reload ();
< /script>
7. Wenn Sie CSS -Hacks verwendet haben, sollten Sie wissen, dass die Benennung mit Unterstrichen ein Hack ist. Wenn Sie _Style verwenden, können die meisten Browser außerhalb der Definition dieses Stils ignorieren, sodass _ als Trennzeichen bei der Benennung nicht standardisiert wird. Bei CSS -Überprüfungen wird eine Fehlermeldung angezeigt.
8. dh bedingte Annotationsschreibmethode
<!-[wenn! dh]> es kann erkannt werden, außer dh <! [endif]->
<!-[Wenn dh]> alle IES identifizierbar <! [endif]->
<!-[wenn dh 5.0]> nur dh 5.0 kann <! [endif]-> erkennen
9. CSS -Hack -Schreibmethode
Der erste Typ:
.div {
Hintergrund: Orange;
*Hintergrund: Grün! Wichtig;
*Hintergrund: Blau;
}
Der zweite Typ:
.div {
Rand: 10px;
*Rand: 15px;
_margin: 15px;
}
Der dritte Typ:
#div {color: #333; }
*+html #div {color: #999; }
* html #div {color: #666; }
Details 2 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1. IE6 und die folgenden Erkennung nicht die: Hover-Pseudo-Klasse außerhalb des Tags. In Firefox, IE7, kann der Effekt korrekt erreicht werden. Lösung:
#show li.s1 {Border: 1px solide #ff9900; Hintergrund:#454242;}
#show li.s2 {Border: 1px solide #d9d8d8; Hintergrund:#312e2e;}
<li> </li>
2. Setzen Sie Haslayout für Elemente
Viele IE6- (oder IE7) Probleme können gelöst werden, indem der Haslayout -Wert festgelegt wird. Der einfachste Weg, den Haslayout -Wert für ein Element festzulegen, besteht darin, die Höhe oder Breite von CSS hinzuzufügen (natürlich kann Zoom auch verwendet werden, aber dies ist nicht Teil von CSS). Zum Beispiel auf Höhe einstellen: 1%. Wenn das übergeordnete Element die Höhe nicht festlegt, ändert sich die physikalische Höhe des Elements nicht, aber es hat bereits die Haslayout -Eigenschaft.
3. Charaktere erscheinen wiederholt in IE6
Stellen Sie sicher, dass diese Anzeige: Inline auf das schwimmende Element eingestellt ist.
Verwenden Sie Rand-Rechts: -3px in schwimmenden Elementen;
4. Stile Priorität
1. Inline -Stil [1.0.0.0]
2. ID -Selektor [0.1.0.0]
3. Klasse, Attribut, Pseudo-Klasse-Selektor [0.0.1.0]
4. Element Tags, Pseudo-Element-Selektor [0.0.0.1]
5. CSS -Schreibmethode für vertikal zentrierte ein Element
#exm {
Position: absolut;
Links: 50%;
Top: 50%;
Z-Index: 1;
Breite: 200px;
Höhe: 100px;
Rand-Links: -100px;
Rand: -52px;
}
6. Zoom: Normal | Nummer
Setzt oder ruft das Skalierungsverhältnis des Objekts fest. Das Einstellen oder Ändern dieses Eigenschaftswerts für ein Objekt, das gerendert wurde, führt dazu, dass der Inhalt des Objekts erneut fließt. Obwohl diese Eigenschaft nicht vererbt ist, wirkt sich alle Kinderobjekte des Objekts (Kinder) aus.
7. Wenn das Bild und der Text nebeneinander angeordnet sind, sollte der Bildtext vertikal zentriert sein:
1> Zeilenhöhe einstellen: auf die Höhe des Bildes oder die Höhe des übergeordneten Elements des Bildes.
2> dann vertikal-align: Mitte in den CSS des Bildes;
8. Wenn das LI -Element ein IMG -Element enthält, erscheint unter IE6 ein Leerzeichen
Lösung 1
Machen Sie Li schwebend und stellen Sie IMG auf Block-Ebene-Element ein
Lösung 2
Setzen Sie die Schriftgröße von UL: 0;
Lösung 3
Setzen Sie IMGs vertikaler Align: unten;
Lösung 4
Stellen Sie den Randboden von IMG: -5px fest;
Details 3 …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1. Die Hyperlink -Stile, die durch Klicken besucht wurden
Lösung: Ändern Sie die Reihenfolge der CSS -Attribute: LVHA
2. kontinuierliche lange Felder unter FF können nicht automatisch eingewickelt werden
Lösung: Word-Wrap: Break-Wort; Überlauf: versteckt;
3. Die Höhe des übergeordneten Containers kann nicht unter FF anpassbar sein
Lösung: Löschen Sie das Schwimmen von Kinderelementen
4.. Eine Lücke wird unter dem Bild unter IE erzeugt
Lösung: Definieren Sie IMG als Anzeige: Block oder vertikale Ausrichtung als obere/boden/mittlere/textboot
Definieren Sie die Schriftgröße des übergeordneten Containers auf Null, Schriftgröße: 0
5. Es gibt einen 3px-Lücken zwischen dem schwimmenden Element unter IE6 und seinem angrenzenden nicht schwebenden Element.
Lösung: Nebenschwache Elemente sind ebenfalls auf Schwimmer eingestellt.
Schwimmende Elemente sind im Vergleich zu IE6_Margin-Right: -3px definiert;
6. Der Li -Inhalt wird in einer Ellipse angezeigt, nachdem es zu lang ist.
Lösung: weißer Raum: Nowrap; (Text wickelt nicht um) Text-Overflow: Ellipsis; -O-Text-Overflow: Ellipsis; Überlauf: versteckt;
7. Der Text kann nicht vertikal zentriert werden
Lösung: Leitungshöhe und Containerhöhe sind gleich linienhöhe = Höhe;
8. Das Texteingangsfeld kann nicht mit benachbarten Text ausgerichtet werden.
Lösung: Legen Sie das Texteingangsfeld vertikaler Align ein: Mitte;
9. dh den Scroll -Barstil festgelegt
Lösung:
Körper{
Scrollbar-Face-Farben:#f6f6f6;
Scrollbar-Highlight-Farbe: #fff;
Scrollbar-Shadow-Farbe: #eeeeeee;
ScrollBar-3Dlight-Color: #eeeeeee;
Scrollbar-Arrow-Farbe:#000;
Scrollbar-Track-Color: #ffff;
Scrollbar-Darkshadow-Farbe: #fff;
}
10. IE6 kann Container nicht mit einer Höhe von 1px definieren
Lösung: Überlauf: versteckt
Zoom: 0,8
Zeilenhöhe: 1PX
Details 4 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1. Lassen Sie die Ebene auf dem Blitz angezeigt werden
Lösung: Setzen Sie transparent <param name = wmode value = transparent /> oder <param name = wmode value = opaque /> Für Flash
2. Machen Sie eine Schicht vertikal im Browser zentriert
Lösung: Verwenden Sie prozentuale absolute Positionierung mit negativen Werten externer Patches.
Position: absolut;
Top: 50%;
Links: 50%;
Rand: -100px Auto Auto -100px;
Breite: 200px;
Höhe: 200px;
3.. Favoriten hinzufügen
Lösung: <Skript type = text/javaScript>
// <! [Cdata [
Funktion bookmark () {
var title = document.title
var url = document.location.href
if (window.sideBar) window.sideBar.addpanel (Titel, URL,);
else if (window.opera && window.print) {
var mbm = document.create_r_relement_x ('a');
mbm.setattribute ('rel', 'Seitenleiste');
mbm.setattribute ('href', url);
mbm.setattribute ('title', title);
mbm.click ();}
sonst if (document.all) window.external.addfavorite (URL, Titel);
}
//]]>
< /script>
<a href = javaScript: bookmark ()> zu favoriten add </a>
Details 5 …………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1. So schreiben Sie gemeinsame Nachrichtenlisten:
<ul class = list>
<li> <span> 6. Juni 2006 </span> <a href =#> Nachrichten Titel 01 </a> </li>
<li> <span> 6. Juni 2006 </span> <a href =#> Nachrichten Titel 02 </a> </li>
<li> <span> 6. Juni 2006 </span> <a href =#> Nachrichten Titel 03 </a> </li>
<li> <span> 6. Juni 2006 </span> <a href =#> Nachrichten Titel 04 </a> </li>
< /ul>
2.ie implementiert den Seitenhintergrund (FF und Chrome unterstützen nicht)
Von oben nach unten:
Body {Filter: Progid: DimaMagetransform.Microsoft.gradient (GradientType = 0, startColorStr =#ffffff, endColorStr =#000000);};}
Oben links nach unten rechts:
Filter: Alpha (Stil = 1, Deckkraft = 25, FinishoPacity = 100, startx = 50, Finishx = 100, starty = 50, dinvery = 100); Hintergrundfarbe: Skyblue;}
Von links nach rechts
Body {Filter: Progid: DimaMagetransform.Microsoft.gradient (GradientType = 1, startColorStr =#ffffff, endColorStr =#000000);};}
Von oben nach unten
style = filter: progid: diximagetransform.microsoft.gradient (gradientType = 0, startColorstr = blau, endColorstr = weiß);
3. Der Stil eines Schwebers erreicht eine Vielzahl von Effekten und kann flexibel verwendet werden
#Outer a {border: 1px solid #069;}
#OUENTER A: Hover {Border: 1PX gestrichelt #C00;}
4.Border: Keine; Unterschied von der Grenze: 0
Theoretische Leistungsunterschiede:
Grenze: 0; Setzen Sie den Rand auf 0 Pixel, obwohl es auf der Seite unsichtbar ist. Gemäß dem Grenzverlagerungswert wird der Browser weiterhin die Grenzbreite/Grenzfarbe wiederholt, dh der Speicherwert wurde besetzt. Grenze: Keine; Grenze auf keine festlegen, dh es gibt keine Rendering -Aktion, wenn der Browser keine analysiert, dh der Speicherwert wird nicht konsumiert.
Kompatibilitätsunterschiede:
Der Kompatibilitätsunterschied gilt nur für Browser IE6, IE7, Tag -Taste, Eingabe, und dies tritt unter den XP -Themen von Win, Win7 und Vista auf. Wenn keine Grenze ist, scheint es, dass die ungültige Grenze für IE6/7 noch existiert. Wenn die Grenze 0 ist, fühlt sie sich effektiver an als keine. Alle Browser verbergen konsequent den Rand.
Wie man Grenze macht: Keine; Voll kompatibel? Fügen Sie demselben Selektor einfach Hintergrundattribute hinzu
5.CSS implementiert das Multi-Säulen-Kontur-Layout, einen positiven inneren Rand und den negativen äußeren Rand
Wenden Sie Stile auf jede Spalte an, die eine Kontur erreichen muss: .e {padding-bottom: 32767px; Randboot: -32767px;}
6.Position: Relativ; besondere Verwendung? ? ? ?
* {Margin: 0; Padding: 0; Schrift: Normal 12px/25px Songti;}
Körper {Hintergrund:#f8f8f8;}
UL {Listenstil: Keine; Breite: 300px; Höhe: 25px; Rand: 20px Auto;}
li {float: links; Breite: 86px; Höhe: 25px; Text -Align: Mitte; Rand: 0 -5px; Anzeige: Inline;}
a {color: #ffff; Float: Links; Breite: 86px; Höhe: 25px; Oben: 0; links: 0; Hintergrund: URL (***. GIF) CENTER CENTER NO-Repeat;}
A: Hover {Farbe:#000; Hintergrund: URL (***. GIF) 0 0 NO-Repeat; Breite: 86px; Position: Relativ;}
Details 6 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1. InnerText: Inhalt von der Startposition bis zur Endposition enthält kein Tag Innerhtml
Outerhtml: Enthält Innerhtml und Tags
<div id = test> <span> test1 </span> test2 </div>
test.inNertext: test1 test2
test.innerhtml: <span> test1 </span> test2
test.outerhtml: <div id = test> <span> test1 </span> test2 </div>
2. Number (): Wenn eine Zeichenfolge, die nicht numerische Zeichen enthält, als Parameter verwendet wird, ist das Ergebnis NAN
ParseInt (): Konvertieren Sie die Zeichenfolge von links nach rechts in eine Zahl
isnan (): true true, wenn der Parameter keine Zahl ist;
3. A = 23,50ABC
Typof (a) = String
Parsefloat (a) = 23,5
ParseInt (a) = 23
Nummer (a) = nan
4. JS -Variablennamen enthalten Nummern
5. GetElementsByTagName_R () muss abgerufen werden, nachdem das Dokument geladen wurde
6. Nodetype: 12 Typen, 1 repräsentiert Elementknoten und 3 repräsentiert einen Textknoten
KnodeName: Repräsentiert den Knotennamen. Wenn es sich um einen Textknoten handelt, bedeutet dies #Text
NodeValue: Repräsentiert den Wert des Knotens
EG: Holen Sie sich den Knoten if (obj.nodename.tolowerCase () == 'li') {}
Ändern Sie den Textinhalt des P -Dokuments.
7. Elternknoten zum untergeordneten Knoten
Childnodes: Liste aller Kinderknoten im ersten Stufe im Element ohne tiefere Kinderknoten
obj.firstchild = obj.childnodes [0]
obj.lastchild = obj.childnodes [obj.childnodes.length-1]
HaSchildnodes () bestimmt, ob das Element Kinder hat und einen booleschen Wert zurückgibt
7. Kinderknoten zum übergeordneten Knoten
var parentelm = mylinkitem.parentnode;
while (parentelm, className! = 'syna' && parentelm! = 'document.body')
parentelm = parentelm.Parentnode
8. Elementeigenschaften ändern
1) Holen Sie sich oder in Form von Objekteigenschaften ein oder fest
var mainimage = document.getElementByIdx_x ('nav'). getElementsByTagName ['img'] [0];
mainimage.src = '';
Mainimage.;
2) Verwenden Sie GetAtTribute () und setAttribute () -Methoden
Details 7 ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1. Konvertieren Sie Zahlen in ein Formular mit x -Dezimalstellen -Funktionen (Basis, Präzision).
{var m = math.pow (10, precision);
var a = math.round (Basis*m)/m;
Rückkehr a;
}
var n = 3,942487;
Roundto (N, 3) = 3,942
Roundto (n, 0) = 3
2. Erstellen Sie eingeschränkte Zufallszahlen
Funktion Randombetween (min, max)
{return min+math.floor (math.random ()*(max-min+1))}}
3.. Zahlen in Saiten konvertieren
var a = 10;
a = string (a);/a = a.tostring ();
4. Codierung von URL
var a =? p = e;
var b = Escape (a);
var c = (b);
5. Ändern Sie die Art der Elemente im Dokument
p ---> div
Erstellen Sie zuerst ein DIV -Element, kopieren Sie dann den untergeordneten Knoten von P in das DIV und ersetzen Sie schließlich P durch DIV
6. Wie viele Parameter sind für eine Funktion erforderlich
Funktion add (n1, n2) {}
return num = add.length;
7. Wie viele Parameter werden in einer Funktion übergeben
Funktion add (n1, n2) {
Argumente zurückgeben. Länge;}
Details 8 ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………………………………………………………. …………………………………………………………………………………………………………………………………………………………………………………………………………….
1). Anzeige: Inline-Block; Wie der Name schon sagt, handelt es sich um eine Blockform in der Inline -Form, und die Höhenbreite kann eingestellt werden.
.Element-Klasse {
Anzeige: -moz-inline-Stack; // nur Code von Firefox
Anzeige: Inline-Block; // einige Standardbrowser
Zoom: 1; // nur dh nur
*Anzeige: Inline; // nur dh diesen Code kennen (CSS -Hack)
}
2) .Clean the Float
.ClearFix: Nach {Sichtbarkeit: versteckt; Anzeige: Block; Schriftgröße: 0; Inhalt:; klar: beide; Höhe: 0;}
.ClearFix {Zoom: 1;}
3). Fügen Sie in der Adressleiste ein benutzerdefiniertes Symbol hinzu
Zunächst müssen wir eine Symboldatei mit einer Größe von 16*16 Pixel vorbereiten. Die Dateierweiterung ist ICO und laden Sie sie in das entsprechende Verzeichnis hoch. Fügen Sie den folgenden Code zwischen der HTML -Quelldatei <Head> </head>: <link rel = Symbolname href = die Adresse des Bildes hinzu (beachten Sie, dass es dem Verzeichnis gerade jetzt entspricht). Natürlich ist es noch einfacher, wenn der Benutzer IE5 oder höher durchsucht. Laden Sie das Bild einfach in das Root -Verzeichnis der Website hoch und es kann automatisch erkannt werden!
4). Beim Einstellen des leeren Containers des Displays: Blocks leerer Container in IE6 auf eine kleinere Höhe, wie z. Lösung: Überlauf einstellen: versteckt.
5). Text wird mit Ellipsis abgeschnitten
div {width: 200px; Höhe: 100px; Überlauf: versteckt; Text-Overflow: Ellipsis; Weißraum: Nowrap;}