CSS list-style熟悉解釋

2024-07-11 08:38:26

字體：大中小

來源：轉載

供稿：網友

原來工作中曾經碰到過UL列表里一些異常的表現,
加上昨天看到了http://bbs.blueidea.com/thread-2984871-1-1.html 這個貼子,所以測試了一下list-style的各種屬性,發現了一個有意思的現象

先看一下CSS手冊中,對于list-style的解釋

定義和用法
list-style 簡寫屬性在一個聲明中設置所有的列表屬性。

說明
該屬性是一個簡寫屬性，涵蓋了所有其他列表樣式屬性。由于它應用到所有 display 為 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不過實際上它可以應用到任何元素，并由 list-item 元素繼承。
可以按順序設置如下屬性：
•list-style-type
•list-style-position
•list-style-image
可以不設置其中的某個值，比如 "list-style:circle inside;" 也是允許的。未設置的屬性會使用其默認值。
默認值： disc outside none

在日常工作中經常需要對ul,li進行css reset ,將列表符號隱藏.
最常用的寫法就是Ul,li,ol{list-style:none;}(也有人用ul,li,ol{list-style-type:none;})

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><br /><meta name=”author” content=”fanfan,xiangrui09@qq.com” /><br /><title>常見的用法</title><br /><style type=”text/css”><br />body,ul,li,p {padding:0;margin:0;font-size:12px;}<br />p{font:bold 16px/180% arial;}<br />div{float:left;display:inline;background:#eee;margin-right:10px;}<br />p span{text-decoration:line-through;}<br />ul{width:275px;margin:4px 0 0 15px;background:aqua;}<br />ul,li{list-style:none;}<br /></style><br /></head><br /><body><br /><div><br /><p>1: list-style:none;</p><br /><ul><br /><li><a href=”#”>純凈的文字奇異的夢幻奔騰的思想</a></li><br /><li><a href=”#”>就像對愛情一樣要求是近乎完美的</a></li><br /><li><a href=”#”>校園里淡淡的青春單純的男孩女孩</a></li><br /><li><a href=”#”>我彷徨而又彷徨早已沒有了距離之感</a></li><br /><li><a href=”#”>凝望著她的臉朗誦起熟悉而又陌生的詩句</a></li><br /><li><a href=”#”>那些文字恰好地描述了一個女孩子的靈</a></li><br /><li><a href=”#”>交錯出現明暗線索和不確定的主角</a></li><br /><li><a href=”#”>細膩而真摯的感情漸漸突顯出來身臨其境</a></li> </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/1342876.html'>IE6下PNG背景透明的七種方法小結</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342878.html'>網頁變灰配合全國哀悼日的css代碼 20100421</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>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342877">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342877&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">

學習交流