 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
Dreamweaver考试10套试题
下载积分：500
内容提示：Dreamweaver考试10套试题
文档格式：PDF|
浏览次数：143|
上传日期： 00:21:00|
文档星级：
该用户还上传了这些文档
Dreamweaver考试10套试题
官方公共微信CSS中怎样设置HTML中的有序列表和无序列表？有序列表和无序列表有什么区别？
发布日期： 09:30
有序列表及无序列表
本章我们主要学习CSS中如何设置HTML中的有序列表和无序列表？有序列表和无序列表有什么区别？下面我们就做一下具体讲解，希望大家多多支持中国站长网络学院。
CSS列表属性作用如下：
设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像
列表 在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
不同的列表项标记 list-style-type属性指定列表项标记的类型是：:
ul.a {list-style-type:} ul.b {list-style-type:} ol.c {list-style-type: upper-} ol.d {list-style-type: lower-} 运行效果： 一些值是无序列表，以及有些是有序列表。
作为列表项标记的图像 要指定列表项标记的图像，使用列表样式图像属性：
ul { list-style-image: url('sqpurple.gif'); } 运行效果： 上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。 如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下 浏览器兼容性解决方案 同样在所有的浏览器，下面的例子会显示的图像标记：
ul { list-style-type: padding: 0 margin: 0 } ul li { background-image: url(sqpurple.gif); background-repeat: no- background-position: 0px 5
padding-left: 14
} 运行效果： 例子解释：
设置列表样式类型为没有删除列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左0px和上下5px） 用padding-left属性吧文本置于列表中
列表 -缩写属性 在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。 为列表使用缩写属性，列表样式属性设置如下：
ul { list-style: square url(&sqpurple.gif&); } 运行效果： 如果使用缩写属性值的顺序是：
list-style-type list-style-position (有关说明，请参见下面的CSS属性表) list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
所有的CSS列表属性
(window.slotbydup = window.slotbydup || []).push({
id: '1063561',
container: s,
size: '230,230',
display: 'inlay-fix'
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”，也就是层叠样式表。层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。CSS3是CSS的升级版，本教程会一起介绍。
免责声明：以上教程信息由会员自行搜集、整理、发布，内容的真实性、准确性和合法性由发布会员负责。站长学院对此不承担任何责任。32866人阅读
编写有序列表，代码如下：
&h2&数字显示&/h2&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
&h2&字母显示&/h2&
&ol type=&a&&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
&h2&小写罗马数字显示&/h2&
&ol type=&i&&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
&h2&大写罗马数字显示&/h2&
&ol type=&I&&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
&h2&数字显示,自己确定开始数字&/h2&
&ol start=&5&&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
显示效果为：
无序列表的代码如下：
********默认为实心圆*********
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
********空心圆显示*********
&ul type=&circle&&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
********实心矩形显示*********
&ul type=&square&&
&li&第一天&/li&
&li&第二天&/li&
&li&第三天&/li&
&li&第四天&/li&
显示效果为：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：310177次
积分：2583
积分：2583
排名：第10534名
原创：62篇
评论：47条
(1)(3)(1)(7)(6)(2)(2)(18)(12)(10)我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子 - 拼命工作 - 推酷
我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子 - 拼命工作
&&&&&& 昨天写的那篇文章《
》，基本上有1000人左右看了，那边文章是我站在前人的肩膀上修改来的，添加了截图和说明，合并了例子，使之更容易被初学者接受。
&&&&&& 今天我要讲html的有序列表和无序列表及常用例子，网上搜索了一番，没有发现太好的文章，决定自己动手，丰衣足食。
&&&&&& 在我搜文章或知识点的时候，有一点启发，总是想先看效果图，看看效果是什么样子，然后在决定是否要继续看下去，就像去相亲，先看看双方是否对上眼了，先有外貌的吸引，才有继续交往下去的必要，当然，如果你遇到了一个女神，然后对她穷追猛打，只要方式得当，追到手的希望还是蛮大的。
&&&&&& 大家的时间都是宝贵的，因此，我决定，先展示效果图，然后再讲知识点，有兴趣的看看，没兴趣的闪过。
&&&&&& 本来，我以为无序列表用的最多，有序列表次之，自定义列表很少用。搜了几个网站发现，有序列表也很少用。先看截图吧。
&&&&&& 无序列表用的最多，下图是淘宝导航栏的截图，用的就是无序列表，后面我会把这个当做例子讲解。
& & & & & & & &
&&&&&& 下图是自定义列表，也是淘宝的，不是我给淘宝做广告，而是淘宝太有名了，我拿来给大家研究一下。
&&&&&& 吃水不忘挖井人，.cn给我们初学者提供了太多的免费资料，在此，免费为她宣传一下，下面这个有序列表的截图正式从该网站例子中得来，本文章的例子也将采用该网站的例子。
&&&&&& 一、下面开讲，从无序列表开始。
&&&&&& 无序列表的英文全称叫unorder list，不能粗浅的理解为没有顺序的列表，它其实还是有顺序的，把哪个选项写在前面，它就会在前面显示。
&&&&&& 这里的“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是前面增加一个圆点来表示。
&&&&&& 不过，大家一般也讨厌这些圆点，加上这些圆点会很丑，因此，大家会通过设置样式把它去掉。
&&&&&& 下面先看一个简单的例子：
代码如下：
&h4&程序员喜欢的习惯：&/h4&
&li&讲代码&/li&
&li&写博客&/li&
&li&看女神&/li&
&li&嗑瓜子&/li&
知识讲解：
无序列表使用一对闭合的标签表示，&ul&&/ul&。内部的一项使用 &li&内容&/li&来表示。
可以看到各项之前加了一个圆点，可以通过ul标签的type属性来修改这个修饰符。
(1)&&& &ul type=&disc&& 显示为一个圆点，是默认值。
(2)&&& &ul type=&circle&&显示为一个空心圆圈。如图：
(3)&&& &ul type=&square&&显示为一个实体正方形。如图：
最常见的就是使用样式直接把修饰符干掉。修改方式如下：
&ul style=&list-style-type:& &
效果图如下：
&&&&&& 上面的例子，把无序列表的基本知识点讲完了。下面看淘宝导航栏的例子。
效果图如下：
源代码如下：
&style type=&text/css&&
border-bottom:2px solid #f40;
font-weight:700
.nav .nav-bd,.nav .nav-hd{
margin-top:4
height:33px
.nav .nav-bd li,.nav .nav-hd li{
position:relative
.nav .nav-bd a,.nav .nav-hd a{
line-height:28
float:left
.nav .nav-bd a:hover,.nav .nav-hd a:hover{
background:#f4f4f4
.nav .nav-bd .nav-ad,.nav .nav-hd .nav-ad{
padding:0;
height:33px
.nav .nav-bd .nav-ad:hover,.nav .nav-hd .nav-ad:hover{
background:0 0
.nav .nav-bd .nav-ad img,.nav .nav-hd .nav-ad img{
height:33px
.nav .nav-hd{
float:left
.nav .nav-hd li{
margin:0 10
text-align:
font-size:16px
.nav .nav-hd li a{
padding:0 3
color:#f40
&div class=&nav&&
&ul class=&nav-hd&&
&a href=&/?spm=1.4dau.1&&天猫&/a&
&a href=&/?spm=1.4dau.2&&聚划算&/a&
&a href=&/?spm=1.4dau.3&&超市&/a&
淘宝的导航栏是由多个无序列表ul组成，这里摘出来第一个无序列表来分析。
在标签&style type=&text/css&&&/style&内部的代码都是我从淘宝“偷”出来的样式源代码，这个等以后给你讲css的时候再说，不用看这部分代码，它的作用就是给无序列表整整容。
可以看到标签&div class=&nav&&，div标签通常用来布局，增加一个class(类名称)也是方便使用样式来修饰。
无序列表&ul class=&nav-hd&&，同样增加了class，就是方便使用样式，不用管，等讲样式的时候在说。
这个无序列表&li&内部是超链接标签a，实际上，很多菜单栏都是通过这种方式来做的，二级菜单还会嵌套一个ul无序标签，li的内部放一个a标签，当用户单击某个选项，就可以进入href指定的网页，这就实现了菜单的功能。
&&&&&& 二、自定义列表
&&&&&& 先看例子效果图：
源代码如下：
&h2&一个定义列表：&/h2&
&dt&计算机&/dt&
&dd&用来计算的仪器 ... ...&/dd&
&dt&显示器&/dt&
&dd&以视觉方式显示信息的装置 ... ...&/dd&
知识讲解：
&dl& 标签全称是definition list，代表“自定义列表”。
&dt& 标签全称是definition term，代表 “自定义项”。一个自定义列表dl内部可以包括多个自定义项dt。
&dd& 标签的全称是definition description，代表“自定义描述”。一个自定义项dt后面跟一个自定义描述dd。
自定义列表，只需要记住3个标签就Ok了，都是d开头，definition就是自定义的意思。
&dl&后面的l代表list，列表的意思。
&dt&后面的t代表term，“项目”的意思。
&dd&后面的d代表description，“描述”的意思。
下面来看淘宝自定义列表的例子。
效果图如下：
源代码如下：
&style type=&text/css&&
.side .discover{
padding:20px 14
border:1px solid #e8e8e8
.side .discover dt{
margin-bottom:10px
.side .discover dt s{
text-indent:-3000
*display:block
.side .content-wrapper{
height:1068
background-color:#fff
.side .change-wrapper{
padding:8px 0;
background-color:#
color:#737373;
border:1px solid #e8e8e8;
border-top:0
.side .change-wrapper:hover{
color:#f40
.side .change-wrapper .s-change-gray{
margin-left:86
margin-right:7px
.service-side{
width:190px
.tb-service{
box-shadow:2px 2px 0 #eeeef0;
background-color:#
position:relative
.tb-service h2{
background:#f40;
height:35px
.tb-service h2 s{
margin:10px 14
text-indent:-2000
*overflow:hidden
.tb-service .service-bd{
height:454
overflow-y:
border:1px solid #ff4401;
border-top:0;
padding:0 9px
.tb-service .service-bd dt{
padding-top:10
font-size:14
font-weight:700;
line-height:19
padding-bottom:1px
.tb-service .service-bd dt s{
margin-right:7
margin-top:-3
*text-indent:0
.tb-service .service-bd dd{
border-bottom:1px solid #e6e7
padding-bottom:10
padding-left:5
line-height:22
*padding-top:8px
.tb-service .service-bd dd a{
display:-moz-inline-
display:inline-
vertical-align:
*vertical-align:
position:relative
.tb-service .service-bd dd .c-2{
width:54px
.tb-service .service-bd dd .c-3{
width:38px
.tb-service .service-bd dd .c-4{
width:29px
.tb-service .service-bd .last-dd{
margin-top:10px \9
.tb-service .more{
margin-right:0;
padding:0 10px 0 5
border:1px solid #e8e8e8;
background:#
margin-top:-3px \9;
padding-top:3px \9
.tb-service .more em,.tb-service .more span{
border-color:rgba(255,255,255,0);
border-color:transparent\0;
*border-color:
_border-color:
_filter:chroma(color=tomato);
border-style:
border-width:3px 0 3px 3px
.tb-service .more em{
border-left-color:#dadada
.tb-service .more span{
border-left-color:#fff
.tb-service .more i{
.tb-service .more i em,.tb-service .more i span{
overflow:visible
.tb-service .more:hover{
border-color:#f40;
background:#f40
.tb-service .more:hover em{
border-left-color:#fff
.tb-service .more:hover span{
border-left-color:#f40
&div class=&side service-side&&
&div class=&tb-service&&
&dl class=&service-bd&&
&s class=&fpicon s-service-theme&&&/s&主题市场
&dd data-spm=&&&
&a href=&/?spm=1.4d7z.1& data-spm=&d2& class=&&&淘宝女人
&a href=&/market/sport/citiao/yundongpai.php?spm=1.4d7z.2& data-spm=&d12& class=& c-2 &&运动派
&a href=&/?spm=1.4d7z.3& data-spm=&d3& class=& c-3 &&情侣
&a href=&/?spm=1.4d7z.4& data-spm=&d1& class=&&&淘宝男人
&a href=&/market/baobao/2014/index.php?spm=1.4d7z.5& data-spm=&d5& class=& c-2 &&孕婴童
&a href=&/market/home/2014/index.php?spm=1.4d7z.6& data-spm=&d18& class=& c-3 &&家居
&a href=&/market/mei/index.php?spm=1.4d7z.7& data-spm=&d10& class=&&&美容护肤
&a href=&/?spm=1.4d7z.8& data-spm=&d6& class=& c-2 &&中老年
&a href=&/market/foodindex.php?spm=1.4d7z.9& data-spm=&d14& class=& c-3 &&美食
&a href=&/?spm=1.4d7z.10& data-spm=&d4& class=&&&美嫁新娘
&a href=&/market/car/index.php?spm=1.4d7z.11& data-spm=&d17& class=& c-2 &&有车族
&a href=&/market/jia/2014index.php?spm=1.4d7z.12& data-spm=&d19& class=& c-3 &&装修
&a href=&/market/3c/home.php?spm=1.4d7z.13& data-spm=&d8& class=&&&手机数码
&a href=&/?spm=1.4d7z.14& data-spm=&d20& class=& c-2 &&生活家
&a href=&/?spm=1.4d7z.15& data-spm=&d13& class=& c-3 &&游戏
样式没有“偷”完整，正常的应该是3个a标签为一行的。感兴趣的童鞋，可以自己偷偷看。
这里的&dt&内部先是一个删除线标签&s&(就是在文字中间加一条线)，后面是文字“主题市场”。
& dd&标签内部就是一些超链接标签a组成。
三、有序列表
例子效果图如下：
源代码如下：
&!DOCTYPE html&
&li&咖啡&/li&
&li&牛奶&/li&
&li&茶&/li&
&ol start=&50&&
&li&咖啡&/li&
&li&牛奶&/li&
&li&茶&/li&
知识讲解：
&ol&的英文为order list，意思是“有序列表”，默认在每项前面显示1,2,3…
&ol type=&A&&：在每项前面显示A，B，C…
&ol type=&a&&：在每项前面显示a，b，c…
&ol type=&I&&：在每项前面显示I，II，III…
不过这些都不多用。
第二个有序列表ol增加了一个属性，&ol start=&50&&，这样就指定了起始值从50开始。
每项使用&li&&/li&标签来表示。内部是显示内容。
&&&&&& 写到这里，文章终于写完了，总共用了4个多小时，现在是凌晨1点40。本来今天是很累的，因为昨晚一夜没怎么睡着，不过这并不影响我的工作，上班的时间依旧精神抖擞，而且代码质量也比往常高一些，主要就是心态变化了吧。
&&&&&& 明明知道，熬夜等于慢性自杀，但是，我们仍然在熬夜，送给所有奋斗中的程序员，注意早点休息。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致html 怎么让无序列表不显示点_百度知道