【笔记】列表教程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。

相关文章

Nexus安装和启动的实现教程

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》：本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接：DownloadWindows系统根
阅读更多...
CnPlugin是PL/SQL Developer工具插件使用教程

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》：本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插
阅读更多...
Java中的登录技术保姆级详细教程

Java中的登录技术保姆级详细教程

《Java中的登录技术保姆级详细教程》：本文主要介绍Java中登录技术保姆级详细教程的相关资料,在Java中我们可以使用各种技术和框架来实现这些功能,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录1.登录思路2.登录标记1.会话技术2.会话跟踪1.Cookie技术2.Session技术3.令牌技
阅读更多...
Python使用Code2flow将代码转化为流程图的操作教程

Python使用Code2flow将代码转化为流程图的操作教程

《Python使用Code2flow将代码转化为流程图的操作教程》Code2flow是一款开源工具,能够将代码自动转换为流程图,该工具对于代码审查、调试和理解大型代码库非常有用,在这篇博客中,我们将深... 目录引言1nVflRA、为什么选择 Code2flow？2、安装 Code2flow3、基本功能演示
阅读更多...
Java Spring 中的监听器Listener详解与实战教程

Java Spring 中的监听器Listener详解与实战教程

《JavaSpring中的监听器Listener详解与实战教程》Spring提供了多种监听器机制,可以用于监听应用生命周期、会话生命周期和请求处理过程中的事件,：本文主要介绍JavaSprin... 目录一、监听器的作用1.1 应用生命周期管理1.2 会话管理1.3 请求处理监控二、创建监听器2.1 Ser
阅读更多...
Python中OpenCV与Matplotlib的图像操作入门指南

Python中OpenCV与Matplotlib的图像操作入门指南

《Python中OpenCV与Matplotlib的图像操作入门指南》：本文主要介绍Python中OpenCV与Matplotlib的图像操作指南,本文通过实例代码给大家介绍的非常详细,对大家的学... 目录一、环境准备二、图像的基本操作1. 图像读取、显示与保存 使用OpenCV操作2. 像素级操作3.
阅读更多...
C/C++的OpenCV 进行图像梯度提取的几种实现

C/C++的OpenCV 进行图像梯度提取的几种实现

《C/C++的OpenCV进行图像梯度提取的几种实现》本文主要介绍了C/C++的OpenCV进行图像梯度提取的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录预www.chinasem.cn备知识1. 图像加载与预处理2. Sobel 算子计算 X 和 Y
阅读更多...
c/c++的opencv图像金字塔缩放实现

c/c++的opencv图像金字塔缩放实现

《c/c++的opencv图像金字塔缩放实现》本文主要介绍了c/c++的opencv图像金字塔缩放实现,通过对原始图像进行连续的下采样或上采样操作,生成一系列不同分辨率的图像,具有一定的参考价值,感兴... 目录图像金字塔简介图像下采样 (cv::pyrDown)图像上采样 (cv::pyrUp)C++ O
阅读更多...
MySQL 安装配置超完整教程

MySQL 安装配置超完整教程

《MySQL安装配置超完整教程》MySQL是一款广泛使用的开源关系型数据库管理系统（RDBMS）,由瑞典MySQLAB公司开发,目前属于Oracle公司旗下产品,：本文主要介绍MySQL安装配置... 目录一、mysql 简介二、下载 MySQL三、安装 MySQL四、配置环境变量五、配置 MySQL5.1
阅读更多...
MQTT SpringBoot整合实战教程

MQTT SpringBoot整合实战教程

《MQTTSpringBoot整合实战教程》：本文主要介绍MQTTSpringBoot整合实战教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录MQTT-SpringBoot创建简单 SpringBoot 项目导入必须依赖增加MQTT相关配置编写
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2