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

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

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

HTML and CSS [Electronic resources] - نسخه متنی

Molly E. Holzschlag

| نمايش فراداده ، افزودن یک نقد و بررسی
افزودن به کتابخانه شخصی
ارسال به دوستان
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

روز نیمروز شب
جستجو در لغت نامه
بیشتر
لیست موضوعات
توضیحات
افزودن یادداشت جدید






Horizontal List-Based Navigation with Color


In the last section, you used the display: block; property to turn the anchor element from an inline element to a block element. Using the display: inline; property, you can make lists operate inline, which means they'll display horizontally (see Example 10-13).

Example 10-13. Markup and CSS for a horizontal list navigation using color effects

[View full width]


<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&l191 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#navlist {margin-left: 0; padding-left: 0; white-space: nowrap;}
#navlist li {

display: inline; list-style-type: none;}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited {color: white; background-color: orange;
text-decoration: none;}
#navlist a:hover {color: orange; background-color: yellow; text-decoration: none;}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="hom176">Home</a></li>
<li><a href="product190">Products</a></li>
<li><a href="service190">Services</a></li>
<li><a href="abou191">About Us</a></li>
<li><a href="contac191">Contact</a></li>
</ul>
</div>
</body>
</html>

This results in a very nice horizontal navigation bar (see Figure 10-19).

Figure 10-19. Using a list and color effects to achieve horizontal list-based navigation.


/ 198