利用css控制html中的列表格式
上一篇:有史以来最热的七月 下一篇:星际争霸2人族视频

利用css控制html中的列表格式

在html中,可以使用ol/ul/dl显示各种列表信息。其中ol是有序列表,也就是每个列表项前标有数字,表示顺序;ul是无序列表,默认情况每个列表项前有黑圆点;而dl则是定义列表,主要用于术语解释。三种列表的具体用法,网络上已经有很多的教程,这里不打算详细说明。

一般情况下,无序列表ul的使用比较多,有个时候,不想在列表项前显示那个黑点,或者想显示成其他的标志,如空心圆点、空心方块等,这可以通过设置ul的属性type来设定。

<ul type="disc">
 
<li>列表项1</li>
 
<li>列表项2</li>
</ul>

其中:

  • type=disc 黑圆点,默认风格
  • type=circle 空心圆点
  • type=square 空心方块
  • type=none 不显示任何标志

但有个时候,整个ul列表的代码是通过javascript代码从其他网站得到的,这样就无法修改ul的type属性。例如,本站首页的NinGoo’s shared items的内容就是通过javascript脚本从Google Reader中获得的,由于本站侧边栏采用右对齐,列表项目前面默认的黑圆点无法对齐,相当难看,且和其他部分风格不协调。这时只能通过css来将列表项的type设置成none:

li {
list-style-type: none;
}

现在再去看看本站首页侧边栏中的NinGoo’s shared items,风格已经和其他部分统一,完美的融为一体^_^

另外,css对于li还有另外一个属性display,如果设置为inline,则可以将全部列表在一行中显示,这在将列表做为导航菜单的时候也许能用到。

本文网址:http://www.ningoo.net/html/2007/using_css_control_html_list_style.html

订阅到Google | 收藏到Del.icio.us | 推荐到鲜果

相关文章 随机文章

本文Tags: , ,

没有评论


(Required)
(Required, will not be published)