8 phong cách list HTML & CSS

DEMO ALL: http://demo.marcofolio.net/css_lists/
Source: http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html

List #1: Kiểm Menu đơn giản

HTML

<div id="list1">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

CSS

/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }

List #2: 

HTML

<div id="list2">
   <ol>
      <li><p><em>The Netherlands</em> is a country in ...</p></li>
      <li><p><em>The United States of America</em> is a federal constitutional ...</p></li>
      <li><p><em>The Philippines</em> officially known as the Republic ...</p></li>
      <li><p><em>The United Kingdom</em> of Great Britain and ...</p></li>
   </ol>
</div>

CSS

/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1;  }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }

List #3: Bullet là hình ảnh.

HTML

<div id="list3">
   <ul>
      <li>Java</li>
      <li>.NET</li>
      <li>C++</li>
      <li>PHP</li>
   </ul>
</div>

CSS

/* LIST #3 */
#list3 { }
#list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; }
#list3 ul li { line-height:30px; }

List #4

HTML

<div id="list4">
   <ul>
      <li><a href="#"><strong>Toronto</strong>2004</a></li>
      <li><a href="#"><strong>Beijing</strong>2008</a></li>
      <li><a href="#"><strong>London</strong>2012</a></li>
      <li><a href="#"><strong>Rio de Janeiro</strong>2016</a></li>
   </ul>
</div>

CSS

/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
  border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; }
#list4 ul li a strong { margin-right:10px; }

List #5

HTML

<div id="list5">
   <ol>
      <li>Google
         <ol>
            <li>Picasa</li>
            <li>Feedburner</li>
            <li>Youtube</li>
         </ol>
      </li>
      <li>Microsoft
         <ol>
            <li>Corel Corporation</li>
            <li>Zignals</li>
            <li>ByteTaxi</li>
         </ol>
      </li>
      <li>Yahoo!
         <ol>
            <li>Xoopit</li>
            <li>BuzzTracker</li>
            <li>MyBlogLog</li>
         </ol>
      </li>
   </ol>
</div>

CSS

/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

List #6

HTML

<div id="list6">
   <ol>
      <li>Lorem ipsum dolor sit amet, ...<br />Fusce sit amet ...</li>
      <li>Aenean placerat lectus tristique...<br />Vivamus interdum ...</li>
      <li>Mauris eget sapien arcu, vitae...<br />Phasellus neque risus...</li>
      <li>Phasellus feugiat lacus ...<br />Duis rhoncus ...</li>
   </ol>
</div>

CSS

/* LIST #6 */
#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }
#list6 ol li { }

List #7

HTML

<div id="list7">
   <ul>
      <li>First inline item</li>
      <li>Second inline item</li>
      <li>Third inline item</li>
      <li class="last">Fourth inline item</li>
   </ul>
</div>

CSS

/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }

List #8

HTML

<div id="list8">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

CSS

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
  text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
  -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
  transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }