前端開發(fā)時(shí)常會用到無序列表(?ul
? ?li
?) 來進(jìn)行數(shù)據(jù)的展示等,這里記錄一些常見的樣式修改
1、去掉默認(rèn)情況下前面的圓點(diǎn)
ul{list-style:none;}
2、橫向展示排列
li{float: left;}
3、修改為圓點(diǎn)之外的樣式
這里指定的是空心圓
li{
/*float: left;*/
list-style-type: circle;
}
下面給出其他類型:
值 | 描述 |
---|---|
circle | 空心圓 |
none | 不使用 |
disc | 默認(rèn),實(shí)心圓 |
square | 實(shí)心方塊 |
decimal | 阿拉伯?dāng)?shù)字 |
lower-roman | 小寫羅馬數(shù)字 |
upper-alpha | 大寫英文字母 |
4、更改圓點(diǎn)樣式為圖片
li{
list-style-type:none;
list-style-image: url(url);
}
CSS寫法:
HTML寫法:
點(diǎn)擊 CSS無序列表在線實(shí)例 在線實(shí)操一下吧~