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

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

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

جستجو بر اساس ... همه عنوان پدیدآور موضوع یادداشت تمام متن
اصطلاحنامه مجموعه ها مرورالفبایی لغت نامه دهخدا
➟
جستجو در لغت نامه
بیشتر
کتابخانه شخصی پرسش از کتابدار ارسال منبع

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

Molly E. Holzschlag

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

آدرس پست الکترونیک گیرنده :

آدرس پست الکترونیک فرستنده :

نام و نام خانوارگی فرستنده :

پیغام برای گیرنده ( حداکثر 250 حرف ) :

کد امنیتی را وارد نمایید

ارسال
جستجو در متن کتاب
بیشتر
تنظیمات قلم

فونت

اندازه قلم

+ - پیش فرض

حالت نمایش

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

HTML and CSS By Molly E. Holzschlag

...............................................

Publisher: Addison Wesley Professional

Pub Date: April 22, 2005

ISBN: 0-13-185586-7

Pages: 336

Index
توضیحات
افزودن یادداشت جدید






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]


<!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 {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="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>
</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.


/ 198