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
Artikel empfehlen
JavaScript zum Erreichen der Produktabfragefunktion
In diesem Artikelbeispiel wird der spezifische Ja...
Die beste Lösung zur Implementierung digitaler Plus- und Minus-Buttons mit reinem CSS
Vorwort: Für die Implementierung digitaler Additi...
Eine schnelle Lösung für das Problem der PC- und Mobilanpassung
Beim Erstellen einer Webseite müssen wir normaler...
Konzept und Anwendungsbeispiele für die MySQL-Indexkardinalität
Dieser Artikel erläutert anhand von Beispielen da...
Drei Möglichkeiten, um zu verhindern, dass MySQL doppelte Daten einfügt
Erstellen einer neuen Tabelle CREATE TABLE `Perso...
Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen
<br />Der Inhalt wurde aus dem Internet repr...
Hinweise zur Verwendung des Blockquote-Tags
<br />Semantisierung lässt sich nicht mit we...
Der Prozess der Installation von Docker auf Windows Server 2016 und die aufgetretenen Probleme
Voraussetzungen Um Container auf Windows Server a...
Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren
Inhaltsverzeichnis Vorwort Was sind erstellbare S...
Detaillierte Erläuterung der Server- und Standortkonfiguration der einfachen Weiterleitungsanforderung von nginx
Lassen Sie uns kurz die Konfiguration von Server ...
Detaillierte Erläuterung der Idee der xshell-Remote-Anmeldung bei CentOS7 ohne Kennwortanmeldung
Lassen Sie mich zunächst über die allgemeine Idee...
So verwenden Sie Vuex in einem Vue-Projekt
Inhaltsverzeichnis Was ist Vuex? Vuex-Nutzungszyk...
5 Lösungen für den CSS-Box-Zusammenbruch
Zunächst: Was ist ein Box-Collapse? Elemente, die...
Schnelle Deinstallation und Installation der Knotenumgebung eines Linux-Servers (einfacher Einstieg)
1. Deinstallieren Sie zuerst npm sudo npm deinsta...
Mysql SQL-Anweisungsvorgang zum Hinzufügen oder Ändern des Primärschlüssels
Tabellenfelder hinzufügen alter table table1 add ...