ul、ol、li使用方法及技巧.docx

ul、ol、li使用方法及技巧 dada1、li是不能单独使用，必须在于ul之中的； 2、ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高。li 只能写在ul之中，直接定义li的宽高是无效的，必须先转换为块级元素； 3、ul li无序列表使用范围: 1)、常常用于文章标题列表排版； 2)、常常使用图片列表排版布局； 3)、这里说无序标签列表，主要默认情况下ul li标签是没有规律序号； 4)、ul li我们赋予CSS样式，即可实现各式各样的列表型有规律的列表内容布局； 5)、ul标签下不能直接放内容或其它标签，即使要放都必须放入li标签内，而li标签内可以再放ul ol等格式各样标签。 4、ol li有序列表使用范围: 1）、常常用于文章标题列表排版； 2）、常常使用图片列表排版布局； 3）、ol li我们赋予CSS样式，即可实现各式各样的列表型有规律的列表内容布局； 4）、ol li列表标签默认样式li具有有序规律数字显示； 5）、ol标签下不能直接放内容或其它标签，即使要放都必须放入li标签内，而li标签内可以再放ul ol等格式各样标签； 6）、ol li标签我们不常用，我们通常使用ul li列表标签。 一、Ul li无序列表标签语法与结构 ul li列表标签语法与html结构 ul? ????li/li? ????li/li? ????li/li? /ul? 以上3个li标签组放在ul标签之间。这里html ul li无序列表布局与ol li有序列表布局语法与结构相同，不同是默认无初始化CSS样式情况下一个是有序号列表（1、2、3、4 ；I、II、III这类有序序号），一个为没有序号的列表。无论是有序ol li列表还是无序的ul li列表，在日常时候都需要重新设置CSS样式使用布局。 至于我们看到了有的列表布局前有各式各样图标、数字样式，都是设置为ul li或ol li的背景实现美化。 为什么我们要重新赋予li列表样式呢？那是因为不同浏览器对ul li、ol li标签默认样式是不同的，有的前间隔宽有的窄，有的默认“点”效果大有的小，这样不便于统一，为了便于网页美观统一所以我们需要重新初始化LI列表标签CSS样式，再重新赋予想要的背景间隔等样式效果。 二、Ul li标签说明 此列表标签我们常常使用在文章标题列表、图片列表等有规律列表类内容排版布局。 这里说道无序列表，意思是ul下的li标签前面默认是没有序号、无规律编号的列表。但我们通常使用ul li比较多，一般遇到列表类型布局我们就使用ulli列表标签布局。 三、这个是DIVCSS5的文章标题列表标签运用图片 我们身边ul li实际应用截图 DIVCSS5的列表页均使用了ul li布局,如：/rumen/ (文章标题列表）/css-texiao/ （图片列表li应用）大家可以查看源代码分析ul li实际应用与用法。 四、无序ul li列表案例代码 ? - ? TOP 以下是ul li列表标签布局实例html代码 ul? ????li列表一:/li? ????li列表二:/li? ????li列表三:/li? /ul? 五、ul li案例截图 Ul li列表标签实例布局案例截图 ul li应用布局教程案例截图 六、divcss5对于ul li无序列表总结 1)、常常用于文章标题列表排版 2)、常常使用图片列表排版布局 3)、这里说无序标签列表，主要默认情况下ul li标签是没有规律序号 4)、ul li我们赋予CSS样式，即可实现各式各样的列表型有规律的列表内容布局 5)、ul标签下不能直接放内容或其它标签，即使要放都必须放入li标签内，而li标签内可以再放ul ol等格式各样标签。 Ol用法与ul差不多，主要区别如下： Div css5对于ol li有序列表总结 1）、常常用于文章标题列表排版 2）、常常使用图片列表排版布局 3）、ol li我们赋予CSS样式，即可实现各式各样的列表型有规律的列表内容布局 4）、ol li列表标签默认样式li具有有序规律数字显示。 5）、ol标签下不能直接放内容或其它标签，即使要放都必须放入li标签内，而li标签内可以再放ul ol等格式各样标签。 6）、ol li标签我们不常用，我们通常使用ul li列表标签 实例：纯CSS实现超简单的二级下拉导航菜单代码 本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下： 这是一款纯CSS菜单，二级下拉导航效果，是最简洁的CSS导航菜单，兼容性也很棒，IE7/8、火狐等都支持，而且它还是学习CSS菜单编写的典型教程，让你学会很多CSS技巧。 运行效果截图如下： 具体代码如下： !DOCTYPE html PUBLI