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() 值,就可以使用图像作为标志。
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,就像这样:点击这里来了解一下
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
CSS 列表 你知道吗的更多相关文章
- HTML 学习笔记 CSS(列表)
CSS列表属性允许你放置 改变列表项标志 或者将图像作为列表项标志. CSS列表 从某中意义上讲 不是描述性的文本的任何内容都可以认为是列表.人口普查.太阳系.家谱.参观菜单,甚至你的所有朋友都可以表 ...
- DIV+CSS列表式布局(同意图片的应用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS 列表
CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点.小 ...
- [CSS]列表属性(List)
CSS 列表属性(List) 属性 描述 CSS list-style 在一个声明中设置所有的列表属性. 1 list-style-image 将图象设置为列表项标记. 1 list-style- ...
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
- CSS 列表实例
CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志.CSS 列表属性(list)属性 描述list-style 简写属性.用于把所有用于列表的属性设置于一个声明中.list-styl ...
- CSS 列表样式详解
CSS列表用于前端的列表排列. CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML中,有两种类型的列表: 无序列表 - 列 ...
- CSS:CSS 列表
ylbtech-CSS:CSS 列表 1.返回顶部 1. CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML ...
- css列表属性和样式控制
如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它. 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表.设置列表标记有 ...
随机推荐
- yii2 安装
php版本必须是php5.4以上.记得配置php环境变量 1.下载https://github.com/yiisoft/yii2-app-advanced 2.php -r "readfil ...
- TDirectory.IsRelativePath是否相对路径
使用函数: System.IOUtils.TDirectory.IsRelativePath class function IsRelativePath(const Path: string): Bo ...
- Python学习笔记——面向对象基础
1.类和实例 1.1类的定义 类的定义使用class关键字,其后紧跟类名(通常大写开头),紧接着是(object),object是该类继承的类名,没有就继承object类. 实例化时就是类名+(),有 ...
- C语言面试题(嵌入式开发方向,附答案及点评)
整理自C语言面试题(嵌入式开发方向,附答案及点评) 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SEC ...
- 使用eclipse开发webService很简单
原文转自:http://blog.csdn.net/guo_rui22/article/details/6253745 使用Eclipse生成一个WebService应用 1.创建一个Dynamic ...
- HDU 2487 Ugly window
这是切的很痛苦的一道题,自己测试了很多样例却终究不过,中间也做了诸多修改,后来无奈去网上看题解,发现遗漏了一种情况,就是两个窗口可能边框都能看见,但是一个嵌套在另一里面,而我判定是不是 “top wi ...
- vs2015 Xamarin.Android安装
原文:vs2015 Xamarin.Android安装 Xamarin.Android 安装步骤,以vs2015为例 1,安装vs2015中的跨平台项,但是安装在国内肯定失败,因为需要到谷歌下载 当我 ...
- [置顶] Objective-C,/,ios,/iphone开发基础:分类(category,又称类别)
在c++中我们可以多继承来实现代码复用和封装使程序更加简练.在objective-c中只能单继承,不能多继承,那么除了协议protocol之外,我们可以实现类似多继承的一个方法就是,分类(catego ...
- http实现发送post请求,获取结果集
package com.ming; import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.Ou ...
- Android源码之Matrix
Matrix类在Android中主要用来进行矩阵变换,其可操作的对象包括图像.点阵.Vector(向量).矩形等. Matrix支持的变换类型主要有以下几种: 1.Translate:平移变换 2.R ...