Die standardmäßige Verwendung von DIV+CSS-Benennungsregeln bei der Webseitenproduktion kann den Optimierungseffekt verbessern, insbesondere bei der Arbeit im Team, und eine kollaborative Produktionseffizienz gewährleisten. Die spezifischen DIV-CSS-Benennungsregeln und CSS-Benennungsregeln finden Sie in diesem Artikel.
Eine umfassende Sammlung häufig verwendeter DIV+CSS-Benennungen, also CSS-Benennungsregeln
Wenn wir CSS+DIV-Webseiten (Xhtml) entwickeln, ist die CSS-Benennung das Verwirrendste und Verwirrendste , insbesondere wenn Anfänger es nicht wissen Welcher Ort sollte benannt werden und wie kann man ihn am besten benennen?
1. Beschreibung der Benennungsregeln
1. Alle Namen sollten in Kleinbuchstaben geschrieben werden.
2. Attributwerte müssen in doppelte Anführungszeichen gesetzt werden muss einen Wert wie class="helloweb", id="helloweb" haben.
3 Jedes Tag muss einen Anfang und ein Ende haben und die richtige Ebene haben, und das Layout muss regelmäßig und ordentlich sein
4. Leere Elemente müssen ein End-Tag haben oder „/“ nach dem Anfangs-Tag hinzufügen
5. Leistung und Struktur sind vollständig getrennt und der Code enthält keine Leistungselemente, wie z B.: Stil, Schriftart, Die Definitionen von bgColor, Rahmen usw.
6,
sollten dem Prinzip von groß nach klein folgen, um die Struktur des Dokuments widerzuspiegeln und die Suche zu erleichtern Motoranfragen.
7. Fügen Sie jeder Tabelle und jedem Formular eine eindeutige Struktur-Tag-ID hinzu.
8. Der Vorteil besteht darin, dass ein Fehler im Bild angezeigt werden kann. Für Benutzer
9. Versuchen Sie, englische Namensprinzipien zu verwenden
10. Versuchen Sie, Wörter nicht abzukürzen, es sei denn, es handelt sich um Wörter, die auf einen Blick leicht zu verstehen sind
Hier finden Sie eine Einführung in gängige CSS-Benennungsmethoden und DIV-CSS-Benennungsmethoden.
2. Benennung von CSS-Stilen für wichtige Teile der äußeren Ebene der Webseite
Coat Wrap ----verwendet für die äußerste Ebene
Header ---------------Wird für den Header verwendet
Hauptinhalt main----------- -Wird für den Hauptinhalt verwendet (Mitte)
Links Hauptseite-Links -------------Linkes Layout
Rechts Hauptseite-rechts ------ -- ---Rechtes Layout
Navigationsleistennavigation ----Webmenü-Navigationsleiste
Inhalt Inhalt ---- -- --------Wird für den mittleren Teil der Webseite verwendet
Untere Fußzeile ------------------Wird für den unteren Teil
3. DIV +CSS-Benennungsreferenztabelle
Das Folgende ist die Referenztabelle für CSS-Stilbenennung und CSS-Dateibenennung, DIV-CSS-Benennungssammlung:
①CSS-Stilbenennungsbeschreibungs-Webseite öffentliche Benennung #wrapper Seitenperipheriesteuerung Gesamtlayoutbreite# Container oder #Inhaltscontainer
② wird für das äußerste #Layout-Layout #Kopf, #Kopfzeilenteil #Fuß, #Fußzeilen-Fußzeilenteil #nav Hauptnavigation #subnav sekundär verwendet Navigation #Menümenü #Untermenü Untermenü #Seitenleiste Seitenleiste #Seitenleiste_a, #Seitenleiste_linke Spalte oder rechte Spalte #Hauptseitentext #Tag-Beschriftung #Nachrichtsaufforderungsinformationen #Tipps Tipps #Abstimmungsabstimmung #Freundlicher Link freundliche Verbindung #Titeltitel
③# zusammenfassende Zusammenfassung #loginbar Anmeldeleiste #searchInput Sucheingabefeld #hot hot spot #search search #search_output Suchausgabe und Suchergebnisse sind ähnlich #searchBar Suchleiste #search_results Suchergebnisse #Copyright Copyright-Informationen #Branding
④Marke #Logo Website-LOGO #Siteinfo Website-Informationen #SiteinfoRechtliche rechtliche Erklärung #SiteinfoCredits Glaubwürdigkeit #beitreten Sie uns bei #Partner Partner #Service Service #Regsiter-Registrierung Arr/Pfeil Pfeil #Gildenführer #Sitemap Sitemap #Listenliste #Startseite Startseite #Unterseite sekundär Seite Unterseite #Werkzeug, #Symbolleiste Symbolleiste #Drop-Drop-Down #Dorpmenu-Dropdown-Menü
⑤ #Status Status #Scrollen Scrollen.Tab-Label Seite.links.rechts.Mitte links, Mitte, rechts.Nachrichten Nachrichten .download .banner Werbebanner (Top-Werbebanner) elektronischer Handel .Produkte Produkte .products_prices Produktpreise .products_description Produktbeschreibung .products_review Produktbewertung .editor_review Editor-Bewertung .news_release neuestes Produkt .Publisher Hersteller .Screenshot-Miniaturansicht .FAQs häufig gestellte Fragen .keyword Schlüsselwort.blog blog.forum Forum
⑥CSS-Dateibenennung Beschreibung Master.css, style.css Hauptmodul.css Modul base.css teilt grundsätzlich das Layout.css-Layout, Layout-Themes.css-Themaspalten.css-Spaltenschriftart .css-Text, Schriftart, Formulare.css-Formular, Mend.css-Patch, print.css-Druck
Weitere Anweisungen zur CSS-Benennung:
DIV+CSS-Benennungszusammenfassung: Ob die Verwendung von „.“ Es spielt keine Rolle, ob Sie die Benennung mit einem Symbol (Kleinbuchstaben) oder „#“ (Nummernzeichen) beginnen möchten, aber wir sollten besser darauf achten, dass in den Haupt-, Wichtig-, Sonder- und äußersten Feldern „#“ (Nummernzeichen) verwendet wird )-Auswahlsymbol, andere werden mit dem Auswahlsymbol „.“ (Kleinbuchstaben) benannt.
Normalerweise sind unsere am häufigsten verwendeten Hauptnamen: Wrap (Mantel, äußerste Schicht), Header (Kopfzeile, Kopfzeile), Nav (Navigationsleiste), Menü (Menü), Title (Spaltentitel, allgemeine Koordination h1h2h3h4 Tags werden verwendet)
, Inhalt (Inhaltsbereich), Fußzeile (Fußzeile, unten), Logo (Logo, kann mit h1-Tags verwendet werden), Banner (Werbebanner, normalerweise oben), copyRight (Urheberrecht). Andere können gezielt nach den eigenen Bedürfnissen eingesetzt werden.
Empfehlung: Die Haupt-, Wichtig- und äußersten Felder sollten mit dem Auswahlsymbol „#“ (Nummernzeichen) benannt werden, die anderen mit dem Auswahlsymbol „.“ (Kleinbuchstaben). .
2. Die CSS-Stildateien werden wie folgt benannt:
main master.css
layout, layout.css
columns.css
Textschriftart.css
Druckstil print.css
Thementhemen.css
4. Englische Benennungskenntnisse
Wenn Sie auf etwas stoßen, das nicht häufig verwendet wird, können Sie es mit einem Übersetzungstool übersetzen und auf Englisch benennen.
Das obige ist der detaillierte Inhalt vonZusammenfassung und gemeinsame Nutzung von Namenskonventionen für HTML und DIV+CSS (Sammlung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
