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

转载 2015年11月17日 19:24:59
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地址"); 

举例: 

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 

li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 

</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html> 

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

CSS list-style属性控制li标签样式

list_style属性用于修改列表的属性 格式如下: list_style:列表项标记类型 列表项标记的位置 列表项标记; 也可以单独设置列表项标记: list-style-type用于设置列表项类...
  • u012698341
  • u012698341
  • 2014年01月22日 11:34
  • 3000

css控制一个ul标签下的指定li标签样式

css控制一个ul标签下的指定li标签样式
  • qq_29362889
  • qq_29362889
  • 2017年02月07日 14:25
  • 2485

HTML中li标签CSS样式明细

 1、直接变色li{       color:#f00;}注:如果改变点的颜色,那么li后的文字有可能跟着变色,所以要注意分别定义颜色li和字体的颜色。成功的案例请看我的歌轩网。2、改成图片li{  ...
  • xiaoxiaohai123
  • xiaoxiaohai123
  • 2009年01月17日 17:39
  • 6285

list-style-type 去除li 前面的标记(小黑点)

list-style-type 设置标记的样式(或者隐藏标记) ul { list-style...
  • Fanbin168
  • Fanbin168
  • 2014年07月16日 11:48
  • 2893

css中控制ul,li的缩进距离

在中,经常要做两件事,一个是去掉列表项的点; 一个是控制缩进的内容,两者都可以用CSS去做,下面小结下:   1)去掉列表项的点      li{list-style-type:none;}  ...
  • jackyrongvip
  • jackyrongvip
  • 2013年07月01日 17:43
  • 11425

解决IE浏览器li下list-style-type无效的问题

今天做了一个小页面,用到了li标签,发现在IE浏览器下li前面默认的实心圆点不显示,也就是说list-style-type:disc无效,但是在firefox下确实正常的。 原因可能是因为某些浮动设置...
  • qq719365064
  • qq719365064
  • 2016年10月25日 17:42
  • 252

用纯CSS实现的箭头

分类 编程技巧    发布  newghost 3/21/2014   原文  注意 转载须保留原文链接,译文链接,作者译者等信息。  原文链接: 用CSS即可绘制出各种箭头,无需裁剪图片...
  • stepli01
  • stepli01
  • 2014年04月22日 20:39
  • 1135

关于CSS列表list-style-type的颜色和大小控制

CSS列表list-style-type的颜色和大小控制      看一下源码:        这里是SEO网站的文章列表标题目    这里是很长的SEO网站的文章列表标题目    这里...
  • Solo_two
  • Solo_two
  • 2016年05月25日 09:26
  • 4826

css去掉li标签前面的点

css li 去掉点的样式写法,其实就是利用css的list-sytle样式来实现的。 li{ list-style: url("pre.gif") outside circle; }  直接变色...
  • lililiyunqiang
  • lililiyunqiang
  • 2013年08月28日 08:54
  • 685

css如何li中选中后加上class属性js控制

1 2 3 4 5 http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquer...
  • SEN03
  • SEN03
  • 2015年04月28日 11:46
  • 10783
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS list-style修改列表属性控制li标签样式
举报原因:
原因补充:

(最多只允许输入30个字)