有序列表和段落设计华丽的网页列表数字

2024-07-11 08:24:16

字体：大中小

来源：转载

供稿：网友

在默认情况下，大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。
在默认情况下，大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。预览
基本上讲，你需要做的只是为ol元素定义Georgia字体，然后为p元素(在ol内)定义Arial字体。
CSS-有序列表

1.HTML源代码
创建一个有序列表，不要忘了将列表中的文字放在闭合的标记内。

<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 元素
现在为ol p 元素添加样式:

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

你的有序列表的最终样式:
ol-css

来看看完整的预览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 class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">
<!--分享 -->
<div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1338679.html'>CSS失效，原来是和网页第一段代码有关</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 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>发表评论</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" />
匿名发表</td>
</tr>
</table>
<textarea name="saytext" cols="70" rows="6" id="saytext">

学习交流