Ican still remember the day I discovered the <li> tag. It's notthat I had never used list items before—I had built plenty of bulletedlists. What I discovered that day was that with a little CSS, the<li> becomes one of the most powerful and versatile tags in a webdesigner's arsenal. So versatile is the list item, in fact, that youcould build and entire website layout out of just <ul> <li>tag pairs. Of course, that wouldn't be semantically correct, but you could do it. This article is a tutorial and a tribute to the amazing <li>.
You can use unordered list items to present horizontal navigationbuttons and other horizontal lists. When I first moved from table-basedlayouts to CSS, this was a big shocker for me. It opens up a world ofpossibilities and it makes your code oh so beautiful and easy to read.Here's an example of a five-button horizontal nav bar made completelyof list items.
<!-- The CSS -->
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;
}
<!-- The HTML -->
<ul class="horizontal_list">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>
Building lists that wrap into multiple columns is quick and easywith <li>. Say goodbye to <tr> because you'll probablynever need it again. When you use list items instead of table rows andcells, it's easy to reorder your items without moving every block ofcontent in the process. Here's how it works.
<!-- Here's the HTML -->
<div id="list_wrapper">
<ul class="multiple_columns">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
</div>
<!-- Here's the CSS -->
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;
}
This is how it should look:
Want lists with cool bullets instead of the boring default blackdot? CSS makes this possible with some simple adjustments to thebackground properties of your <li>. For this example, we'llbarrow our code from the first example and build on it.
<!-- Here's the HTML -->
<ul class="cool_background">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>News</li>
<li>Mission</li>
</ul>
<!-- Here's the 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;
}
IMPORTANT: Don't forget to make your "cool_background.gif" file and put it into the same directory as your page.
This is what it should look like:
A combination of <li> and <a> tags, and a little CSS canmake for a good-looking rollover effect. Using CSS to produce yourrollovers is quicker and easier than JavaScript. It also makes iteasier change in the future. Below is a basic example:
<!-- Here's the HTML -->
<ul class="rollover">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Mission</a></li>
</ul>
<!-- Here's the CSS -->
ul{
margin: 0 auto;
}
ul.rollover li{
text-align: left;
float: left;
list-style: none;
}
ul.rollover a{
display: block;
text-decoration: none;
background: url(cool_background.gif) 5px 5px no-repeat;
padding: 3px 10px 3px 25px;
margin: 5px;
}
ul.rollover a:hover{
background-image: url(cool_background2.gif);
text-decoration: none;
}
IMPORTANT: Don't forget to make your coolbackground images and put it into the same directory as your page. Thisis what it should look like:
I'm sure this tutorial will be helpful for the CSS newbie. If you'rea CSS veteran purist , though, and you know a better way I could havecoded any of the examples, please comment. I purposefully left outdetailed explanations in this tutorial. It's meant as a place to startand should give you enough code to begin playing with <li>s.
联系客服
