li标签默认样式是前面有一个小圆点或者是数字序号,那么怎样改变li标签的默认样式呢?

css怎么设置li标签的样式?

ul和li列表是使用CSS布局页面时常用的元素。在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。

一、list-style-type属性

list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:(列举一些常用的属性值)list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

(相关课程推荐:css视频教程)

list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。none:不使用项目符号。

disc:实心圆。

circle:空心圆。

square:实心方块。

demical:阿拉伯数字。

lower-alpha:小写英文字母。

upper-alpha:大写英文字母。

lower-roman:小写罗马数字。

upper-roman:大写罗马数字。

使用list-style-type属性的示例代码如下:li{

list-style-type:square;

}

  • 这里是列表内容
  • 这里是列表内容
  • 这里是列表内容

二、list-style-image属性

list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:list-style-image:none/url

list-style-image属性可以取两个值:none:没有替换的图片。

url:要替换图片的路径。

来看一段代码:li{

list-style-image:url(images/bg03.gif);

}

  • 这里是列表内容
  • 这里是列表内容
  • 这里是列表内容

三、list-style-position属性

list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:list-style-position:inside/outsideinside:项目符号放置在文本以内。

outside:项目符号放置在文本以外。

使用list-style-position属性的示例如下:li{

list-style-type:square;

list-style-position:outside;

}

  • 这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
  • 这里是列表内容
  • 这里是列表内容

再来看一下属性值为inside的样式。li{

list-style-type:square;

list-style-position:inside;

}

  • 这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。
  • 这里是列表内容
  • 这里是列表内容

四、list-style属性

list-style属性是综合设置li样式的属性,也是一个可以继承的属性,语法结构如下:li-style:list-style-type/list-style-image/list-style-position

各个值的位置可以交换。比如:li{

list-style:url(images/bg03.gif) inside;

}

  • 这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
  • 这里是列表内容

本文来自css3答疑栏目,欢迎学习!

css里面li标签怎么加图片_css怎么设置li标签的样式?相关推荐

  1. css里面li标签怎么加图片_css 点击ul切换其中li标签内的图片

    如下图所示,在ul内有两个li标签,一个放图片一个显示文字.现在我希望当鼠标移动到图片上时,图片切换,并且字体颜色改变,点击后任然是这右边的样式. 总之,就是点击后切换样式,当点击其他位置时变成原来的 ...

  2. 第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签...

    第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签 标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 ...

  3. html在视频背景添加透明层,视频加图片水印并设置透明度 视频加半透明的图片水印|视频加图片背景并设置透明度...

    百无聊赖,周一晚上加个班撸一把教程.给视频加图片水印的方法大家应该都掌握了吧,看到这个教程的题目:给视频加图片水印并设置透明度,心中已有数,知道该怎么做了,啊哈.知道的就保留想法离去亦或者继续参考,教 ...

  4. css里面li标签怎么加图片_分享三种给li标签添加图标的方法

    我们在页面布局时,经常会用到li标签,单独使用li标签比较单调,有时候为了页面效果,需要加入图片,那怎么在li标签中添加图片呢?这篇文章就和大家分享三种给li标签添加图标的方法,希望对你有用. 1.使 ...

  5. html中怎么让一行显示,css一行显示_css 如何设置a标签占一行

    摘要 腾兴网为您分享:css 如何设置a标签占一行,追书神器,掌上新华,壹学车,思维导图等软件知识,以及侠盗猎魔2补丁,万年历桌面,南通建材网,交银人寿,时间管理器,抓拍机,2018全国三卷文综,趣盘 ...

  6. css字体倾斜角度_css如何设置字体为倾斜样式?

    css如何设置字体为倾斜样式?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以通过设置font-style属性的值为italic(斜体 ...

  7. css字体倾斜角度_css怎么设置倾斜的字体样式?(代码详解)

    css怎么设置倾斜的字体样式?本篇文章就给大家介绍用css设置倾斜字体样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要知道在css中设置对象内字体倾斜常常是使用 ...

  8. css里面li标签怎么加图片_Html-Css-li标签增加图片

    spring接收json格式的多个对象参数(变通法) 两种方法 方法1 如果使用spring mvc同客户端通信,完全使用json数据格式,需要如下定义一个RequestMapping @Contro ...

  9. web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签

    标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 需要导入模块:from scrapy.selector import HtmlXP ...

  10. 4、web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签

    标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 需要导入模块:from scrapy.selector import HtmlXP ...

最新文章

  1. SAP PM项目导向维护
  2. Android学习笔记(一) - 如果我们来设计Android
  3. Excel ,三步 快速实现应用一个公式到一列或一行中
  4. 据说这是中途接手别人项目时的场景
  5. python利器的使用-Python数据科学利器
  6. SQL Server 2005系列教学(14) 用户管理
  7. c语言首尾指针相同 则,6.C语言指针练习题.doc
  8. vectorobserver obs是做什么_带着色碳纤维主体的OBS雪佛兰皮卡
  9. 直播预告丨数十家平台实战真经,解密 IPTV 数据破局之道
  10. java中for循环的简化_Java中for语句的简化写法
  11. 团队任务4-每日例会(2018-12-6)
  12. java 通过jdbc驱动连接hive操作实例
  13. 基于Vue-SSR优化方案归纳总结
  14. Arduino笔记-9110风扇模块的使用
  15. Intel 64/x86_64/IA-32/x86处理器 - SIMD指令集 - SSE扩展(11) - 数据可缓存性控制指令
  16. java程序组成_java程序是由什么组成的
  17. LintCode Python 简单级题目 112.删除链表中的重复元素
  18. Beyond compare vs kdiff3
  19. linux java 自动安装_Centos7 linux 卸载自带安装的jdk 并yum自动安装jdk1.8
  20. Shell 获取本月最后一天

热门文章

  1. 80004005错误代码_关于访问共享时出现80004005错误
  2. FreeSWITCH实现在视频通话中某一方视频翻转
  3. Python的数据类型
  4. HP LaserJet Pro MFP M227d安装指南
  5. Spring Boot 2.x 基础案例:整合Dubbo 2.7.3+Nacos1.1.3(配置中心)
  6. 程序员是如何买房的?
  7. 微信图片服务器逻辑,关于图片上传原图会被压缩的解决方案
  8. AnimationController
  9. Latex/CSDN字母输入对照表
  10. 电信主机托管费用_主机托管平均费用与托管流程