溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“css怎么顯示行數(shù)序列值布局”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css怎么顯示行數(shù)序列值布局”文章吧。
類似帶有序布局效果圖：
可能遇到這樣的布局第一反應(yīng)你會(huì)想到有序標(biāo)簽ol li的使用，但這里DIVCSS5告訴你因?yàn)闉g覽器版本比較多而不同瀏覽器對(duì)ol li有序列表默認(rèn)自帶的序號(hào)列表有著不同顯示，這樣容易引起瀏覽器兼容問(wèn)題，所以遇到這樣的有序排版布局，最簡(jiǎn)單是將序號(hào)切成背景圖片，CSS布局時(shí)作為ul或ol背景圖片達(dá)到一樣的排版布局效果。
但通常我們對(duì)ul使用比較多，所以雖然是有序列表當(dāng)然這里也使用ul li實(shí)現(xiàn)這個(gè)布局。
在引人DIVCSS5初始化模板基礎(chǔ)上進(jìn)行案例代碼布局。
1、HTML代碼
<ul class="array">
<li><a href="http://www.億速云.com/css-texiao/texiao745.shtml">
不間斷每次滾動(dòng)一條數(shù)據(jù)DIV CSS Js滾動(dòng)特效</a></li><li><a href="http://www.億速云.com/wenji/w744.shtml">父級(jí)容器盒子div高度不能自適應(yīng)解決</a></li>
<li><a href="http://www.億速云.com/wenji/w743.shtml">為什么div css網(wǎng)頁(yè)在FF瀏覽器中不能水平居中呢</a></li>
<li><a href="http://www.億速云.com/w3c/w742.shtml">XHTML(div css)編碼七條基本規(guī)范</a></li>
<li><a href="http://www.億速云.com/shili/s733.shtml">左邊logo 右邊廣告圖片布局 div css左右浮動(dòng)布局實(shí)例</a></li>
<li><a href="http://www.億速云.com/shili/s731.shtml">一個(gè)DIV+CSS代碼布局的簡(jiǎn)單導(dǎo)航條</a></li>
<li><a href="http://www.億速云.com/shili/s730.shtml">DIV CSS絕對(duì)定位布局案例 position布局實(shí)例</a></li>
<li><a href="http://www.億速云.com/shili/s699.shtml">ul li css隔行換色 css li列表布局隔行背景顏色不</a></li>
</ul>
2、CSS代碼：
ul.array{ margin:0 auto; width:300px; background:url(m-top.gif) no-repeat 0 5px}
ul.array li{ height:30px; line-height:30px; text-align:left; overflow:hidden;
width:100%; text-indent:28px}
3、效果截圖
瀏覽器效果截圖CSS有序列表布局
4、完整HTML源代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>有序列表布局 DIVCSS5 在線演示</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!-- www.億速云.com -->
</head>
<body>
<ul class="array">
<li><a href="http://www.億速云.com/css-texiao/texiao745.shtml">
不間斷每次滾動(dòng)一條數(shù)據(jù)DIV CSS Js滾動(dòng)特效</a></li><li><a href="http://www.億速云.com/wenji/w744.shtml">父級(jí)容器盒子div高度不能自適應(yīng)解決</a></li>
<li><a href="http://www.億速云.com/wenji/w743.shtml">為什么div css網(wǎng)頁(yè)在FF瀏覽器中不能水平居中呢</a></li>
<li><a href="http://www.億速云.com/w3c/w742.shtml">XHTML(div css)編碼七條基本規(guī)范</a></li>
<li><a href="http://www.億速云.com/shili/s733.shtml">左邊logo 右邊廣告圖片布局 div css左右浮動(dòng)布局實(shí)例</a></li>
<li><a href="http://www.億速云.com/shili/s731.shtml">一個(gè)DIV+CSS代碼布局的簡(jiǎn)單導(dǎo)航條</a></li>
<li><a href="http://www.億速云.com/shili/s730.shtml">DIV CSS絕對(duì)定位布局案例 position布局實(shí)例</a></li>
<li><a href="http://www.億速云.com/shili/s699.shtml">ul li css隔行換色 css li列表布局隔行背景顏色不</a></li>
</ul>
</body>
</html>
5、完整CSS代碼
@charset "utf-8";
/* DIVCSS5-CSS-www.億速云.com */
body, div, ul, li{margin:0; padding:0;font-style: normal;
font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}ol, ul ,li{list-style:none}
img {border: 0; vertical-align:middle}
body{color:#000000;background:#FFF; text-align:center}
a{color:#000000;text-decoration:none}
a:hover{color:#BA2636;text-decoration:underline}
ul.array{ margin:0 auto; width:300px; background:url(m-top.gif) no-repeat 0 5px}
ul.array li{ height:30px; line-height:30px; text-align:left;
overflow:hidden; width:100%; text-indent:28px}
以上就是關(guān)于“css怎么顯示行數(shù)序列值布局”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
