html无序列表怎么加上小圆点 ul li html无序列表标签组学习

属于无序列表组合标签-是html列表标签组合。

html网页代码经常使用ul li列表机关标签。

ul li

一、不能撮合

ul下只能放li标签，li标签内可以纵脱何标签，虽然也大要在li内再放ul li组合列表标签。

1、语法：

列表内容一列表内容二列表内容三

ul内可以或许放有数个li标签模式

成效：

ul li容易使用

2、使用注明

li不克不及离开ul零丁使用，只管ul也不能离开li独自使用，通常需要ul li共同，结构上li作为ul子级。

3、li再用ul li

li放ul内，只管li内概略再使用任何html标签元素，也可能再嵌套使用ul li

列表形式一二级li模式二级li二级li列表模式二列表形式三

也就是匹面看到本文第一张图功效。

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代码

列表形式一列表形式二css问题意图上CSS5学css上CSS5

4、涉猎器成效

li ul实践使用

手法，将图片素材(点)作为li后援图片出现出圆点造诣，同时使用padding-left设置圆点布景图片与翰墨间距，多么圆点也好其余图片素材均兴许变革，同时兴许CSS无效控制间距距离，不怕涉猎器之间显示不匹敌。