css中li标签之列表项标志显示

    li为列表项 display:list-item;
    今天误把它当成了块级元素,之后设置了li { display:block;},这种情况下,由于样式表中在前面使用的时候把li{ list-style:none;},此时要想显示li前面的列表项标志(默认为disc;),即使写上 li{ list-style:disc;},li前面的列表项标志 圆点依旧不会显示。
    li显示前面的圆点,方法有三种:
1)  li{ list-style-type:disc;};此时列表项标志的大小随文字大小改变而改变。
2) 把li前面的小圆点切图,之后把图片放入到li之中,如下所示:
    <li><a href="#"><img src="images/personal_info_07.jpg" />Faq</a></li>
        之后对图片设置填充,调整位置即可,今天的例子中用到的是img{ padding-right:5px; padding-bottom:3px;},但             是不知道本方法能不能兼容各个浏览器;而且,img在不写width,height时,加载时不占位。
3)把li前面的小圆点切图,之后用背景图来设置前面的圆点,使用背景图考虑的是浏览器的兼容性问题。
         li中内容正常写,<li><a href="#">Faq</a></li>
         之后在样式表中设置列表项标志的显示形式,li{ background:url(images/personal_info_07.jpg) left no-repeat;}

         此时借助于<a>标签的padding-left属性,定位列表项标志的位置:a{ padding-left:10px;}

方法2,3需要设置li的列表项标志,li{ list-style:none;}

### HTML `<li>` 标签的使用方法及示例 #### 1. `<li>` 标签简介 `<li>` 是列表项List Item标签,主要用于定义无序列表 (`<ul>`)、有序列表 (`<ol>`) 和描述列表 (`<dl>`) 中的内容。它是 HTML 中最常用于表示条目或项目的标签之一[^2]。 --- #### 2. `<li>` 在不同上下文中的应用 ##### (1)无序列表 `<ul>` 无序列表由 `<ul>` 标记包裹,其子元素为 `<li>`,通常以圆点或其他图形作为前缀显示。 ```html <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul> ``` 以上代码会生成一个带有圆点符号的水果清单[^2]。 --- ##### (2)有序列表 `<ol>` 有序列表由 `<ol>` 标记包裹,其子元素同样为 `<li>`,但项目编号按照顺序排列。 ```html <ol> <li>第一步:准备食材。</li> <li>第二步:烹饪食物。</li> <li>第三步:享用美食。</li> </ol> ``` 此代码将创建一个带数字编号的操作指南[^2]。 --- ##### (3)描述列表 `<dl>` 描述列表由 `<dl>` 标记定义,其中包含术语 `<dt>` 和解释 `<dd>`,而 `<li>` 不适用于此类场景。如果尝试嵌套 `<li>` 则会被解析为无效语法[^3]。 错误示范: ```html <dl> <li>水果</li> <!-- 此处不应使用 li --> <dd>苹果、香蕉、橙子</dd> </dl> ``` 正确方式应替换为 `<dt>` 表达主题名称[^3]: ```html <dl> <dt>水果</dt> <dd>苹果、香蕉、橙子</dd> </dl> ``` --- #### 3. 自定义样式 虽然 `<li>` 默认遵循父级容器设定好的表现形式,但仍可通过 CSS 进一步美化外观。例如修改标志符形状、缩进距离以及字体颜色等特性。 ```css /* 圆形 */ ul.circle { list-style-type: circle; } /* 数字加括号 */ ol.custom-counter { counter-reset: item; } ol.custom-counter > li::before { content: "(" counter(item, decimal) ")"; counter-increment: item; } ``` 对应 HTML 实现如下所示: ```html <ul class="circle"> <li>圆形列表项 1</li> <li>圆形列表项 2</li> </ul> <ol class="custom-counter"> <li>自定义计数器 1</li> <li>自定义计数器 2</li> </ol> ``` 上述例子展示了如何利用外部样式表增强视觉效果的同时保持语义清晰[^1]。 --- ### 总结 `<li>` 主要服务于列举性质的数据呈现任务,在配合不同类型列表标记时需注意各自适用范围及其独特属性设置规则。此外借助层叠样式表还可以赋予更加丰富的展现力从而满足多样化需求情境下的排版要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值