The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything

来源：百度文库 编辑：神马文学网 时间：2024/04/28 18:38:46

March 19th, 2008 in Design Tips & Tutorials

by: Matthew Griffin

Ican still remember the day I discovered the

  • 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
  • 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
    • 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
    • .

      Using
    • s for Horizontal Navigation

      • 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.

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


           
      • Home

        •    
      • About Us

        •    
      • Contact Us

        •    
      • News

        •    
      • Mission

      This is how it should look:

      Multi-column Lists with

    • Building lists that wrap into multiple columns is quick and easywith

    • . Say goodbye to 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.


         

               
      • One

        •        
      • Two

        •        
      • Three

        •        
      • Four

        •        
      • Five

        •        
      • Six

        •        
      • Seven

        •        
      • Eight

        •        
      • Nine

        •    

      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:

      Cool
    • Background Effects

      • Want lists with cool bullets instead of the boring default blackdot? CSS makes this possible with some simple adjustments to thebackground properties of your

    • . For this example, we'llbarrow our code from the first example and build on it.


           
      • Home

        •    
      • About Us

        •    
      • Contact Us

        •    
      • News

        •    
      • Mission

      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:


      Animating Your
    • s with a Rollover Effect

      • A combination of

    • and 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:


      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

    • s.

    • The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything Introduction to Solutions, Projects, and Items You can do anything if you really want to.( 3... Wangtam: To-Do List 大点兵 你的To-Do　List有效吗 to-do list 的可行性艺术 aqLists: unobtrusive DHTML and the power of unordered lists What the middle class plans to do with its money—and its votes Building a Smarter To-Do List, Part I [推荐]你的To-Do List有效吗？[栖息谷] Myths and Misunderstandings about the Personal MBA The Amazing New Middle Classes | Money and Ma... Our Mission and What We Do | About EPA | US E... How to Think About Pricing Strategies in a Do... just think about Search Marketing‘s About People and Principles, Not Just Algorithms, Part 1 Using the Small Screen to Find Bigger Ones Using a Web-based System to Estimate the Cost... How To Write A Novel Using The Snowflake Method 未完成 - incomplete ?让你的to-do list更有效的9个建议 10大窍门助你创建实用的任务清单(To do List) What to do when the stock market crashes to do ? Online Tools and Software for Task Lists and To Do Lists - Perfect for Freelancers