仓酷云

标题: 带来一篇列表标志ul,ol,dl:分歧扫瞄器的兼容成绩 [打印本页]

作者: 第二个灵魂 时间: 2015-1-15 22:59
标题: 带来一篇列表标志ul,ol,dl:分歧扫瞄器的兼容成绩
WHATWG致力于Web表单和应用程序，而W3C（WorldWideWebConsortium，万维网联盟）专注于XHTML2.0。在2006年，双方决定进行合作.来创建一个新版本的HTML。破洛洛文章简介：HTMLCSS列表元素ul,ol,dl的研讨与使用。
1、能够看作空话的媒介
HTML列表元素（如ol,ul,dl）等在现下的网站开辟制造中有着十分普遍的使用，但是，它们的在分歧扫瞄器下的性情却纷歧样。本文就是剖析这些列表元素的基础特征，在分歧扫瞄器下的各种兼容性成绩，和先容一些罕见的使用等。
对初学者或是有必定CSS方面履历的偕行们应当会有匡助的。
2、HTML中可用的列表元素
1、无序列表：ul
无序列表是最常利用的列表，下图显现了无序列表在分歧扫瞄器下的显现：

demo页面
正如下面显现的，无序列表在分歧扫瞄器下的默许设置是由些许差别的。固然，在现在实践的网站项目上是很少看到没有任何润色的无序列表了。个中缘故原由之一就是CSS的重置(cssreset)，已将无序列表默许的列表项目标记，margin或padding都往失落了。
无序列表的一些特定的css属性有list-style-type，list-style-position，和list-style-image。这些属性设置了列表项目标记的范例，标志的地位，和利用图片取代标志。这三个属性可使用list-style举行兼并缩写。
list-style-type属性能够设置为一些分歧的值，上面图表展现的就是部分值的页面效果：

依附于用户的扫瞄器及操纵体系，某些list-style-item值大概不克不及准确显现，一般默许为十进制数值，用无需列表完成递增数值是不保举的，由于如许“无序列表”其自己的语义已不复存在了。
list-style-position针关于列表标志的地位，能够被设置为outside（默许）或是inside。假如list-style-image被设置的话，其也会影响图片的地位。
list-style-image属性能够给无序列表一个自界说的举世无双的体现，不幸的是，在IE下利用此办法增加项目编号是bug多多，故很少被利用。一个更好的办理办法是增加backgroundimage到列表的li元素上，并响应的调剂backgroundimage的地位，并设置为no-repeat。在maxdesign.com上，已经由过程分步解说演示了这个办法，并且在一切的扫瞄器下都事情优秀。
2、有序列表：ol
有序列表在当列表项目标每一个列表项今朝面必要一个递增值的时分利用（比方1,2,3等）。有序列表的列表范例list-style-type能够被设置为任安在无序列表下能够设置的值。在年夜部分情形下，有序列表要末后面是个递增数值，要末后面没有任何标志。不倡议利用有序列表完成相似于无序列表的体现。由于如许，有序列表自己的语义已不准确了。

3、界说列表：dl
界说列表用来标志已界说的列表项，它们包含界说题目(dt)和界说自己(dd)。界说列表项目没有需要完整婚配，上面的代码在严厉的XHTML下是完整正当的：

<dl><dt>无线音乐咪咕汇</dt><dt>哥本哈根集会</dt><dd>《十月围城》</dd></dl>

复制代码

如许，您能够在单个dd上面利用多个dt，也能够在单个dt上面利用多个dd。
界说列表的视觉显现，默许情形下，各个扫瞄器的显现几近是分歧的，以下图所示：

demo页面
上图对应的HTML代码以下：

<dl><dt>题目</dt><dd>这里是界说的内容</dd></dl><dl><dt>抢手影戏</dt><dd>十月围城</dd><dd>刺陵</dd><dd>三枪拍案惊异</dd><dd>阿凡达</dd></dl><dl><dt>热门存眷</dt><dd>股市</dd><dd>房价</dd><dd>除夕</dd><dd>曹操墓</dd></dl>

