• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 10. Link Effects, Lists, and Nav... > List-Based Vertical Navigation Using...

List-Based Vertical Navigation Using Color

Things begin to get really exciting when you combine links and lists for navigation. You'll begin here by first styling a simple list and getting rid of the bullets using the list-style-type property with a value of none. This removes the markers completely, leaving a list of links (see Example 10-10).

Example 10-10. Styling a list of links

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia; text-decoration: underline;}  /* font-style: italic; 
font-weight: bold; background-color: aqua; */
a:active {color: red;}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint