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;}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值