【笔记】列表教程01——子弹的背景图像

2024-03-08 13:40
文章标签 子弹 图像 教程 笔记 01 列表 背景

本文主要是介绍【笔记】列表教程01——子弹的背景图像，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

为什么要使用背景图像作为子弹？

CSS可用于将列表项目符号更改为正方形或圆形，但这对其外观或位置提供的控制非常少。

可以使用“list-style-image”将HTML项目符号替换为图形图像。但是，在大多数现代浏览器中，这些图像的放置不一致。对于子弹在列表项旁边的显示方式也很少有控制权。

一个更好的选择是使用子弹的背景图像。那么这是如何实现的呢？

第1步 - 制作基本清单

从基本的无序列表开始。列表项全部有效（包含在<a href="#"> </a>中）。但是，这不是必需的。对于此示例，“＃”用作虚拟链接。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css"></style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

第2步 - 删除子弹

要删除HTML列表项目符号，请将“list-style-type”设置为“none”。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

第3步 - 删除填充和边距

标准HTML列表具有一定量的左缩进。每个浏览器的金额各不相同。有些浏览器使用填充（Mozilla，Netscape，Safari），其他浏览器使用边距（Internet Explorer，Opera）来设置缩进量。

要在所有浏览器中一致地删除此左缩进，请将“UL”的填充和边距都设置为“0”。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;/*new codes*/padding:0;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

步骤3a - 添加您自己的缩进

如果需要左缩进，请使用margin-left。由于填充现在设置为“0”，因此左边距可以给出一个精确的测量值，该测量值将在所有浏览器中保持一致。上面的示例使用“margin-left”设置为“1em”缩进。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;margin-left:1em;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

第4步 - 添加背景图像

使用“背景图像”将背景图像添加到“LI”元素。现在，在每个列表项的背景中重复背景图像- 不是很漂亮。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;}li {background-image:url(arrow.gif);/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

第5步 - 设置不重复

要阻止背景图像在列表项下重复，请将“background-repeat”设置为“no-repeat”。现在每个列表项只有一个图像，但它们需要定位。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;}li {background-image:url(arrow.gif);background-repeat:no-repeat;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

第6步 - 定位图像

“背景位置”用于定位图像，使它们与文本对齐。在这种情况下，使用“0.4em”。这些单位指的是“左”和“顶”的图像位置。

顶部位置可以设置为50％，这将使其位于列表项的中间。但是，如果列表项包裹两行或更多行，则这看起来不太好，因为图像将在行之间居中。最安全的方法是通过em定义顶部位置。使用此方法，无论用户指定的字体大小，图像都将始终与文本保持在一致。用于“左”和“顶”的实际测量值取决于图像。

现在，图像与内容水平排列。但是，内容位于图像的顶部。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;}li {background-image:url(arrow.gif);background-repeat:no-repeat;background-position:0 .4em;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

第7步 - 移动内容

要将内容从背景图像移开，请将“padding-left”应用于“LI”元素。在这种情况下，使用了“0.6em”。与垂直对齐一样，列表填充将取决于图像的大小。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;}li {background-image:url(arrow.gif);background-repeat:no-repeat;background-position:0 .4em;padding-left:0.6em;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

变化 - 右对齐列表

要制作列表的右对齐版本，只需要进行三次更改。首先，将“UL”“text-align”设置为“right”。其次，将左侧“背景位置”从“0”更改为“100％” - 这使图像与右边缘对齐。最后将“padding-left”更改为“padding-right”。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;text-align:right;/*new codes*/}li {background-image:url(arrow.gif);background-repeat:no-repeat;background-position:100% 0.4em;/*new codes*/padding-right:.6em;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

变化 - 设置列表宽度

如果列表不在包含框内，则可以使用“UL”来控制整个列表宽度。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;text-align:right;width:10em;/*new codes*/}li {background-image:url(arrow.gif);background-repeat:no-repeat;background-position:100% 0.4em;padding-right:.6em;}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

变化 - 在列表项周围添加空间

通过在“LI”上设置边距，可以在每个列表项之间添加空格。可以在每个列表项的顶部，底部或顶部和底部设置边距。此版本在列表项的顶部和底部具有“.1em”的边距。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">ul {list-style-type:none;margin:0;padding:0;text-align:right;width:10em;}li {background-image:url(arrow.gif);background-repeat:no-repeat;background-position:100% 0.4em;padding-right:.6em;margin:1em 0;/*new codes*/}</style>
</head>
<body><ul><li><a href="#">牛奶</a></li><li><a href="#">蛋</a></li><li><a href="#">起司</a></li><li><a href="#">蔬菜</a></li><li><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

变化 - 图标列表

可以在单个列表中使用多个背景图像选项。这是通过为每个图标创建一个类，并根据需要设置单个“LI”的样式来实现的。

代码如下所示：

