ul li html無序列表標簽組實例分析

這篇文章主要講解了“ul li html無序列表標簽組實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“ul li html無序列表標簽組實例分析”吧！

<ul> <li>屬于無序列表組合標簽-是html列表標簽組合。

html網頁代碼經常使用ul li列表機關標簽。

一、不能撮合

ul下只能放li標簽，li標簽內可以縱脫何標簽，雖然也大要在li內再放ul li組合列表標簽。

1、語法：

<ul>
<li>列表內容一</li>
<li>列表內容二</li>
<li>列表內容三</li>
</ul>

ul內可以或許放有數個li標簽模式

成效：

ul li容易使用

2、使用注明

li不克不及離開ul零丁使用，只管ul也不能離開li獨自使用，通常需要ul li共同，結構上li作為ul子級。

3、li再用ul li

li放ul內，只管li內概略再使用任何html標簽元素，也可能再嵌套使用ul li

<ul>
<li>列表形式一
<ul>
<li>二級li模式</li>
<li>二級li</li>
<li>二級li</li>
</ul>
</li>
<li>列表模式二</li>
<li>列表形式三</li>
</ul>

也就是匹面看到本文第一張圖功效。

4、為何叫ul li為無序列表？
默認CSS情況下，每個li模式在閱讀器中是圓點、圓圈等而不有序號1、2、3，一、二、三。

二、實踐機關若何使用

普通文章假定有列表目錄，大概使用ul li結構或ol li組織（有序列表），通常環境下因為閱讀器版本多、瀏覽器品牌多，以是默認狀況下涉獵器對ul li默許CSS格式是差別的，如許通常咱們是首選去掉肅除ul li默認css格式，再從頭配置新CSS樣式。

以下為文章題目列表排版，前面帶點造詣。

1、首選籌備一個“點”圖片
dot.gif ,放images文件夾內

替代默認小圓點圖片素材

2、對應關頭CSS代碼

ol, ul ,li{list-style: none;margin:0;padding:0;}
/* list-style: none去掉ol ul li三個標簽名堂，去掉外間距與外部白間距 */

ul.news{ border:1px solid #00F; padding:10px; width:300px;} /* 設置裝備擺設ul的邊框、寬度、內間距 */ ul.news li{ background:url(dot.gif) no-repeat 0 15px; height:30px; padding-left:10px; line-height:30px; text-align:left;} /* 設置裝備擺設圓點圖片為li后臺，高、行高、形式靠左對齊 */

3、HTML代碼

<ul class="news">
<li><a href="#">列表形式一</a></li>
<li><a href="#">列表形式二</a></li>
<li><a href="#">css問題意圖上CSS5</a></li>
<li><a href="#">學css上CSS5</a></li>
</ul>

4、涉獵器成效

li ul實踐使用

手法，將圖片素材（點）作為li后援圖片出現出圓點造詣，同時使用padding-left設置圓點布景圖片與翰墨間距，多么圓點也好其余圖片素材均興許變革，同時興許CSS無效控制間距距離，不怕涉獵器之間顯示不匹敵。

感謝各位的閱讀，以上就是“ul li html無序列表標簽組實例分析”的內容了，經過本文的學習后，相信大家對ul li html無序列表標簽組實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！