Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

1. Als ich heute eine Seite erstellte, stieß ich auf den Effekt der Pfeilzentrierung: Da ich den Klickbereich vergrößern wollte, verwendete ich „padding-top: 23 %“. Bei der Berechnung von 23 % gab es jedoch ein Problem. Nach Recherchen stellte sich heraus, dass der Prozentsatz der oberen Polsterung auf der Grundlage der Breite des übergeordneten Elements und nicht der Höhe berechnet wird. Ist das nicht seltsam? Welcher Experte kann es erklären?
2. Wenn eine Ebene schwebend ist und dann ein Rand hinzugefügt wird, wird in IE6 ein doppelter Rand angezeigt. ----------Die Lösung ist display:inline; (ich weiß es, aber ich vergesse es immer).
3. Es muss das Framework mit fester Breite links und adaptiver Breite rechts + fester Breite links und rechts und adaptiver Breite in der Mitte verwendet werden. Es wird häufig verwendet.

Demo1 (linke Seite fest und rechte Seite adaptiv):

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Doppelspaltiges Layout, feste Breite links, adaptive Breite rechts</title>
<Stil>
html,body{ Höhe:100%; Rand:0px; Polsterung:0px; }
#header { Breite: 100 %; Höhe: 20px; Hintergrund: #CCC; }
#footer { Breite:100%; Höhe:20px; Hintergrund:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolut; left:0; background:#FF0;}
#Mitte { Breite:100%; Höhe:200px; Hintergrund:#F00; }
</Stil>
</Kopf>
<Text>
<div id="header">Kopfzeile</div>
<div id="Haupt">
<div id="links">links</div>
<div id="Mitte">Mitte</div>
</div>
<div id="footer">Fußzeile</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

demo2 (links und rechts sind fest und die Mitte ist adaptiv):

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<title>Doppelspaltiges Layout, feste Breite links, adaptive Breite rechts</title>
<Stil>
html,body{ Höhe:100%; Rand:0px; Polsterung:0px; }
#header { Breite: 100 %; Höhe: 20px; Hintergrund: #CCC; }
#footer { Breite:100%; Höhe:20px; Hintergrund:#CCC; }
#main { Polsterung links: 200px; Polsterung rechts: 200px;}
#left { width:200px; height:200px; position:absolut; left:0; background:#FF0;}
#rechts { Breite:200px; Höhe:200px; Position:absolut; rechts:0; Hintergrund:#FF0; Float:links;}
#Mitte { Breite: 100 %; Höhe: 200 Pixel; Hintergrund: #F00; Float: links;}
</Stil>
</Kopf>
<Text>
<div id="header">Kopfzeile</div>
<div id="Haupt">
<div id="links">links</div>
<div id="Mitte">Mitte</div>
<div id="right">richtig</div>
</div>
<div id="footer">Fußzeile</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>

