html中用ul 时可以去除列表前面的点 那用ol时可以去除吗

html中用ul 时可以去除列表前面的点 那用ol时可以去除吗,第1张

<ol><li></li></ol>有序列表在网页制作中一般用的较少,固定好的编号一般是无法去掉的,但是可以修改其中的编号类型,有序列表在网页中使用的频率比较少,因为它的样式可以通过CSS来修改的。

有序列表的使用方法:

<ol type="A">

<li>这就是列表的内容了,这是第一句</li>

<li>这就是列表的内容了,这是第二句</li>

<li>这就是列表的内容了,这是第三句</li>

<li>这就是列表的内容了,这是第四句</li>

<li>这就是列表的内容了,这是第五句</li>

</ol>

输出结果:编号A/B/C/D/E

网页设计中用得较多的是无序列表<ul><li></li></ul>和定义列表<dl><dt></dt><dd></dd></dl>

你用 firebug 查看会发现有下面这么一段移除圆角的代码。如果你移除了 navbar-fixed-top 自然下面这段就失效了。你可以写个 class 属性和下面的一样进行替换
navbar-fixed-top navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

方法一:
<ul>
     <li style="list-style-type:none;">百度</li> 
    <li style="list-style-type:none;">雅虎</li>
     <li style="list-style-type:none;">新浪</li>
     <li style="list-style-type:none;">谷歌</li>
</ul>
方法二:
<style> li {list-style-type:none;}</style>
<ul>
     <li>百度</li>
     <li>雅虎</li>
     <li>新浪</li>
     <li>谷歌</li>
</ul>
方法三:
<style> li_style {list-style-type:none;}</style>
<ul> 
    <li class="li_style">百度</li> 
    <li class="li_style">雅虎</li>
     <li class="li_style">新浪</li> 
    <li class="li_style">谷歌</li>
</ul>

接下来介绍几种去除列表前面小圆点的方法。
1、在CSS中写上 list-style:none;通过这个属性,可以去除列表样式
ul{list-style: none;}
效果图:
2、在CSS中加上 list-style-type: none ;和上一种方式一样,只是用了不同的属性。
ul{list-style-type: none;}
3、在 li 标签里面直接加入列表样式,前面两个给了样式去除圆点,后面两个没给,还会显示出来。
<ul> <li style="list-style-type: none;">西施</li> <li style="list-style-type: none;">王昭君</li> <li>貂蝉</li> <li>杨玉环</li> </ul>
效果图:
4、当然,也可以给标签一个类名,在CSS中给样式,比如下列代码,只给第一个 li 标签样式,它自然就没有前面的圆点了。
HTML部分:
<ul> <li class="a1">西施</li> <li>王昭君</li> <li>貂蝉</li> <li>杨玉环</li> </ul>
CSS部分:
a1{list-style-type: none;}
效果图:
总结:以上介绍了CSS中如何去除列表样式,四种方法都可以使用,看个人习惯了,希望这个如何去除 li 前面的点的 教程可以帮助到你!


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13412341.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-31
下一篇 2023-07-31

发表评论

登录后才能评论

评论列表(0条)

保存