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. jsp中添加过滤器,实现校验用户身份

    我现在需要实现一个功能,就是用户登录前不允许访问系统,我使用的是jsp的过滤器来实现的. 先把filter过滤器的代码粘出来: package com.day8.filter; import java ...

  2. protobuf的简单使用

    操作系统 : CentOS7.3.1611_x64 gcc版本 :4.8.5 go 版本 : go1.8.3 linux/amd64 Python 版本 : 2.7.5 libprotoc : 2.5 ...

  3. PL/SQL学习笔记之日期时间

    一:PL/SQL时间相关类型 PL/SQL提供两个和日期时间相关的数据类型: 日期时间(Datetime)数据类型 时间间隔类型 二:日期时间类型 datetime数据类型有: DATE TIMEST ...

  4. 全面理解Java内存模型(JMM)及volatile关键字(转载)

    关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型(@Annotation) 深入理解Java类加载器(ClassLoad ...

  5. Charles配置问题

    1. 手机访问chls.pro/ssl下载证书时候,用常用安卓手机不同的浏览器(可以多试几种浏览器) 会出现两种情况,一种是直接打开下载getssl.crt文件 一种是没有反应,直接打开网页了 这时候 ...

  6. 【转载】vi/vim使用进阶: 指随意动,移动如飞 (一)

    vi/vim使用进阶: 指随意动,移动如飞 (一) << 返回vim使用进阶: 目录 本节所用命令的帮助入口: :help usr_03.txt :help motion.txt :hel ...

  7. C#通过用户名与密码访问共享目录

    C#通过用户名与密码访问共享目录 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  8. Jquery on方法绑定事件后执行多次

    每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });

  9. 如何在phpstorm中查看yaf框架源码

    1.到github下载yaf框架的doc 下载链接 https://github.com/elad-yosifon/php-yaf-doc/archive/master.zip 2.解压zip包 3. ...

  10. java 中 ResourceBundle 使用 国际化使用

    java 中 ResourceBundle 使用 可以根据以下类进行获取国际化文件: package org.mybatis.generator.internal.util.messages; imp ...