ag电子竞技俱乐部成员|ag电子竞技女
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >

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

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

ul li
ul li

一、不能撮合

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

1、語法:

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

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

成效:

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 ul實踐使用

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

如需轉載,請注明文章出處和來源網址:http://www.sjiru.tw/html/h52246.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.sjiru.tw DIVCSS5版權所有。

ag电子竞技俱乐部成员 江苏7位数最新开奖一 牌九玩法 周莹去迪化赚钱了 浙江快乐彩遗漏数据 ewin棋牌手机官网充值首页 大乐透大小数分布图 金牛线上娱乐 河南十一选五玩法规则 安徽快三遗漏号 贵州十一选五开奖查询手机看