HTML、CSS知识点,面试开发都会需要--No.7 数据列表
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 数据列表的更多相关文章
- HTML、CSS知识点,面试开发都会需要--No.4 内容布局
No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...
- HTML、CSS知识点,面试开发都会需要--No.3 盒子模型
No.3 盒子模型 1.盒子模型属性 (1)包含的CSS属性:width.height.padding.border.margin. 1.盒子模型属性 (1)包含的CSS属性: width.heigh ...
- HTML、CSS知识点,面试开发都会需要--No.2 CSS
No.2 CSS 1.选择器类型 选择器类型包括:type.class.id. 2.引用外部css文件 使用link元素,添加rel和href属性:<link rel="styles ...
- HTML、CSS知识点,面试开发都会需要--No.1 HTML
No.1 HTML 1.网页结构 网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该包含编码格式.关键字.网页描述信息.简单格式如下: <!DOCTYPE html&g ...
- HTML、CSS知识点,面试开发都会需要--No.6 设置背景
No.6 设置背景 1.background (1)如何设置背景:背景可通过color.image.gradient渐变或者组合方法设置. (2)background-color:颜色格式可以是十六进 ...
- HTML、CSS知识点,面试开发都会需要--No.5 文章段落
No.5 文章段落 1.文字属性 文字属性包含font-*和text-*两类. 2.基于font的属性 (1)font-family:字体属性,多个字体之前用逗号隔开.如果第一个字体没找到,则依次找后 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
随机推荐
- Faiss安装
一.上策:使用现成的faiss 找到别人(同事或同学)的python目录,找到faiss文件夹,复制到本地,并将其添加到PYTHONPATH下. 二.中策:使用anaconda anaconda上面的 ...
- Unity应用架构设计(9)——构建统一的 Repository
谈到 『Repository』 仓储模式,第一映像就是封装了对数据的访问和持久化.Repository 模式的理念核心是定义了一个规范,即接口『Interface』,在这个规范里面定义了访问以及持久化 ...
- Unity应用架构设计(6)——设计动态数据集合ObservableList
什么是 『动态数据集合』 ?简而言之,就是当集合添加.删除项目或者重置时,能提供一种通知机制,告诉UI动态更新界面.有经验的程序员脑海里迸出的第一个词就是 ObservableCollection.没 ...
- Effective Java 第三版——89. 对于实例控制,枚举类型优于READRESOLVE
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- zsh+on-my-zsh配置教程指南(程序员必备)
本文以CentOS 7/Mac 为例,介绍zsh的配置使用教程. 准备 查看当前环境shell echo $SHELL <!-- more --> 查看系统自带哪些shell cat /e ...
- DB2修改自增主键起始值
ALTER TABLE DB2INSTL.BT_AUDIT_COUNTY_DIFF_HISTORY_PX ALTER COLUMN ID RESTART WITH 18239
- 性能测试工具--SIEGE安装及使用简介 siege压力测试
官方网站http://www.joedog.org/ 概述 Siege是一个多线程http负载测试和基准测试工具.它有3种操作模式: 1) Regression (when invoked by bo ...
- SpringBoot面试题及答案整理
1. Spring 和 SpringBoot 有什么不同? Spring 框架提供多种特性使得 web 应用开发变得更简便,包括依赖注入.数据绑定.切面编程.数据存取等等. 随着时间推移,Spring ...
- linux下用php将doc、ppt转图片
解决方案分成两步: (1)调用unoconv命令将 doc.ppt 转 pdf (2)使用 imagemagick将 pdf 转图片 步骤 1.安装unoconv sudo apt-get insta ...
- 手写一个selenium浏览器池
维护一组浏览器,实现每分钟1000次查询.DriverPool使用变幻版只初始化一次的单例模式.维护每个浏览器的当前是否使用的状态. 不需要等待请求来了,临时开浏览器,开一个浏览器会耽误6秒钟. 可以 ...