html怎么用ul和li弄展开式的列表,ul li html无序列表标签组学�?CSS布局HTML

• 属于无序列表组合标签-�?strong>html列表标签组合�?/p>

  html网页代码常用ul li列表布局标签�?/p>

  

  ul li

  一、不能分�?/h3>

  ul下只能放li标签，li标签内可以放任何标签，当然也可以�?strong>li内再�?strong>ul li组合列表标签�?/p>

  1、语法：

  • 列表内容一
  • 列表内容�?lt;/li>
  • 列表内容�?lt;/li>

  ul内可以放无数个li标签内容

  效果�?/p>

  

  ul li简单使�?/p>

  2、使用说�?/strong>

  li不能离开ul单独使用，当然ul也不能离开li单独使用，通常需要ul li一起，结构上li作为ul子级�?/p>

  3、li再用ul li

  li放ul内，当然li内可以再使用任何html标签元素，也可以再嵌套使用ul li

  • 列表内容一
    • 二级li内容
    • 二级li
    • 二级li
  • 列表内容�?lt;/li>
  • 列表内容�?lt;/li>

  也就是开始看到本文第一张图效果�?/p>

  4、为什么叫ul li为无序列表？

  默认CSS情况下，每个li内容在浏览器中是圆点、圆圈等而没有序�?�?�?，一、二、三�?/p>

  二、实际布局如何使用

  普通文章如果有列表目录，可以使用ul li布局或ol li布局(有序列表)，通常情况下因为浏览器版本多、浏览器品牌多，所以默认情况下浏览器对ul li默认CSS样式是不同的，这样通常我们是首选去掉清除ul li默认css样式，再重新设置新CSS样式�?/p>

  以下为文章标题列表排版，前面带点效果�?/p>

  1、首选准备一�?ldquo;�?rdquo;图片

  dot.gif ,放images文件夹内

  

  替代默认小圆点图片素�?/p>

  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�?a href="//www.css5.com.cn/css/912.shtml">边框�?a href="//www.css5.com.cn/css/927.shtml">宽度、内间距 */

  ul.news li{ background:url(dot.gif) no-repeat 0 15px; height:30px;

  padding-left:10px; line-height:30px; text-align:left;}

  /* 设置圆点图片为li背景�?a href="//www.css5.com.cn/css/916.shtml">�?/a>�?a href="//www.css5.com.cn/css/937.shtml">行高�?a href="/css/1129.shtml">内容靠左对齐 */

  3、HTML代码

  • 列表内容一
  • 列表内容�?lt;/a>
  • css问题解决上CSS5
  • 学css上CSS5

  4、浏览器效果

  

  li ul实际应用

  作者：css5原创