有序列表和段落設(shè)計華麗的網(wǎng)頁列表數(shù)字

2024-07-11 08:24:16

字體：大中小

供稿：網(wǎng)友

在默認情況下，大多數(shù)瀏覽器都會將有序列表中的數(shù)字序列的與其列表文字內(nèi)容顯示為相同的字體。這篇快速教程將教你如何使用有序列表(ol)和段落(p)來設(shè)計華麗的列表數(shù)字。
在默認情況下，大多數(shù)瀏覽器都會將有序列表中的數(shù)字序列的與其列表文字內(nèi)容顯示為相同的字體。這篇快速教程將教你如何使用有序列表(ol)和段落(p)來設(shè)計華麗的列表數(shù)字。預(yù)覽
基本上講，你需要做的只是為ol元素定義Georgia字體，然后為p元素(在ol內(nèi))定義Arial字體。
CSS-有序列表

1.HTML源代碼
創(chuàng)建一個有序列表，不要忘了將列表中的文字放在閉合的標記內(nèi)。

<ol>
<li>
This is line one
</li>
<li>
Here is line two
</li>
<li>
And last line
</li>
</ol>

以下是無序列表的默認樣式:
ol-css

2.ol元素
為ol元素添加樣式:

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

列表會變成這樣:

3. ol p 元素
現(xiàn)在為ol p 元素添加樣式:

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

你的有序列表的最終樣式:
ol-css

來看看完整的預(yù)覽Demo吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Ordered List</title><style type="text/css">/* list 1 style */#list1 {font: italic 1em Georgia, Times, serif;color: #999999;}#list1 p {font: normal .8em Arial, Helvetica, sans-serif;color: #000000;}/* list 2 styles */#list2 {font: italic 1em Georgia, Times, serif;color: #999;list-style: lower-roman;}#list2 p {font: normal .85em Georgia, Times, serif;color: #000;}/* list 3 styles */#list3 {font: normal 1.1em Arial, Helvetica, sans-serif;color: #666;}#list3 p {font: normal .7em Arial, Helvetica, sans-serif;color: #000;border-left: solid 1px #999;margin: 0;padding: 0 0 1em 1em;}</style></head><body><ol id="list1"><li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. </p></li><li><p>Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. Mauris aliquam leo at pede pharetra condimentum. </p></li><li><p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. </p></li></ol><ol id="list2"><li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. </p></li><li><p>Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. Mauris aliquam leo at pede pharetra condimentum. </p></li><li><p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. </p></li></ol><ol id="list3"><li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. </p></li><li><p>Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante. Mauris aliquam leo at pede pharetra condimentum. </p></li><li><p>Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. </p></li></ol></body></html>            </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">
<!--分享 -->
<div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1338679.html'>CSS失效，原來是和網(wǎng)頁第一段代碼有關(guān)</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1338681.html'>編寫適合所有項目的通用的reset.css</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>
<!--分享 -->
</div>

<div   id="iwvjtn8m0"   class="pinglun">
<!-- 評論 -->
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title">
<tr>
<td><strong>發(fā)表評論</strong></td>
<td align="right"><a href="/e/pl/?classid=215&id=1338680">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1338680&down=2"></script></span>條評論</a></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="56%" align="left">用戶名:
<input name="username" type="text" class="inputText" id="username" value="" size="16" /></td>
<td width="44%" align="left">密碼:
<input name="password" type="password" class="inputText" id="password" value="" size="16" /></td>
</tr>
<tr>
<td align="left">驗證碼:
<input name="key" type="text" class="inputText" size="10" />
<img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td>
<td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" />
匿名發(fā)表</td>
</tr>
</table>
<textarea name="saytext" cols="70" rows="6" id="saytext">

學(xué)習(xí)交流