复制代码

4、过期减少的列表：menu&dir
<menu>和<dir>元素，从手艺上说，也能够称为“HTML列表”，但它们在XHTML中已过期减少了，以是这里不具体会商它们。
5、HTML5中的列表
在HTML中，无序列表基础上坚持稳定，固然仿佛如今它被简称为“列表”，新的元素将被用来包裹列表看成导航利用。
ol元素有稍微的改动，它取得了两个新属性：reversed，这是一个布尔值，用来暗示列表是上升仍是下落；start，这是个整数，用以宣布有序列表的出发点。
别的，<figure>和<details>元素将被增添，它们会有子元素，个中包含<dt>和<dd>元素。
更多关于HTML5方面的常识能够拜见淘宝空雁的揭秘HTML5和CSS3【珍珠奶茶帮】的这篇文章。别的您还能够点击这里检察在线的ppt。
3、扫瞄器差别
上面展现的都是一些对照罕见的且分明的扫瞄器差别。
1、列表元素增加display:block后
在InternetExplorer8,Opera9,Chrome,Firefox2&3,andSafari下，增加display:block会让有序或无序列表中li元素的项目编号消散。

但在IE6和IE7下，增加display:block项目标记仍旧存在：

demo页面
2、列表项目增加float:left
在IE6和IE7下，给列表项目（没有其他款式）增加float:left将会使列表项程度对齐，同时项目标记（或项目编号）消散。以下图所示，截自IE7扫瞄器

IE8和其他一切扫瞄器下，列表项会程度对齐，可是项目标记（或项目编号）仍旧可见。

demo页面
当列表项浮动的时分，我们必需记着别的一个要点，就是列表容器（ul元素）在外部唯一浮动元素时会逝世翘翘，这在一切的扫瞄器下城市以不异的体例产生，增加overflow:hidden是办理此成绩的办法之一。
为了能在分歧扫瞄器下到达大抵不异的float:left效果，最好的办法是是利用display:inline。
3、IE下有“Layout”的有序列表
在IE6和IE7下，假如有序列表中的列表项有“Layout”，则有序列表的数值将不会增添，显现为“1”，以下图所示：

demo页面
hasLayout属性不克不及被间接设置，可是假如一个元素设置了宽高，浮动，相对定位守候就会改动haslayout。
4、IE6&IE7下的padding及margin
在年夜部分的扫瞄器下，为了移除项目标记或项目编号，让内容左边对齐显现，必要设置左padding为0，可是这在IE6和IE7下其实不管用，在IE6，7下必要设置左margin为0取而代之。见下图：

demo页面
5、在以是扫瞄器下完成分歧的列表款式
为了不在分歧扫瞄器下处置列表款式的时分呈现成绩，最好的办法是利用在后面提到的CSS的重置(cssreset)，cssreset几近能够将扫瞄器一切默许设置差别设置为最小，并同意一切扫瞄器下都在一样的基本上事情。固然某些款式下仍然存在差别，可是它们不会被看成一个难点来处置了。
别的，正如后面提到了，最好完整制止利用list-style-image属性，而以设置background取代，这是一个跨扫瞄器的，易于保护的无序列表的自界说标记办理办法。
4、一些实例与使用
1、导航条
迄今为止，无序列表最多见的用处就是导航条，不管是程度的仍是垂直的，自从基于表的结构已过期，无序列表已被看成导航元素的基本被普遍的使用，缘故原由以下列表所示：
•无序列表属于block程度的元素，不必要再在表面包裹一个div以使用background或其他图形扩大。
•当款式被禁用的时分，列表款式会沉着的升级，坚持其原本款式，可确保导航项与页面其他内容体现的纷歧样。
•只管无序列表不会仅是一个复杂的列表，要增加诸如<a>标签之类的元素，可是分外的<li>元素会使导航栏以更天真的情势体现。
•导航分为列表和/或副列表，同意利用帮助的手艺（如屏幕浏览器），用户能够很轻松地跳过全部导航条。
比方：接纳jQuery完成的LavaLamp殊效菜单

