CSS中的ul与li样式详解:

添加时间:17-05-19 所属分类:HTML网页,JS语言与代码
  https://www.hackhp.com/534.html

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

list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个

none:不使用项目符号
disc:实心圆
circle:空心圆
square:实心方块
demical:阿拉伯数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
lower-roman:小写罗马数字
upper-roman:大写罗马数字
使用list-style-type属性的示例代码如下:


[code] li{list-style-type:square;}
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
[/code]

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

list-style-image属性可以取两个值:
none:没有替换的图片
url:要替换图片的路径。
例子代码:

[code] li{list-style-image:url(images/hackhp.gif);}
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>[/code]
  • 2

前篇:css ul li图片-不换行-横排样式 后篇:牵着蜗牛去散步 济南举办残疾人趣味运动会
发表我的评论


推荐文章   济南老鞋匠5年做了100多只微型鞋 最小的...   济南辅警“飙”英语教育闯红灯老外 业余...   澳16岁少女,独自一人驾驶小船环游地球...   北漂女拳手赚“血汗钱”   岛上小学”唯一老师:坚守28年,每天划...
随机文章   图片(旋转/缩放/翻转)变换效果,HTML+J...   《植物大战僵尸》网页版   Flash去边框代码(IE6/7,FireFox,Opera有...   记录cookies实现退出弹出“加入收藏”代...   记录cookies实现退出弹出“设为主页”代...
广告

其他推荐

因为本站所有内容均转载自其它媒体,本意为公众提供免费服务,但并不代表本网赞同其观点,也不能对其真实性验证负责,如稿件版权单位或个人不想在本网发布,请与我联系,本人会立即将其撤除,谢谢.联系方式:atseashawk@163.com QQ:99289555