CSS-Neudefinition von Aufzählungszeichen und Nummerierungstipps

Jeder, der Word verwendet hat, weiß, dass Word über eine „Aufzählungszeichen- und Nummerierungsfunktion“ verfügt, die sehr praktisch ist. Das Eigenschaftenfenster von Dreamweaver3 verfügt auch über eine Symbolschaltfläche ähnlich der „Aufzählungszeichen und Zahlen“, die eine automatische Listenfunktion generiert, allerdings nur in zwei Formen, nämlich Quadraten und arabischen Ziffern. Wir können jedoch die CSS-Definitionsfunktion von Dreamweaver3 verwenden, um das „Listensymbolformat“ neu zu definieren. Im Folgenden wird die Definition eines „großen römischen Ziffernlistensymbols“ als Beispiel zur Veranschaulichung seiner Verwendung verwendet:

1 F7 (oder klicken Sie in der Schnellstartleiste auf das Symbol, das wie „Bagua-Diagramm“ aussieht), rufen Sie das CSS-Bedienfeld auf, wählen Sie „Keine“, klicken Sie dann auf das Bearbeitungssymbol unten im Bedienfeld und klicken Sie auf die Schaltfläche „Neu“. Wählen Sie im Popup-Dialogfeld „Stylesheet bearbeiten“ nach der Auswahl von „HTML-TAG neu definieren (HTML-Tag neu definieren)“ im Popup-Dialogfeld „Neuer Stil“ die Option „ol“ im Auswahlfeld „Tag“ unten aus. Drücken Sie OK, und das Dialogfeld „Stildefinition für OL“ wird sofort angezeigt, wie unten gezeigt:

Wählen Sie „Liste“ im Auswahlfenster auf der linken Seite aus Dialogfeld „Stildefinition für OL“, und im rechten Bereich müssen wir nur noch „Typ“ definieren. Klicken Sie rechts auf die Dreiecksschaltfläche. Sie können die Liste wie folgt sehen:

2. Lassen Sie mich die Bedeutung jedes Elements in der Liste im Bild oben erklären:

Scheibe: ausgefüllter Kreis;

Kreis: hohl Kreis;

Quadrat: Vollquadrat;

Kleinbuchstaben: römische Ziffern; Ziffern;

Kleinbuchstaben: englische Kleinbuchstaben;

Großbuchstaben: englische Großbuchstaben

keine: Aufzählungszeichen und Zahlen werden nicht angezeigt.

Natürlich wählen Sie in diesem Beispiel „upper-roman“ aus und drücken dann OK, um zurückzukehren (beachten Sie, dass das Attribut „Bullet“ jetzt nicht ausgewählt werden sollte, da sonst möglicherweise nicht das erwartete Ergebnis erzielt wird). Beenden Sie den Vorgang, indem Sie im Dialogfeld „Stylesheet bearbeiten“ auf die Schaltfläche „Fertig“ klicken. Der CSS-Code zwischen 〈head〉 und 〈/head〉 des Webseiten-Quellcodes lautet wie folgt:

Für Internetnutzer, die Dreamweaver3 nicht verwenden, kopieren Sie den obigen Code direkt zwischen 〈head〉 und 〈/head〉 〈/head〉, der Effekt ist der gleiche.

3.

Auf diese Weise klicken Sie beim Entwerfen einer Webseite auf das Artikelnummernsymbol

〈style type="text/css"〉
〈!--
ol { list-style-type: upper-romancircle}
--〉
〈/style〉

, um die Hauptstadt Roman zu erhalten Es gibt eine Liste mit Zahlen, aber die Dezimalzahlen werden beim Bearbeiten weiterhin angezeigt und ihre wahren Farben werden nur beim Durchsuchen angezeigt. Wenn Sie Zahlen in anderen Formaten benötigen, wählen Sie im zweiten Schritt einfach andere Stile in der Liste aus.

Wenn Sie auf das Symbol

drücken möchten, ändert sich auch die Grafik vor dem Aufzählungszeichen (standardmäßig ein ausgefülltes Quadrat) in ein numerische Zahl, solange die erste Markierung „Tag“ in einem Schritt ausgewählt wird, wählen Sie nicht „ol“, sondern „ul“. Die anderen Vorgänge sind genau die gleichen. Wenn Sie es ändern möchten, um Aufzählungszeichen mit großen römischen Ziffern zu verwenden, sieht der resultierende CSS-Code wie folgt aus:

Wie Sie hier sehen können, spielen diese beiden Symbole im Grunde die gleiche Rolle, haben aber unterschiedliche Beschriftungen . Das ist alles.