LI自動添加數字序號

2017-1-13

LI自動添加數字序號，完全使用CSS自己的屬性方法來實現(xiàn)，代碼中一共演示了三種序號風格，一種是阿拉伯數字風格，還有大寫序號風格，另外還有帶豎線的序號風格，向大家介紹如何用CSS自動為內容增加序號的功能，非常實用。

?<!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>
<title>CSS自動加序號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>FontLister字體查看及卸載軟件，應該說查看字體的功能還是挺強大的，可預覽字體，可查看字體的超多屬性信息，比如字符集、字體的高度和寬度、精細、水平和垂直方位、默認字符、末字符、斷字符以及字體類型、單元高度等信息，用起來十分方便，免安裝，無限制，也不需注冊。</p>
 </li>
 <li>
 <p>HTML5真的很棒，你看看這個網頁加載效果就明白了，不用任何圖片，純代碼實現(xiàn)動畫效果，一個方格動畫，隨著網頁加載而變化的效果。方格也是由代碼生成的，超贊吧？</p>
 </li>
 <li>
 <p>VB打印窗體及窗體中的控件，就是把窗口中的輸入框按鈕什么的也打出來。程序的亮點是窗口界面的設計，尤其是登記表的設計，有個性，程序采用了Access數據庫，輸入完這些信息，可保存，如果打印機連接正確，則可直接打印了。</p>
 </li>
</ol>
<ol id="list2">
 <li>
 <p>調色板代碼，VB制作調色器的主代碼，本程序通過拖動滑塊來改變顏色，每個基色都有對應的滑塊，左側方格適時顯示所調整的顏色值</p>
 </li>
 <li>
 <p>一個IP自動切換的程序，隔幾秒后會自動斷開、自動連接，適用于adsl，這樣ADSL寬帶的IP地址就是不停變化的，軟件主要適用于一些特殊場合，比如客戶端投票之類的被限制IP的時候用，軟件功能簡單，不需要注冊就可使用。 </p>
 </li>
 <li>
 <p>RegDllView軟件下載，這個小軟件可以很方便的查看你電腦中已注冊的DLL、oxc以及以COM方式注冊的exe組件等，在每個已注冊的文件中,你可以查看它的最后注冊日期,CLSID和ProgID等</p>
 </li>
</ol>
<ol id="list3">
 <li>
 <p>蘇飛迷你農歷日歷-萬年歷，是以前網頁上的一個日歷，經蘇飛優(yōu)化完善，重新編譯成軟件版本，這樣用著更方便了，日歷中包括農歷、節(jié)日、星期、節(jié)氣等眾多豐富的信息查詢功能 </p>
 </li>
 <li>
 <p>html5 canvas超酷loading，用時候可以單獨摘出某個你喜歡的Loading代碼，看了你會喜歡的。注意不要用IE8測試，html5現(xiàn)在支持火狐、Chrome、Opera等瀏覽器。
</p>
 </li>
 <li>
 <p>兩個下拉導航菜單的演示，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同實現(xiàn)，最新的jquery版本也可以引入，在演示頁面中，分別有橫向水平向下滑出的下拉菜單. </p>
 </li>
</ol>
</body>
</html>

演示圖片

聲明：
1.本站主要是為了記錄工作、學習中遇到的問題，可能由于本人技術有限，內容難免有紕漏，一切內容僅供參考。
2.本站部分內容來源互聯(lián)網,如果有圖片或者內容侵犯您的權益請聯(lián)系我們刪除！
3.本站所有原創(chuàng)作品，包括文字、資料、圖片、網頁格式，轉載時請標注作者與來源。

THE END