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

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)

Artikel empfehlen

Lösung zum Einfügen eines Formulars mit einer Leerzeile oben und unten

Ich weiß nicht, ob Ihnen beim Erstellen einer Webs...

Zusammenfassung der Docker-Datenspeicherung

Bevor Sie diesen Artikel lesen, hoffe ich, dass S...

Mac VMware Fusion CentOS7 Konfiguration statisches IP-Tutorial-Diagramm

Inhaltsverzeichnis Installieren Sie CentOS7 Konfi...

Sicherheitskonfigurationsstrategie für CentOS-Server

In letzter Zeit wurde der Server häufig mit Brute...

Lösung für das 404-Problem der Tomcat-Installation in Docker

Suchen Sie die Container-ID von Tomcat und rufen ...

So setzen Sie das Root-Passwort in Linux mysql-5.6 zurück

1. Überprüfen Sie, ob der MySQL-Dienst gestartet ...

Analyse der Benutzererfahrung beim Design von Facebook-Dating-Websites

<br />Verwandter Artikel: Analyse der Inform...

So ändern Sie das Root-Passwort in einem Container mit Docker

1. Verwenden Sie den folgenden Befehl, um das SSH...

Überlegungen zum Rasterdesign von Webseiten

<br />Ursprüngliche Adresse: http://andymao....

Docker-Batch starten und alle Container schließen

Im Docker Starten Sie alle Containerbefehle Docke...

So schreiben Sie asynchrone Aufgaben in modernem JavaScript

Vorwort In diesem Artikel untersuchen wir die Ent...

Vue führt einen einfachen zufälligen Namensaufruf durch

Inhaltsverzeichnis Layoutteil: <div id="a...

Codebeispiel für das Nutzungsszenario der Nginx-Domänenweiterleitung

Szenario 1: Aufgrund von Serverbeschränkungen ist...