通过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. 解决国内gem不能用的问题

    转自:http://www.haorooms.com/post/gem_not_use 最近在安装SASS的时候,用到gem命令,但是运行出行如下错误! C:\Users\len>gem ins ...

  2. python django中使用sqlite3数据库 存储二进制数据ByteArray

    在python中使用sqlite3数据库存储二进制流数据ByteArray,在django使用sqlite3数据库时,有时候也要注意最好使用二进制流ByteArray插入字符串. 使用ByteArra ...

  3. ERROR C2676

    直接上代码: nl.h #ifndef NL_H #define NL_H #include <iosfwd> namespace ZJ { /** Insert a newline ch ...

  4. 项目红色感叹号eclipse因Web App Libraries中的jar包missing导致项目红色感叹号

    症状: 如题 分析: 修改.更换或者删除了WEB-INF/lib中的jar包 解决方案: 右击项目>build path>Libraries 直接remove Web App Librar ...

  5. 跟着百度学PHP[14]-PDO的预处理语句1

    预处理语句有以下两个特点: 1.效率高 2.安全性好 为什么说预处理语句效率高呢? 预处理语句就好比一个模板,比如下面的一串插入语句: insert into admin(id,username,pa ...

  6. 如何在uboot上实现从网络下载版本镜像并直接在内存中加载之？

    这是作者近期项目上遇到的一个需求,描述如下: 一块MT7620N的路由器单板,Flash中已存放一个版本并可以通过uboot正常加载并启动.现在需要:在uboot上电启动过程中,通过外部按键触发干涉, ...

  7. XML序列化和反序列化（C#）

    主要参考资料: http://www.codeproject.com/Articles/483055/XML-Serialization-and-Deserialization-Part-1 http ...

  8. Generating SSH Keys on windows

    two ways here I provide: use openSSH command line on git bash(such as msysgit bash) ls -al ~/.ssh ss ...

  9. 一句话搞定IOS中View的Frame和Bound

    就一句话,Frame是父View上看到子View的窗户,Bound是子View上可以被父View看见的内容. 稍微解释下.Frame 指子View在父View中的位置以及大小.由两部分构成,第一部分是 ...

  10. VC++ 判断你的窗口是否置顶TopMost

    大家可能已经知道,使你的窗口置顶(TopMost)或者总是最前(Always on Top)的方法:  C++ Code  12345   // Make topmost , SWP_NOMOVE | ...