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

CocosCreator allgemeines Framework-Design Ressourcenmanagement

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

CocosCreator allgemeines Framework-Design Ressourcenmanagement

N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen

So führen Sie das Springboot-Projekt im Docker aus

Detaillierte Erläuterung der Rolle und des Funktionsprinzips der MySQL-Master-Slave-Replikation

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

So konfigurieren Sie MySQL auf einem Ubuntu-Server und implementieren eine Remote-Verbindung

Keepalived implementiert Nginx-Lastausgleich und Beispielcode für hohe Verfügbarkeit

Detaillierte Erläuterung des neuesten IDEA-Prozesses zum schnellen Bereitstellen und Ausführen von Docker-Images

Müssen Designer das Programmieren lernen?

React+Amap ermittelt Breiten- und Längengrad in Echtzeit und lokalisiert die Adresse

Artikel empfehlen

Detaillierte Schritte zum Ändern des Standardkennworts bei der Installation von MySQL in Ubuntu

Was ist Tabellenpartitionierung und -partitionierung?MySql-Datenbankpartitionierung und Tabellenpartitionierungsmethode

Probleme und Vorsichtsmaßnahmen beim Festlegen von maxPostSize für Tomcat

Detaillierte Erläuterung der Docker Volume-Berechtigungsverwaltung

Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten

Details zur Ereignisbindung reagieren

Vue implementiert eine Online-Vorschau von PDF-Dateien (mithilfe von pdf.js/iframe/embed)

GET POST Unterschiede

HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails

Analyse von 2 Token-Gründen und Beispielcode in der Webprojektentwicklung

Versprechenskapselung wx.request-Methode

Als der Interviewer nach dem Unterschied zwischen char und varchar in mysql fragte

Wie die MySQL Select-Anweisung ausgeführt wird

MySQL-Einschränkungen - Super detaillierte Erklärung

Analyse der Methode zum Einrichten geplanter Aufgaben in MySQL