4. Wenn Sie Bilder in IE6 einfügen, führt die Verwendung des img-Tags zu einigen Pixeln Leerraum unter dem img, wodurch Ihre Arbeit vom Designentwurf abweicht (was dem Vorgesetzten auffällt und Sie zurechtgewiesen werden). Die Lösung besteht darin, das img in ein Blockelement umzuwandeln; display:block;
5. Die Methode, um den Text innerhalb des Blocks vertikal auszurichten, lautet: 1).vertical-align:middle.2).line-height:***; -------------Im Allgemeinen ist die zweite besser als die erste, und ich weiß nicht, warum.
6. Das lvha des a-Tags wird nicht sehr häufig verwendet, wird aber definitiv verwendet: a:link{} a:visited{};a:hover{}a:active{}
7. Es scheint, dass Textkürzungen ohne Zeilenumbruch sehr üblich sind (heutzutage täglich verwendet): white-space:nowrap;overflow:hidden;text-overflow:ellipsis; (Zeilenumbruch: word-wrap:break-word;)
8. Es gibt viele Möglichkeiten, Gleitkommazahlen zu löschen. Die drei wichtigsten, die heutzutage verwendet werden, sind: 1) clear: both; 2) overflow: hidden; 3). Die Lieblingsmethode meines Lehrers ist: #a: after{display: block; clear: both; visibility: hidden; height: 0; content'.';}
9. Mausgesten verschwinden manchmal im Internet Explorer. Diese Situation ist in den letzten zwei Tagen mehrmals aufgetreten. ------------------Die Lösung ist corsor:pointer; (beachten Sie, dass es nicht handschriftlich sein kann – der Kursleiter hat ausdrücklich daran erinnert)
10. Beim Definieren eines Containers mit einer Höhe von nur 2 Pixeln tritt in IE6 ein Fehler auf – die Lösung besteht darin, verschiedene Attribute zu löschen, insbesondere font-size:0;height:0;line-height:0;
11. max-width funktioniert nicht in IE6 --- die Lösung ist _width: *; (ich hatte dieses Problem letzte Woche)
12.!wichtige Regel - Ich habe dieses Attribut noch nie zuvor verwendet, bis mein Vorgesetzter sich vorgestern meinen Code ansah und mich daran erinnerte, dass bei einer responsiven Seite die nachfolgende Breite die ursprüngliche Breite: 100 % überschreibt; ich muss also Breite: 100 %!wichtig; hinzufügen.
13. Das Räumen von Schwimmkörpern ist sehr, sehr wichtig – manchmal kann sich der Behälter beispielsweise nicht an die Höhe anpassen und Sie müssen ihn verwenden! ! !
14. Wenn Sie auf den Text klicken, wird auch das Optionsfeld oder das Kontrollkästchen angeklickt, beispielsweise diese Funktion von CSDN: Die Methode besteht darin, das Optionsfeld mit einer Bezeichnung zu umschließen oder die Bezeichnung für die „ID“ zu verwenden.
15.display:none--------verschwindet und nimmt keinen Platz ein. Sichtbarkeit: versteckt;---------------Nimmt Position ein, nachdem es verschwunden ist.

<<: Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

>>: Beispiel für die Implementierung des TikTok-Textschütteleffekts mit CSS

Verwenden Sie das Tool nginx.vim zur Syntaxhervorhebung und Formatierung der Konfigurationsdatei nginx.conf

Zusammenfassung der Web-Frontend-Kenntnisse (persönliche praktische Erfahrung)

Verwenden Sie das Tool nginx.vim zur Syntaxhervorhebung und Formatierung der Konfigurationsdatei nginx.conf

So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung

Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen

Implementierung eines einfachen Timers in JavaScript

Vue realisiert problemlos Wasserzeicheneffekte

Detailliertes Beispiel zum Ändern des Linux-Kontokennworts

Warum der Befehl „explain“ MySQL-Daten ändern kann

Erste Schritte mit MySQL Sharding

So erstellen Sie ein Apr-Modul zur Tomcat-Leistungsoptimierung

Aufrufen und Ausführen von Host-Docker-Operationen im Docker-Container

Artikel empfehlen

Vue realisiert die Palastgitterrotationslotterie

Detaillierte Erklärung zum MySQL-Dateispeicher

Eine kurze Diskussion über das Problem des vergessenen MySQL-Passworts und des Anmeldefehlers

Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist

Super einfache Implementierung von Docker zum Erstellen eines persönlichen Blogsystems

Detaillierte Erklärung der Lösung für den Fehler von VMware, das Modul diskearly zu öffnen

Detailliertes Installationstutorial für Windows 10 + MySQL 8.0.11 Zip

Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen und ihrer Verwendung

Informationen zur Docker-Sicherheit Probleme mit der Docker-TLS-verschlüsselten Kommunikation

Lassen Sie uns ausführlich über den Vue-Lebenszyklus sprechen

Verwenden einer Cursorschleife zum Lesen temporärer Tabellen in gespeicherten MySQL-Prozeduren

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Der Unterschied zwischen dem Wissen von Frontend-Entwicklern und Künstlern in der Website-Entwicklung

So ändern Sie die Container-Portzuordnung in Docker dynamisch

Lösung für das Problem der automatischen Wiederherstellung nach der Änderung von server.xml und content.xml in Tomcat