Zusammenfassung einiger gängiger Techniken in der Front-End-Entwicklung

1. So zeigen Sie das Datum rechts in der Artikeltitelliste an:

Code kopieren

Der Code lautet wie folgt:

<p><span>10.10.2010</span>@Mr.ThinkDies ist der Titel des Artikels</p>

Definieren Sie dann die Spanne so, dass sie nach rechts schwebt:

p span{float:right}
Tatsächlich kann diese Methode auf viele Situationen erweitert werden, was eine sehr praktische Art des Schreibens darstellt.
2. Gemäß Webstandards kann es auf einer Seite nur ein h1-Tag geben. Viele Leute kennen dieses Konzept, aber nur wenige setzen es tatsächlich um.
3. Das Problem überlappender leerer Ränder: Vermeiden Sie es im Allgemeinen, indem Sie transparente Ränder oder 1px Innenränder hinzufügen. Detaillierte Erklärung: https://www.jb51.net/css/28157.html
4. Implementierung der maximalen/minimalen Breite/Höhe in IE6, _width: expression(this.width >600 ? "600px" : true);, Höhe ist gleich.
5.html/class/id, es ist am besten, sie in Kleinbuchstaben zu schreiben, das ist strenger (im Einklang mit XHTML-Standards);
6. Um die Kompatibilität mit IE8 sicherzustellen, wird die Verwendung des folgenden Codes nicht empfohlen:

<meta http-equiv="X-UA-kompatibel" content="IE=7" />
Wenn es sich um eine nicht kurzfristige Seite handelt, versuchen Sie, deren Verwendung zu vermeiden, und die Seite sollte so weit wie möglich Abwärtskompatibilität gewährleisten.
7. Leere Divs haben im Internet Explorer eine Standardhöhe (nicht in FF). Sie können die Standardhöhe durch Definieren von: div { witdh:100%; background:#9c0; ling-height:0}; entfernen.
8. Wenn Sie das Tabellen-Tag verwenden, sollten Sie so weit wie möglich dessen eigene Eigenschaften nutzen, um Struktur und Stil maximal zu trennen. Detaillierte Erklärung: https://www.jb51.net/css/28158.html
9. Nutzen Sie das Label-Tag im Formular voll aus, um die Benutzererfahrung zu verbessern. Dies ist gut für die kleinen Optionsfelder auf der Seite und für Menschen mit Behinderungen, die die Website lesen möchten. Details sind der erste Schritt zur Benutzererfahrung.
10.fieldset, Legend-Tags, ein wenig bekannter, aber sehr praktischer Satz von Tags; er kann eine Gruppe von Elementen klar umrahmen und wird hauptsächlich in Formularen verwendet;
11. Das Optgroup-Tag ist wenig bekannt, aber es ist sehr hilfreich, um die Benutzerfreundlichkeit ausgewählter Formulare zu verbessern. Was macht es? Es kann Optionen gruppieren, wenn viele Optionen vorhanden sind:

Code kopieren

Der Code lautet wie folgt:

<ID auswählen="Auswahl-ID">
<optgroup label="GRUPPE EINS">
<option value="1">eine Auswahl</option>
<option value="2">zwei auswählen</option>
</optgroup>
<optgroup label="GRUPPE ZWEI">
<option value="3">drei Auswahl</option>
<option value="4">vier auswählen</option>
</optgroup>
</Auswählen>

12. Das Formular muss einen Namenswert haben. Der Namenswert ist eine Bezeichnung, die sich von der ID unterscheidet. Soweit ich herausgefunden habe, kann das Formularelement in Nicht-IE-Browsern nicht über document.formid abgerufen werden, wenn der Namenswert nicht definiert ist. Bitte beachten Sie den folgenden Code und die Kommentare:

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<Skript>
fenster.onload = funktion(){
alert(document.mrform.length); //Alle Browser zeigen die Länge des Formularelements an
alert(document.thinkform.length); //Nur der IE zeigt die Länge des Formularelements an
}
</Skript>
</Kopf>
<Text>
<form name="mrform" id="thinkform" action="#">
......
</form>
</body>
</html>

Quelle: http://mrthink.net/css-common-summary/

<<: Erfahren Sie in einem Artikel mehr über den Anzeigemodus für CSS-Beschriftungen

>>: IDEA verwendet das Docker-Plugin (Tutorial für Anfänger)

Front-End-JavaScript versteht Funktions-Currying gründlich

Zusammenfassung einiger gängiger Techniken in der Front-End-Entwicklung

Front-End-JavaScript versteht Funktions-Currying gründlich

CSS-Klicks auf das Radio wechseln zwischen zwei Bildstilen und nur eines der mehreren Radios kann aktiviert werden

Detaillierte Erläuterung des MySQL 5.7.9-Shutdown-Syntaxbeispiels

Über 3 gängige Pakete der REM-Anpassung

Wie stellt MySQL die Master-Slave-Konsistenz sicher?

So migrieren Sie das Datenverzeichnis in Docker

Detaillierte Beschreibung der HTML-Tabellenrahmensteuerung

So verwenden Sie die Markdown-Editor-Komponente in Vue3

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Tomcat analysiert XML und erstellt Objekte durch Reflektion

Artikel empfehlen

Erläuterung zu JavaScript-Anti-Shake und -Throttling

IE8 Beta 1 hat zwei Bereiche, die Ihre Aufmerksamkeit erfordern

Detaillierte Erläuterung der Js-Klassenkonstruktion und Vererbungsfälle

Verwendung von Vue-Filtern und Probleme bei der Zeitstempelkonvertierung

Detaillierte Erläuterung der Leistungsoptimierung für MySQL-Batch-SQL-Einfügungen

Vue Shuttle-Box ermöglicht Auf- und Abbewegung

Detaillierte Erläuterung der Speicherverwaltung der MySQL InnoDB-Speicher-Engine

Installations-Tutorial für mysql8.0rpm auf centos7

So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine temporären Dateien erstellt werden können

MySQL-Optimierung: InnoDB-Optimierung

Implementierung der kontinuierlichen Integration von Jenkins+Docker

Docker-Container kommunizieren direkt über Routing, um Netzwerkkommunikation zu erreichen

Detaillierte Erläuterung der Position der CSS-Sticky-Positionierung: Sticky-Problemgrube

5 äußerst nützliche Open-Source-Docker-Tools, die dringend empfohlen werden

W3C Tutorial (11): W3C DOM Aktivitäten