通过CSS 列表属性能够放置、改变列表项标志。或者将图像作为列表项标志。

代码整理自w3school：http://www.w3school.com.cn

效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3MxOTU4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

演示样例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="zh-cn" />

<title>CSS 列表样式</title>

<head>

  <style type="text/css">

    body {background-color:#eaeaea}

    h3 {display:inline;}

    ul.squareType {list-style-type:square}

    ul.imageStyle {list-style-image:url(images/red_icon.png);}

    ul.defPositionInside {list-style-position:inside}

    ul.defPositionOutside {list-style-position:outside}

    /*设置list-style-image之后，list-style-type将无效。*/

    ul.defStyle {list-style:url(images/red_icon.png) square inside}

  </style>

</head>

<body>

  <p>CSS 列表属性同意你放置、改变列表项标志，或者将图像作为列表项标志。

</p>

  <hr/>

  <h3>(一)设置列表的列表项标志：list-style-type</h3>

  <ul class="squareType">

    <li>苹果</li>

    <li>橘子</li>

    <li>香蕉</li>

  </ul>

  <h3>(二)设置自己定义图标为列表的列表项标志：list-style-image</h3>

  <ul class="imageStyle">

    <li>苹果</li>

    <li>橘子</li>

    <li>香蕉</li>

  </ul>

  <h3>(三)设置列表项标志的位置:list-style-position</h3>

  <h4>(1)inside</h4>

  <ul class="defPositionInside">

    <li>苹果</li>

    <li>橘子</li>

    <li>香蕉</li>

  </ul>

  <h4>(2)outside</h4>

  <ul class="defPositionOutside">

    <li>苹果</li>

    <li>橘子</li>

    <li>香蕉</li>

  </ul>

  <h3>(四)将以上3个列表样式属性合并为一个属性：list-style</h3>

  <ul class="defStyle">

    <li>苹果</li>

    <li>橘子</li>

    <li>香蕉</li>

  </ul>

</body>

</html>

CSS：列表样式（设置列表项的标志图案/位置）的更多相关文章

  1. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  2. CSS背景样式和列表样式

    background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...

  3. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  4. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  5. 前端 CSS 优先级 样式设置important

    !important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...

  6. CSS滚动条样式设置

    webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...

  7. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  8. CSS 特殊样式设置集合

    1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应. 第一个子块宽度固定,定位为绝对定位 position:absolute;  第二个子块设置margin-left即 ...

  9. [CSS]滚动条样式设置

    概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...

随机推荐

  1. Postman 常用操作

    一,入参为json 格式 实例:添加学生信息,这个接口是用来讲入参式json 类型的 二,上传文件 三,添加header 信息 实例:获取所有学生信息 四,添加cookie以及身份验证 实例:学生金币 ...

  2. sql命令大全

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...

  3. word中特殊符号的替换

    首先在word里替换快捷键是ctrl+H,点击“更多”,会出现更多选项,在特殊格式那里可以选在各种符号,比如回车,空格什么的. 有的时候在word里看不到一些格式,需要点一下下图的对着的两个箭头图标: ...

  4. R学习----数据类型

    今天开始学习R语言了,没原因,就是想学 本人开发环境在ubuntu 16.04 LTS下 R命令提示符 终端直接输入R进入交互模式进行R学习.如下图 R脚本 # My first program in ...

  5. Yii2 Restful API 原理分析

    Yii2 有个很重要的特性是对 Restful API的默认支持, 通过短短的几个配置就可以实现简单的对现有Model的RESTful API 参考另一篇文章: http://www.cnblogs. ...

  6. Matrix_tree Theorem 矩阵树定理学习笔记

    Matrix_tree Theorem: 给定一个无向图, 定义矩阵A A[i][j] = - (<i, j>之间的边数) A[i][i] = 点i的度数 其生成树的个数等于 A的任意n ...

  7. Java并发框架——AQS之怎样使用AQS构建同步器

    AQS的设计思想是通过继承的方式提供一个模板让大家能够非常easy依据不同场景实现一个富有个性化的同步器.同步器的核心是要管理一个共享状态,通过对状态的控制即能够实现不同的锁机制. AQS的设计必须考 ...

  8. 几何画板给word绘制图形的方法

    几何画板是一款专门用来绘图的工具,它里面有很多的绘图工具和功能菜单,都是专门为画图而设计的,比如一些理科的期刊杂志论文出版的时候,里面所涉及到的图形很多都是用几何画板画出来的.下面就根据几何画板教程来 ...

  9. Linux下文件属性（drwxr-xr-x）详解以及（-rwxrwxrwx=777）（转）

    权限的计算是除去第一位字母开始,权限都是三个符号为一组合,其中-表没有这个权限. drwxr-xr-x的意思解释: ls -al 得到如下列表: drwxr-xr-x 4 oracle dba 409 ...

  10. 【原】storm源码之巧用java反射反序列化clojure的defrecord获取属性值

    storm源码是clojure.java.python的混合体.在解决storm-0.8.2的nimbus单点问题的过程中需要从zookeeper上读取目前storm集群中正在运行的assignmen ...