`
jj7878jj
  • 浏览: 10730 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

HTML CSS列表元素ul,ol,dl的研究与应用!

 
阅读更多
开篇跟大家推荐我自己也在使用的网页平面视频教程
我自己也是搜寻了很多网上的资料,发现现在使用的网页平面视频教非常不错!
希望对和我一样喜欢自学的朋友,一起实现理想!

 

 

传智播客网页平面设计学院http://icd.itcast.cn/
一些实例与应用
1、导航条
迄今为止,无序列表最常见的用途就是导航条,无论是水平的还是垂直的,自从基于表的布局已经过时,无序列表已经被当作导航元素的基础被广泛的应用,原因如下列表所示:
•无序列表属于block水平的元素,不需要再在外面包裹一个div以应用background或其他图形扩展。
•当样式被禁用的时候,列表样式会从容的降级,保持其本来样式,可确保导航项与页面其他内容表现的不一样。
•尽管无序列表不会仅是一个简单的列表,要添加诸如<a>标签之类的元素,但是额外的<li>元素会使导航栏以更灵活的形式表现。
•导航分为列表和/或副列表,允许使用辅助的技术(如屏幕阅读器),用户可以很轻松地跳过整个导航条。

2、下拉菜单


3、照片显示
HTML列表标签ul,li提供了有效的方式显示照片列表,原因与上面导航条提到的一样。下面就是一些以ul,li 标签为HTML基础的的照片画廊或是照片显示组件。
innerfade插件能让任意列表形式的内容依次淡入淡出切换显示,或是上下切换显示。内容可以是文字,图片等。支持各式标签,列表标签ul,li或是div,p标签都可以。
可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示,或是图片幻灯片的播放显示等。下图展示的是图片幻灯片切换的过渡阶段:



4、代码高亮
许多博客和教程网站含有JavaScript高亮代码的都是转换pre元素或textarea元素为有序列表,如下面的截图。其中有名的一款代码高亮插件是Alex Gorbatchev’s SyntaxHighlighter
下为类似高亮插件的效果截图:

5、博客评论
博客评论,包括这些WordPress驱动的站点,以有序列表构建,提供非常灵活的样式选项,并奠定了评论嵌套的基础。下图截自腾讯CDC T.d 昨天发布的The Story of Mr.Gray — Web 交互设计“灰色”的8类应用一文评论部分。

6、商品列表
最典型的代表莫过于淘宝网首页的“宝贝类目”一栏的万千商品类目的显示:


HTML标签元素就是砖砖瓦瓦,看上去很一般,但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力,于是有了我们多姿多彩的互联网。列表元素也是如此,虽然还有几十更多的用途和技术可以在本文中讨论,但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌,帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。
制作全套视频下载地址:
http://icd.itcast.cn/icd/video.shtml?from=wl

分享到:
评论

相关推荐

    div+css布局必了解的列表元素ul ol li dl dt dd详解

    dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div。

    变幻之美DIV+CSS

    定义列表dl的应用实例及组织页面元素的实例; ?有序列表ol的应用实例; ?CSS Sprites工作原理; ?制作图文混排的页面元素; ?通过修改CSS文件实现页面重构; ?在页面中插入Flash文件; ?class与id同时配合使用...

    DIV CSS网页布局中常用的列表元素

    DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,在css布局中经常用得到。

    高效整洁CSS代码原则

    dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table ...

    前端与移动开发之列表

    1.无序列表(重点) &lt;ul &gt; 任意内容 任意内容 任意内容 &lt;/ul&gt; 注意: ①没有顺序要求 ②ul标签里面只能有li 其他标签不允许 ③li标签中可以是任意元素 ④自带样式(默认是小圆点样式...

    css入门笔记

    ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小...

    HTML开发王

    6.1.3 解说列表(dl元素) 6.1.4 嵌套列表 6.1.5 列表的紧凑显示(compact 属性) 6.2 定制列表前的符号 6.2.1 定制无序列表符号(type属性) 6.2.2 定制有序列表中的序号(type属性) 6.2.3 定制有序列表中的列表项的起始数...

    HTML:超文本标题语言

    HTML:超文本标题语言 网页基本组成:音频,视频,链接,图片,文字 web标准的好处 1.让web的发展前景更加广阔 ...&lt;/dl&gt; &lt;dl&gt;是自定义列表,解释 &lt;table&gt; 表格 &lt;tr&gt; 单元格内文字 ...... ...... &lt;/table&gt;

    html入门到放弃笔记

    9、行内元素 与 块级元素 按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、...

Global site tag (gtag.js) - Google Analytics