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无效控制间距距离，不怕涉猎器之间显示不匹敌。