CSS和无序列表

0 Share

觉得很有用的 CSS 技巧,无聊就翻译过来。中心思想就是,通过 CSS ,li 标签可以无比强大。以下是翻译后的内容。

我仍然记得我发现 li 标签这一天。这并不是说在此之前,我没用过——事实上我曾经大量使用无序列表。那一天我发现的是使用小小的 CSS,li 变得很好很强大,堪称网页设计的三个俯卧撑。我们甚至可以用 ul li 来创建整个网站的布局。当然,你不要太认真,不过可以试试。仅以此文向 li 致以崇高的敬意。

使用多个 li 标签创建水平导航

你可以在水平导航、横向名单中使用无序列表。基于表的 CSS 布局,深深地深深地震撼了我。它可以使你的代码更加风情万种,楚楚动人。下面是个有5个按钮的水平导航的例子。

ul{
margin: 0 auto;
}
ul.horizontal_list li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 10px;
margin: 5px;
border: 1px solid #CCC;
}

以上是 CSS ,HTML 如下:

  • Home
  • About Us
  • Contact Us
  • News
  • Mission

效果如下:

  • Home
  • About Us
  • Contact Us
  • News
  • Mission

多列显示

使用 li 可以很容易实现,告别 br 吧!而且日后方便维护。原理如下:

ul{
margin: 0 auto;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
width: 200px
}

/* The wider this li is, the fewer columns there will be */
ul.multiple_columns li{
text-align: left;
float: left;
list-style: none;
height: 30px;
width: 50px;
}

以上是 CSS 。

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine

效果如下:

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine

背景效果

厌倦了默认的黑点吧,可以使用超酷的背景来替换之。使用 CSS 的话,小菜一碟。

HTML 代码:

  • Home
  • About Us
  • Contact Us
  • News
  • Mission

CSS 代码:

ul{
margin: 0 auto;
}
ul.cool_background li{
text-align: left;
float: left;
list-style: none;
padding: 3px 10px 3px 25px;
margin: 5px;
background: url(cool_background.gif) 5px 5px no-repeat;
}

别忘记把图片放到跟 CSS 文件相同目录里面。效果如下。

来源:<a href="http://mirificampress.com/permalink/the_amazing_li" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://mirificampress Read Full Article.com/permalink/the_amazing_li', 'http://mirificampress.com/permalink/the_amazing_li']);" target="_blank">http://mirificampress.com/permalink/the_amazing_li

作者:Matthew Griffin

Comment ( 1 )

  1. Replydimlau
    。。。这和li没有太大关系吧 几乎任何标签都能做到这些 之所以li不会被普遍用来做全页面布局,不是因为它弱,而是因为它在各种浏览器的默认属性(行高啊边距啊等等等等)太不一样。从这一点说我更喜欢span

Leave a reply

Your email address will not be published.