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

相关文章

基于C#实现PDF转图片的详细教程

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门：PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因
阅读更多...
Java Scanner类解析与实战教程

Java Scanner类解析与实战教程

《JavaScanner类解析与实战教程》JavaScanner类（java.util包）是文本输入解析工具,支持基本类型和字符串读取,基于Readable接口与正则分隔符实现,适用于控制台、文件输... 目录一、核心设计与工作原理1.底层依赖2.解析机制A.核心逻辑基于分隔符（delimiter）和模式匹
阅读更多...
Python进阶之列表推导式的10个核心技巧

Python进阶之列表推导式的10个核心技巧

《Python进阶之列表推导式的10个核心技巧》在Python编程中,列表推导式（ListComprehension）是提升代码效率的瑞士军刀,本文将通过真实场景案例,揭示列表推导式的进阶用法,希望对... 目录一、基础语法重构：理解推导式的底层逻辑二、嵌套循环：破解多维数据处理难题三、条件表达式：实现分支
阅读更多...
spring AMQP代码生成rabbitmq的exchange and queue教程

spring AMQP代码生成rabbitmq的exchange and queue教程

《springAMQP代码生成rabbitmq的exchangeandqueue教程》使用SpringAMQP代码直接创建RabbitMQexchange和queue,并确保绑定关系自动成立,简... 目录spring AMQP代码生成rabbitmq的exchange and 编程queue执行结果总结s
阅读更多...
Python学习笔记之getattr和hasattr用法示例详解

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.
阅读更多...
把Python列表中的元素移动到开头的三种方法

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表（list）进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片（Lis
阅读更多...
python使用Akshare与Streamlit实现股票估值分析教程（图文代码）

python使用Akshare与Streamlit实现股票估值分析教程（图文代码）

《python使用Akshare与Streamlit实现股票估值分析教程（图文代码）》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl
阅读更多...
Python pandas库自学超详细教程

Python pandas库自学超详细教程

《Pythonpandas库自学超详细教程》文章介绍了Pandas库的基本功能、安装方法及核心操作,涵盖数据导入（CSV/Excel等）、数据结构（Series、DataFrame）、数据清洗、转换... 目录一、什么是Pandas库（1）、Pandas 应用（2）、Pandas 功能（3）、数据结构二、安
阅读更多...
python中列表应用和扩展性实用详解

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性：有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的
阅读更多...
C++11范围for初始化列表auto decltype详解

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2