ylbtech-CSS:CSS 列表
1.返回顶部
1、

CSS 列表


CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像


列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。


不同的列表项标记

list-style-type属性指定列表项标记的类型是::

实例

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

尝试一下 »

一些值是无序列表,以及有些是有序列表。


作为列表项标记的图像

要指定列表项标记的图像,使用列表样式图像属性:

实例

ul
{
list-style-image: url('sqpurple.gif');
}

尝试一下 »

上面的例子在所有浏览器中显示并不相同,IE和Opera显示图像标记比火狐,Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志,就应使用浏览器兼容性解决方案,过程如下

浏览器兼容性解决方案

同样在所有的浏览器,下面的例子会显示的图像标记:

实例

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

尝试一下 »

例子解释:

  • ul:

    • 设置列表样式类型为没有删除列表项标记
    • 设置填充和边距0px(浏览器兼容性)
  • ul中所有li:
    • 设置图像的URL,并设置它只显示一次(无重复)
    • 您需要的定位图像位置(左0px和上下5px)
    • 用padding-left属性把文本置于列表中

列表 -简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性,列表样式属性设置如下:

实例

ul
{
list-style-image: url('sqpurple.gif');
}

尝试一下 »

可以按顺序设置如下属性:

  • list-style-type
  • list-style-position (有关说明,请参见下面的CSS属性表)
  • list-style-image

如果上述值丢失一个,其余仍在指定的顺序,就没关系。


更多实例

所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。


所有的CSS列表属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS:CSS 列表的更多相关文章

  1. 一个带标号的CSS文章列表写法

    <title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...

  2. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  3. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

  4. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  5. 常用的CSS属性列表汇总

    常用的CSS属性列表汇总 近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...

  6. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  7. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  8. CSS的列表样式和网页背景

    CSS的列表样式 1. 设置title和列表 HTML: <!DOCTYPE html><html lang="en"><head>    &l ...

  9. CSS 常用列表样式

    CSS 常用列表样式 CSS没学扎实,复习记录一下.下面是一些常用的属性 list-style-image 指定一个图片作为列表项的标记 默认值none,可设置为图片的url list-style-i ...

  10. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

随机推荐

  1. c 语言 volatile 关键字

    一.前言 1.编译器优化介绍: 由于内存访问速度远不及CPU处理速度,为提高机器整体性能,在硬件上引入硬件高速缓存Cache,加速对内存的访问.另外在现代CPU中指令的执行并不一定严格按照顺序执行,没 ...

  2. python re模块常用的正则表达式

    '.'     默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^'     匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r&qu ...

  3. 55、saleforce 学习笔记二

    String goodsName = 'abcd1123汉字显示';//测试文本 System.debug('简化后的字符串名称为:'+goodsName.abbreviate(5)); //返回简化 ...

  4. 政府网站综合防护系统(网防G01)

    政府网站综合防护系统,简称“网防G01”,是首款专门针对政府网站及服务器等关键信息基础资源进行综合防护的产品,由公安部第一研究所和计算机病毒防治技术国家工程实验室(北京)研发. 网防G01的架构 由服 ...

  5. angular5 清除定时器

    ngOnDestroy 在指令被销毁前,将会调用 ngOnDestory 方法.它主要用于执行一些清理操作,比如:移除事件监听.清除定时器.退订 Observable 等. 调用方法 1. impor ...

  6. yum安装apache

    一.查询是否已经安装apache rpm  -qa  httpd 注:Apache在linux系统里的名字是httpd 如果有返回的信息,则会显示已经安装的软件.如果没有则不会显示其它的信息.如下图是 ...

  7. Netty教程

    Netty是一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. Netty是一个NIO客户端.服务端框架.允许快速简单 ...

  8. img点击放大的js实现

    业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...

  9. Java中的集合和线程安全

    通过Java指南我们知道Java集合框架(Collection Framework)如何为并发服务,我们应该如何在单线程和多线程中使用集合(Collection). 话题有点高端,我们不是很好理解.所 ...

  10. Optparse 简介

    optparse 这个库的主要作用是可以用为脚本提供传递命令参数功能 一个简单的例子 def main(): parser = OptionParser(usage = "usage: %p ...