html 中的列表

摘要:
html中的列表可以分为1.无序列表2.有序列表3.定义列表。以下是几个列表的具体内容:1.无序列表。无序列表的格式如下:li11li1无序列表具有一些内置默认样式,这些内置默认样式在不同浏览器中的效果不同。有序列表列表的列表类型可以设置为可以在无序列表下设置的任何值。

html 中列表可以分为 1.  无序列表(ul--li 的形式)

          2.  有序列表(ol li的形式)

          3.  定义列表(dl 的形式)

下面来看几种列表的具体内容:

  1.无序列表.

  无序列表的格式如下:    

<ul>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
</ul>    

  无序列表有一些自带的默认样式,而且这些自带的默认样式在不同的浏览器中显示出来的效果是不一样的。我们一般使用 reset.css 去清楚这些默认样式间的差异。

  无序列表的一些特定的css属性有list-style-type,list-style-position,和list-style-image。这些属性设置了列表项目符号的类型,标记的位置,以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

  2. 有序列表:

    有序列表的 html 代码一般如下:

<ol>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
    <li> li1</li>
</ol>  

  有序列表常常在列表前面需要一个递增值的时候使用(如:1,2,3)。有序列表的列表类型list-style-type可以被设置为任何在无序列表下可以设置的值。在大部分情况下,有序列表要么前面是个递增数值,要么前面没有任何标记。不建议使用有序列表实现类似于无序列表的表现。因为这样,有序列表本身的语义已经不正确了。

  3. 定义列表:

  定义列表用来标记已经定义的列表项,它们包括定义标题(dt)以及定义本身(dd)。定义列表项目没有必要完全匹配,下面的代码在严格的XHTML下是完全合法的:  

<dl class="fore">
   <dt><a href="#nogo">男 装:</a></dt>
   <dd>addidas</dd>
   <dd>nike</dd>
   <dd>anta</dd>
</dl>

  想要看效果可以参考demo页面

实例和应用:

  

一些实例与应用
1、导航条
迄今为止,无序列表最常见的用途就是导航条,无论是水平的还是垂直的,自从基于表的布局已经过时,无序列表已经被当作导航元素的基础被广泛的应用,原因如下列表所示:

•无序列表属于block水平的元素,不需要再在外面包裹一个div以应用background或其他图形扩展。
•当样式被禁用的时候,列表样式会从容的降级,保持其本来样式,可确保导航项与页面其他内容表现的不一样。
•尽管无序列表不会仅是一个简单的列表,要添加诸如<a>标签之类的元素,但是额外的<li>元素会使导航栏以更灵活的形式表现。
•导航分为列表和/或副列表,允许使用辅助的技术(如屏幕阅读器),用户可以很轻松地跳过整个导航条。

垂直下拉导航条demo

本文摘要自张鑫旭大神的博客,博客内容链接:http://www.zhangxinxu.com/wordpress/?p=489

免责声明:文章转载自《html 中的列表》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇通过WriteProcessMemory改写进程的内存CVPR 2019轨迹预测竞赛冠军方法总结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

redis内存满了怎么办?

redis最为缓存数据库,一般用于存储缓存数据,用于缓解数据库压力,但是缓存太多,内存满了怎么办呢。如果集群超过半数以上master挂掉,无论是否有slave,集群进入fail状态。那么当所需内存,超过maxmemory怎么办?这个时候就该配置文件中的maxmemory-policy出场了。...

WPF LiveChart 图表详解

我不喜欢看文本版。单击我观看视频。本文主要介绍LiveChart中图表的用法。WPF:数据绑定、数据显示样式等。导入LiveChart.WpfNuGet以搜索LiveChart包并安装LiveChart.WPF。引用LiveChart.WPF在使用的接口中,引用LiveChart.WPF的类库xmlns:lvc=“clr-namespace:LiveChar...

VSCode, 当今最流行的免费开源代码编辑器,微软出品,必属精品

Visual Studio代码是一个轻量级但功能强大的源代码编辑器,可以在桌面上运行,可以用于Windows、MacOS和Linux。直接在编辑器中检查差异,暂时保存文件并提交。Visual Studio代码产品在初始操作中的内部代码控制可以通过编辑器内的SCM支持(包括丰富的Git集成)加快发布周期。用户界面-介绍VSCode编辑器的基本UI、命令和功能。...

ElasticSearch的高级复杂查询:非聚合查询和聚合查询

它与SQL中的GROUPBY类似,但功能更强大。为了更好地理解这个概念,请参阅https://blog.csdn.net/dm_vincent/article/details/42387161Buckets(Bucket):满足特定条件的文档集合。度量:为存储桶中的文档计算的统计信息。一般来说,它可以大致转换为SQL:从tablegroupbyname中选择...

sqlserver 计算 百分比

selectltrim+'%'As百分比NUMERIC(P,S)P的默认值是:38S的默认值是:-84~127numeric(a,b)函数有两个参数,前面一个为总的位数,后面一个参数是小数点后的位数,例如numeric(5,2)是总位数为5,小数点后为2位的数,也就是说这个字段的整数位最大是3位。...

硬中断与软中断的区别!

在多核系统上,一个中断通常只能中断一个CPU(也有一种特殊情况,即主机上有一个硬件通道。它可以在没有主CPU支持的情况下同时处理多个中断。软中断:1。软中断与硬中断非常相似。生成软中断的进程必须是当前正在运行的进程,因此它们不会中断CPU。...