html中如何产生带有圆点列表符号的列表

是的，就是李卡。
我曾经在一个网站上做一个项目。
2 02 2 年，那个项目是用li作为导航菜单。
有很多个“li”字母拼在一起，每个字母前面都有一个小黑点。
它很受欢迎。
用户一眼就能看出这是一个列表。

但有时，比如在电子商务网站上，当我调整样式时，我发现这些小黑点特别烦人，我想摆脱它们。
当时我尝试了li{list-style:none;}，确实黑点消失了。
这个页面看起来干净多了。

但是，有时如果不添加该样式也没什么大不了的。
考虑设计要求。
也许我有点极端，认为有点更直观，但我可以去掉它们。
只要完成主要功能就可以了。

怎么在HTML中插入列表项_HTML ul/ol/li标签与自定义列表样式技巧

嗯...HTML 列表...这个东西...很常用。

看...ul...无序列表...有点...项目符号...像这样... Apple Banana ...浏览器会添加一个点...或框...默认是这个...ol...
有序列表...ol...不同...它会自己编号...就像步骤...
    第 1 步 第 2 步
...你看...它自动从1 ...一一组织...很好用...
但是...li标签...必须放在ul或ol里面...不能随便放...否则...没错...结构不对...你看...后来才意识到...深层列表...嵌套时...有时缩进...太深了，不好看...所以...必须用CSS来控制...边距填充等等那...需要调整...
然后...CSS可以改变样式...默认的...太简单...你想要...删除点...很简单...只是list-style:none;...你看到...ul{list-style:none;}...这样...就没有了...对了...
或者...你想使用图像作为项目符号...你也可以...使用list-style-image:url('i con.png');...看...ul{list-style-image:url('bullet.png');}...我刚刚使用了图像...非常酷...
还有...标记的位置...您可以使用list-style-position...内部或外部...如果在内部...标记在内部...如果在外部...则在外部...看...ul{list-style-po sition:inside;}...这样...品牌和内容彼此相邻...
最好的...就是用伪元素...::before或::after...添加内容...你可以自己设计...你想要...在前面添加一个复选标记...或者其他符号... li::before{content: "✔"; color:green;}...你看...只需添加一个绿色复选标记...看起来不错...
然后...绘制一个描述列表...dl、dt、dd...这...是术语的解释...就像一本字典...
HTML
超文本标记语言
...dt 是一个术语...dd 是一个解释...这...语义上...非常好...
布局 CSS...也可以是优化...例如...使术语右对齐...描述左对齐...dl{display:grid;grid-template-columns:1 fr 3 fr;}...dt{text-align:right;}...你看...这样...就很清楚了...
而且...提示...不要直接在行中写文本...最好包含一个span或a...这样...样式很容易控制...响应式设计...移动版...项目符号可能需要隐藏...或调整大小...@media(max-wid th:6 00px){ul{list-style:none;padding-left:0;}}...你看...这样...小屏幕上没有项目符号点...
另外...语义...不要使用列表作为导航栏...导航栏应该使用nav...ul...它是一个列表...不要混淆...
深层列表...优化缩进...ul ul{margin-left:1 em;}...看...这样二级列表有点缩进...
总之...ul,ol,li...基础知识一定要知道...CSS...样式定制...很重要...dl,dt,dd...术语解释...很好...响应式...必须考虑...语义...记住...不要过度设计...影响可读性...就这样了...

HTML无序列表的制作_HTML ul标签无序列表与项目符号设置

抱歉，说到 HTML 中的无序列表，我有话要说。
我记得有一次，我在为一个电子商务网站创建页面，需要使用无序列表来显示产品类别。
那时我还年轻，对CSS Bullet控件一无所知。

当时，我在那里编写代码， 和 标签成组。
结果就是苹果、香蕉、橙子，那里都有点，看起来很正常。
当时我就想，为什么和设计图不一样呢？查了资料发现默认是实心点（圆盘）。

然后我开始修补 CSS。
列表样式属性确实是一个神奇的工具。
我尝试了圆形和方形，结果是空心圆形和实心方形，看起来相当时尚。
不过，当时我不知道如何隐藏默认图标。
然后我测试了一下，发现根本不使用它就可以隐藏它。

有一次，一位客户要求我使用图标而不是文本。
我很困惑，不知道该怎么办。
然后我学会了如何隐藏默认图标，然后添加带有背景图片的图标并调整间距，最后我做到了。
我记得当时图标的宽度是 2 5 像素，所以我将左侧填充设置为 2 5 像素，以便图标和文本完美对齐。

还有一次，我在设计一个移动网站时，注意到默认的边距有点大，所以我手动将左内边距和左边距都设置为 0，这使得它看起来更舒服。
当时，我不知道 em 或 rem 的相对单位，所以我愚蠢地使用了像素，但它在我的手机上看起来不正确。

还有一个性能优化功能。
当时我完全没有考虑这些，只是随意使用图像。
后来我了解到使用CSS精灵或者SVG格式可以减少HTTP请求，提高页面加载速度。

总之，控制 HTML 无序列表和 CSS 样式需要更多的练习。
一开始看起来很复杂，但你会逐渐习惯的。
现在回想起来，当时其实遇到了很多坑。