HTML 学习笔记 CSS(列表)
CSS列表属性允许你放置 改变列表项标志 或者将图像作为列表项标志。
CSS列表
从某中意义上讲 不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样 这使得列表相当重要 所以说CSS中磊表的样式不太丰富确实是不完美的。
列表类型
要影响列表的样式 最简单的办法就是改变其标志类型。
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型 可以使用属性 list-style-type:
ul {list-style-type : square}
上面的声明把无需列表中的标志项改为方块。
列表项图像：
有时 常规的标志是不够的 你可能想对标志使用一个图像。这时可以使用属性
list-style-image
ul li {list-style-image:url(xxx.gif)}
只需要简单的使用一个URL()值 就可以使用图像作为标志。
列表标志的位置：
列表标志的位置使用属性 list-style-position来实现。
简写列表样式
为简单起见 可以将以上三个列表属性合并为一个方便的属性 list-style 就想这样
li{list-style:url(example.gif) square inside}
list-style的值可以按照任何顺序出现 而且这些值都可以忽略 只要提供一个值。其他的值就会填入默认值。
CSS列表实例：
1:无序列表中的不同类型的列表标记：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
ul.disc {
list-style-type: disc;
}
</style>
</head>
<body>
<ul class="disc">
<li>苹果</li>
<li>香蕉</li>
<li>可口可乐</li>
</ul>
<ul class="square">
<li>苹果</li>
<li>香蕉</li>
<li>可口可乐</li>
</ul>
<ul class="circle">
<li>苹果</li>
<li>香蕉</li>
<li>可口可乐</li>
</ul>
</body>
</html>
2:在无序列表中的不同类型的列表标志
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="lroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="uroman">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="lalpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="ualpha">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>
3:将图像作为列表标志项
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul.decimal {list-style-image: url(../img/1.png);} </style>
</head>
<body>
<ul class="decimal">
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
4:定义列表标志项的位置
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*靠里*/
ul.inside {list-style-position: inside;}
/*靠外*/
ul.outside {list-style-position: outside;}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>
HTML 学习笔记 CSS(列表)的更多相关文章
- amazeui学习笔记--css（常用组件8）--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
- amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（常用组件14）--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css（常用组件12）--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css（常用组件9）--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- amazeui学习笔记--css（常用组件6）--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css（HTML元素1）--按钮Button
amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
随机推荐
- SqlIte数据库并发性
把遇到的一些小问题都记下来,告诉自己,一些小细节会铸成打错的 今天没事复习以前的知识,用sqlite做数据库,发现修改数据的时候等好久才有反应,而且还失败,可是过一会之后又会好,好了以后又是一样,种以 ...
- Android Animation学习（六） View Animation介绍
Android Animation学习(六) View Animation介绍 View Animation View animation系统可以用来执行View上的Tween animation和F ...
- Sqlite3中存储类型和数据类型结合文档解析。
sqlite3是个很小的数据库,运行在手机,机顶盒上....那它就不可能像musql,sqlserver那么规范,有很多的数据类型,之前我也以为它定义了很多数据类型,其实不是他就5个存储类,那么多数据 ...
- iOS 7 与 Xamarin － MultiPeer Connectivity（转载）
随着时代的改变,移动设备在生活工作都开始取代原有的pc.设备间的数据交互就成为了必备可少的功能.比较成熟的产品有NFC.这个啪啪的操作很流行,例如分享图片,分享文件等 .但是在iOS设备中还没有NFC ...
- iOS代码加密常用加密方式
iOS代码加密常用加密方式 iOS代码加密常用加密方式,常见的iOS代码加密常用加密方式算法包括MD5加密.AES加密.BASE64加密,三大算法iOS代码加密是如何进行加密的,且看下文 MD5 iO ...
- EMC Documentum DQL整理（二）
1.Get file extension SELECT dos_extension FROM dm_format WHERE name IN (SELECT a_content_type FROM d ...
- input的file 控件及美化
在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...
- 华为S5700S-52P-LI-AC千兆网管交换机web登录界面配置
研究一下午,包装附的说明书根本就是错误的,通过技术售后和官方的文档结合,总算可以登录交换机的web管理界面. 首先需要使用通讯控制线缆(包装中附)连接电脑和交换机,一头接交换机的Console口,一头 ...
- 金士顿U盘，群联PS2251-60主控，量产还原教程
还原成一个可移动磁盘教程,只是在"分区设置"中将 "模式=21" 改为 "模式=3" 即可. 1. 打开:"MPALL_F1_90 ...
- groups, usermod, chown, chgrp, chmod
Linux文件权限简介 Linux的每个文件可以由三种用户访问 属主权限:创建人的权限 属组权限:与创建同一个用户组的权限 其他权限:和创建人不在同一个用户组的用户的权限 当然,root用户拥有最高权 ...