Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

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

[View full width]


<!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</a></li>
<li><a href=">Products</a></li>
<li><a href=">Services</a></li>
<li><a href=">About Us</a></li>
<li><a href=">Contact</a></li>
</ul>
</body>
</html>

Figure 10-16 shows the list of styled links with no markers.

Figure 10-16. Simple list-based vertical navigation with styled links.

Okay, so that's not so fancy. Hang on! It gets better. By using a range of styles, including border effects and padding (see Chapter 11, "Margins, Borders, and Padding"), you can add a lot to this simple navigation bar. You can also add background colors and images to make the list more visually interesting (see Example 10-11).

Example 10-11. Adding styles to the list

[View full width]


body {font: 14px Georgia, Times, serif; color: black;}
ul {list-style-type: none; padding: 0; width: 100px; background-image: url(swirls.gif);
 border: 2px solid orange;}
li {padding-left: 5px; padding-bottom: 5px; border-bottom: 1px solid orange;}
a {color: orange; text-decoration: none;}
a:link {color: orange;}
a:visited {color: yellow;}
a:hover {color: fuchsia;}
a:active {color: red;}

Okay, that's definitely getting a little more interesting (see Figure 10-17).

Figure 10-17. Looks like a navigation bar now.

NOTE

As you try out different styles with your navigation, you will find differences in the way browsers manage styling lists. Mozilla and Mozilla Firefox, for example, interpret padding and widths carefully, while IE tends to be more forgiving.

Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی