下面的例子展示了你如何在list上增加list-style-image。
<!DOCTYPE HTML>
<html>
<head>
<title>Using a custom image as a bullet on an HTML list</title>
<style type="text/css">
ul#list {
list-style-image: url(list_icon.png);
}
</style>
</head>
<body>
<ul id="list">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Curabitur felis mauris, vestibulum ac cursus et, interdum ac orci. Nullam lobortis, est vel imperdiet lobortis, nunc arcu rutrum ligula, id volutpat sem nulla in purus.</li>
<li>Curabitur quis felis dolor, sed lacinia dui. Praesent imperdiet viverra suscipit.</li>
<li>Maecenas tincidunt enim eget erat semper vehicula eleifend libero viverra.</li>
<li>Vestibulum vel nisl turpis, vitae placerat risus. Mauris nec lorem sit amet nisi faucibus rhoncus.</li>
<li>Nulla facilisi. Donec iaculis rutrum fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Fusce pharetra molestie mauris pellentesque tempor. Curabitur fermentum commodo commodo. Mauris egestas rutrum arcu eu interdum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Curabitur felis mauris, vestibulum ac cursus et, interdum ac orci. Nullam lobortis, est vel imperdiet lobortis, nunc arcu rutrum ligula, id volutpat sem nulla in purus.</li>
<li>Curabitur quis felis dolor, sed lacinia dui. Praesent imperdiet viverra suscipit.</li>
<li>Maecenas tincidunt enim eget erat semper vehicula eleifend libero viverra.</li>
</ul>
</body>
</html>
源码下载：
using-a-custom-image-as-a-bullet-on-an-html-list.zip
分享到：
相关推荐
为了确保下拉列表在不同设备上都能良好显示，可以使用媒体查询（Media Queries）来实现响应式设计。例如，为小屏幕设备调整字体大小： ```css @media (max-width: 768px) { select { font-size: 14px; } } ``` ...
压缩包子文件的文件名称列表“win8系统前端静态页面”暗示了这个压缩包可能包含了一系列模仿Windows 8系统风格的HTML文件。这可能包括各种页面模板，如主页面、设置页面、应用程序窗口等，每个文件都可能对应一个...
例如，可以使用伪类`:hover`来改变鼠标悬停在窗口元素上时的样式，以模拟可操作的窗口效果。 HTML则用于构建窗口的基本结构。一个典型的XP风格窗口可能包含一个标题栏（`<header>`）、一个内容区域（`<section>`或`...
在这个项目中，JavaScript可能被用来处理用户的输入事件，比如点击、滚动或悬停，进而触发相应的动画或改变页面状态。例如，当用户滚动页面时，某些元素可能会淡入淡出，或者水墨元素会随着滚动位置变化而流动。此外...
1. 下拉列表美化：文档的标题和描述强调了下拉列表的美观性，并提到适合使用在温馨风格的女性网站上。这说明在设计网站用户界面时，可以根据目标用户群体的偏好来定制下拉列表的外观。为了实现美观的下拉列表，设计...
在JavaScript编程中，树型多列表动态生成是一种常见的交互式用户界面设计，它允许用户以层级结构查看和操作数据。这种控件常用于文件管理器、菜单系统、组织架构图等场景，提供了一种直观的方式来展示具有嵌套关系的...
在HTML-阿里云风格响应式后台管理模板中，Bootstrap的作用主要体现在以下几个方面： 1. **栅格系统**：Bootstrap的栅格系统允许开发者轻松创建响应式的布局，根据屏幕大小自动调整内容的排列方式，确保在不同设备上...
- `transform`属性：用于改变元素的形状、尺寸和位置，实现平移、旋转、缩放等效果，可实现图片的动态布局。 - `transition`和`animation`：实现元素的平滑过渡和动画效果，增强用户体验。 - `flexbox`布局：灵活...
在这个"基于jquery实现的自定义风格的下拉列表框.zip"中，我们将探讨如何利用jQuery来创建具有独特视觉样式和交互效果的下拉列表框。 首先，下拉列表框（Dropdown List）是HTML中的元素，通常用于提供一组预设选项...
1. **美化样式**：通过CSS自定义样式，可以改变下拉按钮的外观，如背景色、边框、字体等，使其与网站的整体风格保持一致。同时，可以选择使用图标或者图片来增强视觉效果。 2. **动态效果**：jQuery的动画功能可以...
这可能包括使用JavaScript或jQuery库来监听滚动事件，然后根据滚动位置改变内容的可见性。HTML5新增的`Intersection Observer API`可以帮助开发者更高效地检测元素是否进入或离开视口，从而优化性能。 `css`目录中...
二次元风格个人引导页html源码是一个专为热爱二次元文化的用户设计的网页模板，它提供了简洁、美观的页面布局，让个人网站或博客在视觉上更具吸引力。这个压缩包包含了一个基本的HTML源码文件，用户只需用记事本等...
html实现酷炫科技风大屏风格模板源码，html大屏源码，科技风，酷炫的界面效果，灵活的模块配置，打造属于自己的酷炫大屏，全屏打开页面，Ctrl+鼠标滚轮，找到最合适的分辨率，展现最好的界面效果。支持扩展界面，...
HTML5列表式音乐播放器SMusic是一个基于前端技术构建的...开发者可以在此基础上进行自定义设计和扩展，以满足特定需求或风格。这个项目不仅展示了前端技术的实际应用，也为学习和实践相关技术提供了一个优秀的实例。
文件列表中的"XP风格窗口"可能是完成这个项目的源代码文件，包含了HTML结构、CSS样式和JavaScript逻辑。开发者可以通过查看和学习这些代码，理解如何运用HTML、CSS和JavaScript来实现一个XP风格的窗口组件，并且可以...
在许多情况下，我们可能需要自定义QTabWidget的外观，包括改变TabBar（选项卡栏）的位置和文字方向，以适应不同的用户需求或界面设计风格。本篇文章将深入探讨如何实现这些功能。 首先，QTabWidget的默认设置中，...
例如，使用伪类`:hover`来改变鼠标悬停在菜单项上的样式，添加阴影效果(`box-shadow`)来模拟3D效果，使用渐变(`linear-gradient`)和圆角(`border-radius`)来美化背景，以及通过`transform`属性实现下拉菜单的展开和...
本资源“jquery自定义风格独特的下拉列表控件(可实现单选和多选).zip”提供了使用jQuery创建一个具有独特风格且功能丰富的下拉列表控件的方法，特别适用于那些希望增强网站交互体验的开发者。 这个控件不仅限于传统...
【标题】"s104网络购物系统多风格生成HTML" 涉及的核心知识点主要集中在Web开发领域，特别是关于动态网页生成和电子商务系统的设计。这个项目可能是一个针对网络购物平台的解决方案，允许用户根据自己的喜好选择不同...