Newsbeiträge
Kategorie:
Tutorials
Mit list-style und den entsprechenden Parameter sehen Listen unterschiedlich aus.
Bei ol Listen sind folgende Parameter anzugeben:
z.b.:
der Code dazu sieht dann so aus:
Nun kommen wir zu den ul-Listen (auch Bulletlisten genannt)
z.b.:
Der Code dazu sieht so aus:
Listen in den News oder anderen Seiten
Listen finden immer mehr Anwendungen auf den Webseiten.
Ob als Menu oder in einem Beitrag Listen sind sehr beliebt.
In diesem Beitrag möchte ich euch das gestalten und einbauen von Listen näher bringen.
In der CSS legt man fest wie eine Liste auszusehen hat.Ob als Menu oder in einem Beitrag Listen sind sehr beliebt.
In diesem Beitrag möchte ich euch das gestalten und einbauen von Listen näher bringen.
Mit list-style und den entsprechenden Parameter sehen Listen unterschiedlich aus.
Bei ol Listen sind folgende Parameter anzugeben:
none: keine Nummerierung
decimal: erzeugt in der Auflistung Ziffern wie 1., 2., 3. etc.
lower-roman: erzeugt kleine, römische Zahlen wie i., ii, iii,
upper-roman
: hier werden "normale" römische zahlen gebildet, wie I., II., III.
lower-alpha : Kleinbuchstaben: a., b.,c.,
upper-alpha: Grossbuchstaben:A.,B.,C.
z.b.:
- none
- dezimal
- lower-roman
der Code dazu sieht dann so aus:
Code
<ol type="upper-alpha">
<li style="color:blue">none</li>
<li style="color:red">dezimal</li>
<li style="color:blue">lower-roman</li>
</ol>
<li style="color:blue">none</li>
<li style="color:red">dezimal</li>
<li style="color:blue">lower-roman</li>
</ol>
Nun kommen wir zu den ul-Listen (auch Bulletlisten genannt)
Es gibt 3 verschiedene Bulletzeichen disc, square, und circle.
disc: ein Punkt
square: Quatrat
circle: Kreis
z.b.:
- disc
- square
- circle
- disc
- square
- circle
- disc
- square
- circle
Der Code dazu sieht so aus:
Code
<ul type="square">
<li>disc</li>
<li>square</li>
<li>circle</li>
</ul>
<ul type="disc">
<li>disc</li>
<li>square</li>
<li>circle</li>
</ul>
<ul type="circle">
<li>disc</li>
<li>square</li>
<li>circle</li>
</ul>
<li>disc</li>
<li>square</li>
<li>circle</li>
</ul>
<ul type="disc">
<li>disc</li>
<li>square</li>
<li>circle</li>
</ul>
<ul type="circle">
<li>disc</li>
<li>square</li>
<li>circle</li>
</ul>
![[P]](images/icons/extrasmall/printer1.gif "Druckansicht"){kind=icon}
Weitere Beiträge in Kategorie Tutorials
- Pimp deinen Firefox Browser (von Charlie am 20. Aug 2010)
- Lightbox Lightwindow und Einsatz in den News (von Charlie am 26. Dez 2009)
- Tutorial Error 404 Seiten optimierung mit Google Webmaster Tools (von Charlie am 11. Apr 2009)
- Einbau des Randomimage Plugins (von Charlie am 27. Sep 2008)
- Listen in den News oder anderen Seiten (von am 23. Sep 2007)