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

相关文章

IDEA自动生成注释模板的配置教程

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注
阅读更多...
Python列表去重的4种核心方法与实战指南详解

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1：集合(set)去重法（最快速）方法2：顺序遍历法（保持顺序）方法3：副本删除法（原地修改）方法4：
阅读更多...
Python虚拟环境终极(含PyCharm的使用教程)

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》：本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境？二、虚拟环境创建方式对比三、命令行创建虚拟环境（venv）3.1 基础命令3
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
OpenCV图像形态学的实现

OpenCV图像形态学的实现

《OpenCV图像形态学的实现》本文主要介绍了OpenCV图像形态学的实现,包括腐蚀、膨胀、开运算、闭运算、梯度运算、顶帽运算和黑帽运算,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起... 目录一、图像形态学简介二、腐蚀（Erosion）1. 原理2. OpenCV 实现三、膨胀China编程（
阅读更多...
利用Python快速搭建Markdown笔记发布系统

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言：为什么要自建知识博客一、技术选型：极简主义开发栈二、系统架构设计三、核心代码实现（分步解析
阅读更多...
python连接本地SQL server详细图文教程

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面：本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.
阅读更多...
Python 安装和配置flask, flask_cors的图文教程

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》：本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
Ubuntu中远程连接Mysql数据库的详细图文教程

Ubuntu中远程连接Mysql数据库的详细图文教程

《Ubuntu中远程连接Mysql数据库的详细图文教程》Ubuntu是一个以桌面应用为主的Linux发行版操作系统,这篇文章主要为大家详细介绍了Ubuntu中远程连接Mysql数据库的详细图文教程,有... 目录1、版本2、检查有没有mysql2.1 查询是否安装了Mysql包2.2 查看Mysql版本2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2