No.7 数据列表


1.无序列表Unordered List

无序列表用block-level元素ul(unordered list)表示,每个item单独使用li(list)标记。如下代码所示:

<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>

2.有序列表Ordered List

(1)和无序区别:无序的每一项默认使用”.”表示,而有序的项通过数字表示。

(2)包含元素:有序列表是block-level级别,每个item单独使用li标记。如下代码所示:

<ol>
<li>Head north on N Halsted St</li>
<li>Turn right on W Diversey Pkwy</li>
<li>Turn left on N Orchard St</li>
</ol>

(3)start属性:标记item开始的数字是从哪个值开始:<ol start="30">表示列表标记从30开始。

(4)reversed属性:标记是否可以倒序,默认为false。如果设置<ol reversed>,原来是1,2,3,4,5现在变成5,4,3,2,1。

(5)value属性:用在li上,标记li的序列,接下来的li都从这个标记数字往上加。例如:代码<li value="9">Turn right on W Diversey Pkwy</li>后面的li标记都是9开始往上加。

3.嵌套列表

(1)使用元素:一般使用ul和ol嵌套使用。如下代码所示:

<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>

(2)随着嵌套关系,列表元素的标记会发生变化,例如默认ul的标记四“.”,现在变成小方块。

4.列表样式

(1)list-style-type:设置标记样式,下面的代码设置标记为一个正方形。

ul {
list-style-type: square;
}

(2)list-style-type包含的值具体如下:

“List Style Type Value”    “Content”
none “No list item”
disc “A filled circle ”
circle “A hollow circle”
square “A filled square”
decimal “Decimal numbers”
decimal-leading-zero “Decimal numbers padded by initial zeros”
lower-roman “Lowercase roman numerals”
upper-roman “Uppercase roman numerals”
lower-greek “Lowercase classical Greek”
lower-alpha / lower-latin “Lowercase ASCII letters”
upper-alpha / upper-latin “Uppercase ASCII letters”
armenian “Traditional Armenian numbering”
georgian “Traditional Georgian numbering”

(3)自定义标记:使用自定义图片设置marker,必须先设置list-style-type:none,然后设置li的background样式。如下代码设置标记为一个arrow图标,图标起始位置水平为0,垂直位置为元素li高度的50%处。

li {
background: url("arrow.png") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}

(4)list-style-position:设置标记的位置,包含值有outside、inside、inherit,默认为outside。

(5)list样式简写:格式为list-style:list-style-type list-style-position,如下代码所示:

ul {
list-style: circle inside;
}
ol {
list-style: lower-roman;
}

5.水平显示列表方法

(1)设置display:通过设置li的display为inline或者inline-block,可水平显示列表。同时列表的标记被移出。如下代码所示:

HTML:
<ul>
<li>Orange</li>
<li>Green</li>
<li>Blue</li>
</ul>
CSS:
li {
display: inline-block;
margin: 0 10px;
}

(2)设置float:display没有保留marker标记,通过float:left也可以水平显示并且保留了marker。但是必须设置margin排列li。如下代码设置float等于left,然后设置水平间距为20px。

li {
float: left;
margin: 0 20px;
}

6.设置列表展现导航效果

(1)一般导航我们可以给第一个和最后一个元素设置圆角,获取第一个和最后一个元素可通过CSS:li:first-child、li:last-child。

(2)设置li的display:display: inline-block。

(3)设置normal和和mouseover样式,如下代码所示:

.navigation a{
background: #95870;
background: linear-gradient(#49708f, #293f50);
border:1px solid rgba(0, 0, 0, 0.3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
} .navigation a:hover{
background: #314b60;
text-shadow: 0 10px 1px rgba(0, 0, 0, .3);
}

(4)设置ul字体和间距:直接看参考代码如下。

ul{
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-transform: uppercase;
}

HTML、CSS知识点,面试开发都会需要--No.7 数据列表的更多相关文章

  1. HTML、CSS知识点,面试开发都会需要--No.4 内容布局

    No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...

  2. HTML、CSS知识点,面试开发都会需要--No.3 盒子模型

    No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...

  3. HTML、CSS知识点,面试开发都会需要--No.2 CSS

    No.2  CSS 1.选择器类型 选择器类型包括:type.class.id. 2.引用外部css文件 使用link元素,添加rel和href属性:<link rel="styles ...

  4. HTML、CSS知识点,面试开发都会需要--No.1 HTML

    No.1   HTML 1.网页结构 网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该包含编码格式.关键字.网页描述信息.简单格式如下: <!DOCTYPE html&g ...

  5. HTML、CSS知识点,面试开发都会需要--No.6 设置背景

    No.6 设置背景 1.background (1)如何设置背景:背景可通过color.image.gradient渐变或者组合方法设置. (2)background-color:颜色格式可以是十六进 ...

  6. HTML、CSS知识点,面试开发都会需要--No.5 文章段落

    No.5 文章段落 1.文字属性 文字属性包含font-*和text-*两类. 2.基于font的属性 (1)font-family:字体属性,多个字体之前用逗号隔开.如果第一个字体没找到,则依次找后 ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. ajax的请求,参数怎么管理?

    一般发送一条ajax 然后点击界面需要更改查询条件,第一种是做一个form表单比较合适的设计.更改了参数回收表单然后重新发送ajax: 还有一种是把参数缓存到变量中,然后更改了条件修改变量再次重发aj ...

  2. Linux中非正常关闭vi编辑器产生swp文件怎么删除

    Linux中非正常关闭vi编辑器产生swp文件,会导致编辑文件时提示如下内容(图我是从网上找的): 这是因为异常关闭vi编辑器产生swp文件导致,假设编辑的文件名是file.sh,那么生成的swp文件 ...

  3. Python对List中的元素排序

    首先定义一个compare函数: def compare(sf1, sf2): if (sf1.value > sf2.value): return -1; elif (sf1.value == ...

  4. Effective Java 第三版——67. 明智谨慎地进行优化

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  5. Centos-7.x 下子网掩码的配置

    [背景] 今天在自己的虚拟机上安装上了centos-7.6操作系统,应该是安装的过程中大意了:安装完成后虚拟机可以正常访问外网但是 我的笔记本连接不上虚拟机. 笔记本的IP地址:172.16.192. ...

  6. Kubernetes 1.12公布:Kubelet TLS Bootstrap与Azure虚拟机规模集(VMSS)迎来通用版本号

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/M2l0ZgSsVc7r69eFdTj/article/details/82880341 https: ...

  7. 微信小程序--data的赋值与取值

    通过小程序官方文档可知:Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等.其中的参数data用来设置初始数据,WXML 中的动态数据 ...

  8. Oracle 11gR2 RAC DBCA无法识别ASM磁盘组(ORA-19504,ORA-15045,ORA-17502,ORA-15081)

    ORA-19504: failed to create file "+DATA" ORA-15045: ASM file name '+DATA' is not in refere ...

  9. spring源码:学习线索

    一.spring xml配置(不包括AOP,主要了解在初始化及实例化过程中spring配置文件中每项内容的具体实现过程,从根本上掌握spring) <bean>的名字 &,alia ...

  10. Canvas组件:画布,可以实现动画操作。

    Module  10 Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中 ...