2、下拉菜单
比方前段工夫我制造的一个下拉菜单实例：jQuery之利用slideToggle完成垂直下拉菜单

效果demo
3、照片显现
HTML列表标签ul,li供应了无效的体例显现照片列表，缘故原由与下面导航条提到的一样。上面就是一些以ul,li标签为HTML基本的的照片画廊或是照片显现组件。
jCarousel
jCarousel照片切换传送jQuery插件供应了可自界说的jQuery功效，利用了无序列表，能够以多种分歧的体例显现传送效果。我已将此插件翻译成中文，您能够狠狠地址击这里：jCarousel中文demo首页
InnerFade–jQuery
innerfade插件能让恣意列表情势的内容顺次淡进淡出切换显现，或是高低切换显现。内容能够是笔墨，图片等。撑持各式标签，列表标签ul,li或是div，p标签都能够。
能够十分轻松的完成诸如旧事或通告内容的主动随机切换显现，或是图片幻灯片的播放显现等。下图展现的是图片幻灯片切换的过渡阶段:

此插件demo狠狠地址击这里：InnerFadedemo页面
4、代码高亮
很多博客和教程网站含有JavaScript高亮代码的都是转换pre元素或textarea元素为有序列表，以下面的截图。个中着名的一款代码高亮插件是AlexGorbatchev’sSyntaxHighlighter。
下为相似高亮插件的效果截图：

您能够点击这里预览效果（demo页面展现的是jQuerycookie插件代码）。
5、博客批评
博客批评，包含这些WordPress驱动的站点，以有序列表构建，供应十分天真的款式选项，并奠基了批评嵌套的基本。下图截自腾讯CDCT.d今天公布的TheStoryofMr.Gray—Web交互计划“灰色”的8类使用一文批评部分。

6、商品列表
最典范的代表莫过于淘宝网首页的“宝物类目”一栏的万千商品类目标显现：

从截图能够看出，这里类目标显现利用的是dl,dt,dd界说列表完成的。
7、其他
列表元素的其他使用另有良多，比方多图片上传的进度条，CSS步骤菜单，堆叠菜单等等。这里就纷歧一展现了。
5、无关紧要的总结
HTML标签元素就是砖砖瓦瓦，看上往很一样平常，可是到了优异的计划师手里和优异的工人那边就会发扬出无穷的潜力与魅力，因而有了我们多姿多彩的互联网。列表元素也是云云，固然另有几十更多的用处和手艺能够在本文中会商，可是本文展现的一些器材以让我们完全的懂得HTML中列表标签元素的的概貌，匡助您用列表这类砖瓦构建出大度的“互联网修建”。
6、参考浏览与延长浏览
•TheListamatic
•CSSDesign:TamingLists
•CSSListsonW3Schools
•Definitionlists–misusedormisunderstood?
•CSS-StyledLists:20+Demos,TutorialsandBestPractices
•ListElementsonSitepoint’sHTMLReference
</p>
WHATWG版和W3C版的HTML5规范虽然根源相同，在一些领域却已经产生分歧。

作者: 若天明 时间: 2015-1-17 20:08
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 小女巫 时间: 2015-1-26 22:39
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 第二个灵魂 时间: 2015-2-5 05:29
可以使用 CSS 检查工具进行设计。

作者: 冷月葬花魂 时间: 2015-2-11 07:02
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 蒙在股里 时间: 2015-3-2 00:39
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 海妖 时间: 2015-3-17 22:00
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 柔情似水 时间: 2015-3-25 07:22
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

欢迎光临仓酷云 (http://ckuyun.com/)