<!DOCTYPE html>
<html>
<head><style type="text/css">.iconlist{list-style: none;margin: 0;padding: 0;}li.pdf{background-image: url(bullet_pdf.gif);background-repeat: no-repeat;background-position: 0 50%;padding: 3px 0 3px 20px;margin: .4em 0;}li.doc{background-image: url(bullet_doc.gif);background-repeat: no-repeat;background-position: 0 50%;padding: 3px 0 3px 20px;margin: .4em 0;}li.text{background-image: url(bullet_text.gif);background-repeat: no-repeat;background-position: 0 50%;padding: 3px 0 3px 20px;margin: .4em 0;}li.htm{background-image: url(bullet_htm.gif);background-repeat: no-repeat;background-position: 0 50%;padding: 3px 0 3px 20px;margin: .4em 0;}</style>
</head>
<body><ul class="iconlist"><li class="pdf"><a href="#">牛奶</a></li><li class="text"><a href="#">蛋</a></li><li class="htm"><a href="#">起司</a></li><li class="doc"><a href="#">蔬菜</a></li><li class="text"><a href="#">水果</a></li></ul>
</body>
</html>

效果图如下：

这篇关于【笔记】列表教程01——子弹的背景图像的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/787265。

相关文章

电脑没有仿宋GB2312字体怎么办? 仿宋GB2312字体下载安装及调出来的教程

电脑没有仿宋GB2312字体怎么办? 仿宋GB2312字体下载安装及调出来的教程

《电脑没有仿宋GB2312字体怎么办?仿宋GB2312字体下载安装及调出来的教程》仿宋字体gb2312作为一种经典且常用的字体，广泛应用于各种场合，如何在计算机中调出仿宋字体gb2312？本文将为您... 仿宋_GB2312是公文标准字体之一，仿China编程宋是字体名称，GB2312是字php符编码标准名称（简
阅读更多...
VScode连接远程Linux服务器环境配置图文教程

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》：本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置（如汉化包、远程SSH连接）、语言包安装（如C/C++插件）等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh，用于远程连接2.1安装2
阅读更多...
vscode保存代码时自动eslint格式化图文教程

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》：本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件，将以下内
阅读更多...
Window Server创建2台服务器的故障转移群集的图文教程

Window Server创建2台服务器的故障转移群集的图文教程

《WindowServer创建2台服务器的故障转移群集的图文教程》本文主要介绍了在WindowsServer系统上创建一个包含两台成员服务器的故障转移群集,文中通过图文示例介绍的非常详细,对大家的... 目录一、 准备条件二、在ServerB安装故障转移群集三、在ServerC安装故障转移群集，操作与Ser
阅读更多...
windos server2022的配置故障转移服务的图文教程

windos server2022的配置故障转移服务的图文教程

《windosserver2022的配置故障转移服务的图文教程》本文主要介绍了windosserver2022的配置故障转移服务的图文教程,以确保服务和应用程序的连续性和可用性,文中通过图文介绍的非... 目录准备环境：步骤故障转移群集是 Windows Server 2022 中提供的一种功能，用于在多个
阅读更多...
龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

龙蜥操作系统Anolis OS-23.x安装配置图解教程(保姆级)

《龙蜥操作系统AnolisOS-23.x安装配置图解教程(保姆级)》：本文主要介绍了安装和配置AnolisOS23.2系统，包括分区、软件选择、设置root密码、网络配置、主机名设置和禁用SELinux的步骤，详细内容请阅读本文，希望能对你有所帮助... ‌AnolisOS‌是由阿里云推出的开源操作系统，旨
阅读更多...
基于WinForm+Halcon实现图像缩放与交互功能

基于WinForm+Halcon实现图像缩放与交互功能

《基于WinForm+Halcon实现图像缩放与交互功能》本文主要讲述在WinForm中结合Halcon实现图像缩放、平移及实时显示灰度值等交互功能,包括初始化窗口的不同方式,以及通过特定事件添加相应... 目录前言初始化窗口添加图像缩放功能添加图像平移功能添加实时显示灰度值功能示例代码总结最后前言本文将
阅读更多...
PyTorch使用教程之Tensor包详解

PyTorch使用教程之Tensor包详解

《PyTorch使用教程之Tensor包详解》这篇文章介绍了PyTorch中的张量（Tensor）数据结构,包括张量的数据类型、初始化、常用操作、属性等,张量是PyTorch框架中的核心数据结构,支持... 目录1、张量Tensor2、数据类型3、初始化（构造张量）4、常用操作5、常用属性5.1 存储（st
阅读更多...
Python实现将实体类列表数据导出到Excel文件

Python实现将实体类列表数据导出到Excel文件

《Python实现将实体类列表数据导出到Excel文件》在数据处理和报告生成中,将实体类的列表数据导出到Excel文件是一项常见任务,Python提供了多种库来实现这一目标,下面就来跟随小编一起学习一... 目录一、环境准备二、定义实体类三、创建实体类列表四、将实体类列表转换为DataFrame五、导出Da
阅读更多...
Java操作PDF文件实现签订电子合同详细教程

Java操作PDF文件实现签订电子合同详细教程

《Java操作PDF文件实现签订电子合同详细教程》：本文主要介绍如何在PDF中加入电子签章与电子签名的过程,包括编写Word文件、生成PDF、为PDF格式做表单、为表单赋值、生成文档以及上传到OB... 目录前言：先看效果：1.编写word文件1.2然后生成PDF格式进行保存1.3我这里是将文件保存到本地后
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2