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(知识 ...
随机推荐
- jsp中添加过滤器,实现校验用户身份
我现在需要实现一个功能,就是用户登录前不允许访问系统,我使用的是jsp的过滤器来实现的. 先把filter过滤器的代码粘出来: package com.day8.filter; import java ...
- protobuf的简单使用
操作系统 : CentOS7.3.1611_x64 gcc版本 :4.8.5 go 版本 : go1.8.3 linux/amd64 Python 版本 : 2.7.5 libprotoc : 2.5 ...
- PL/SQL学习笔记之日期时间
一:PL/SQL时间相关类型 PL/SQL提供两个和日期时间相关的数据类型: 日期时间(Datetime)数据类型 时间间隔类型 二:日期时间类型 datetime数据类型有: DATE TIMEST ...
- 全面理解Java内存模型(JMM)及volatile关键字(转载)
关联文章: 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(enum) 深入理解Java注解类型(@Annotation) 深入理解Java类加载器(ClassLoad ...
- Charles配置问题
1. 手机访问chls.pro/ssl下载证书时候,用常用安卓手机不同的浏览器(可以多试几种浏览器) 会出现两种情况,一种是直接打开下载getssl.crt文件 一种是没有反应,直接打开网页了 这时候 ...
- 【转载】vi/vim使用进阶: 指随意动,移动如飞 (一)
vi/vim使用进阶: 指随意动,移动如飞 (一) << 返回vim使用进阶: 目录 本节所用命令的帮助入口: :help usr_03.txt :help motion.txt :hel ...
- C#通过用户名与密码访问共享目录
C#通过用户名与密码访问共享目录 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...
- Jquery on方法绑定事件后执行多次
每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });
- 如何在phpstorm中查看yaf框架源码
1.到github下载yaf框架的doc 下载链接 https://github.com/elad-yosifon/php-yaf-doc/archive/master.zip 2.解压zip包 3. ...
- java 中 ResourceBundle 使用 国际化使用
java 中 ResourceBundle 使用 可以根据以下类进行获取国际化文件: package org.mybatis.generator.internal.util.messages; imp ...