讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > css教程 >

正文

0

0

CSS： list-style修改列表属性控制li标签样式

黄舟

黄舟

发布时间：2017-06-29 09:34:14

|

2667人浏览过

|

来源于php中文网

原创

list_style属性用于修改列表的属性，list-style-type用于设置列表项类型，list-style-position用于设这列表项位置，list-style-image用于设置使用图像替换列表项标记

list_style属性用于修改列表的属性 

格式如下： 

list_style：列表项标记类型 列表项标记的位置 列表项标记; 

也可以单独设置列表项标记： 

list-style-type用于设置列表项类型： 

默认值为disc为实心圆， 

常用值：none空 

circle空心圆 

square实心方块 

decimal数字 

lower-latin小写拉丁字母a,b,c..... 

upper-latin大写字母A,B,C.... 

list-style-position用于设这列表项位置： 

默认值outside表示在li标签外部，这是对li添加边框border：1px solid red;可以看到标记的位置。 

inside表示标记在li标签里面，同样添加边框时可以清晰地看到。 

list-style-image用于设置使用图像替换列表项标记： 

默认值：none 

可选值：URL ，格式为url("url地址"); 

举例： 

代码如下:

绘蛙-多图成片
绘蛙-多图成片

绘蛙新推出的AI图生视频工具

下载 
 
 
 
 
无标题文档 
 
 

     

  • 你好
    •  

  • 我好
    •

 规定一个 "list-style-type" 属性以防图像不可用。

相关文章

csshover下:first-of-type和:last-of-type样式冲突怎么办_明确选择器优先级

css::marker列表标记样式无法修改怎么办_结合list style和::marker调整

css样式加载顺序控制_避免样式覆盖技巧

css 伪类与输入框样式_如何通过 :focus 改变输入框的边框和背景色

css如何只设置下边框样式_使用border-bottom单独控制边框

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css：li中的list-style小圆点和文字没有居中对齐的解决办法 下一篇：CSS中关于list-style与inline的使用方法详解

作者最新文章

HTML5 Placeholder属性的详情介绍

2018-05-30 09:51

html中关于标签的全部属性的使用总结

2018-05-30 14:32

php如何快速实现数组去重的实例

2018-05-30 15:03

php中关于IMAP如何收取邮件的方法介绍

2018-05-31 09:38

PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析

2018-05-31 10:28

从零开始打造自己的PHP框架的视频资料

2018-05-31 10:45

php基础知识总结（新手入门必备）

2018-05-30 14:26

ReactJS中表单的单选多选与反选的实现方法

2018-05-30 09:45

JavaScript中typeof的使用方法介绍

2018-05-30 11:42

JavaScript中confirm()方法的使用介绍

2018-05-30 10:29

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

更多
PHP 表单处理与文件上传安全实战
PHP 表单处理与文件上传安全实战

本专题聚焦 PHP 在表单处理与文件上传场景中的实战与安全问题，系统讲解表单数据获取与校验、XSS 与 CSRF 防护、文件类型与大小限制、上传目录安全配置、恶意文件识别以及常见安全漏洞的防范策略。通过贴近真实业务的案例，帮助学习者掌握 安全、规范地处理用户输入与文件上传的完整开发流程。

5

2026.01.13

PPT交互图表教程大全
PPT交互图表教程大全

本专题整合了PPT交互图表相关教程汇总，阅读专题下面的文章了解更多详细内容。

49

2026.01.12

Java 项目构建与依赖管理（Maven / Gradle）
Java 项目构建与依赖管理（Maven / Gradle）

本专题系统讲解 Java 项目构建与依赖管理的完整体系，重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例，帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程，提升在实际团队开发中的工程能力与协作效率。

20

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐，阅读专题下面的文章了解更多详细内容。

135

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总，阅读专题下面的文章了解更多详细内容。

66

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总，阅读专题下面的文章了解更多详细内容。

140

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总，阅读专题下面的文章了解更多详细内容。

13

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总，阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口，涵盖国际版与俄语版，适配移动端访问，一键直达搜索、地图、新闻等核心服务。

106

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.5万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 6.9万人学习

深入剖析redis教程
深入剖析redis教程

共55课时 | 8万人学习

最新文章

更多
css 定位布局中父级高度为零怎么办_避免子元素全部 absolute
css文字覆盖图片位置不准确怎么办_使用absolute结合line height调整
css 想让多列卡片布局整齐怎么办_float 与 margin padding 调整
css 想让弹性盒子在不同屏幕自动换行怎么办_设置换行属性配合媒体查询
css文字hover放大导致布局偏移怎么办_通过transform-scale与transition避免重排
css 想让元素在拖动时出现动画效果怎么办_使用 transform translate keyframes 实现拖动动画
css flex 子项被挤到一起怎么办_检查是否关闭了 wrap
css 垂直居中盒子不生效怎么办_flex 或 line-height 配合
css flex布局元素间距不均怎么办_利用gap属性统一间距
css 工具中的 Sass 与 CSS 变量_使用 Sass 和 CSS 变量优化样式管理
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部