Đang chuẩn bị liên kết để tải về tài liệu:
Foundation Fireworks CS4- P10

Foundation Fireworks CS4- P10: The chapters in this book are divided into three parts: “Part 1: Learning Fireworks,” “Part 2: Using Fireworks,” and “Part 3: Fireworks in Action.” In this first part, we start by introducing you to the Fireworks application where it lives within the Creative Suite, what makes it unique, and why you would use it. You’ll be introduced to the bitmap and vector tools and learn how to export your artwork to the Web. | WEB SITE CASE STUDY 2 CSS SPRITES nav li text-indent -9999px nav a margin 0 20px 0 0 background url nav.png width 100px height 28px display block float left nav nav-work a background-position 0 0 nav nav-work a active nav nav-work a focus nav nav-work a.selected background-position 0 -56px nav nav-work a hover background-position 0 -28px nav nav-learn a background-position -100px 0 nav nav-learn a active nav nav-learn a focus nav nav-learn a.selected background-position -100px -56px nav nav-learn a hover background-position -100px -28px nav nav-info a background-position -200px 0 nav nav-info a active nav nav-info a focus nav nav-info a.selected background-position -200px -56px 249 CHAPTER 13 nav nav-info a hover background-position -200px -28px nav nav-contact a background-position -300px 0 nav nav-contact a active nav nav-contact a focus nav nav-contact a.selected background-position -300px -56px nav nav-contact a hover background-position -300px -28px style At first glance it seems like there s a lot going on with this CSS but if you look closely you can see that a large portion of the code repeats for all four navigation buttons and their individual display state scenarios. We ll go over the code blocks to explain exactly what s happening. List reset Plain and simple the following code is just a reset of the margin padding and list style so that the unordered list doesn t have any indentations or bullet symbols. nav nav li margin 0 padding 0 list-style none Figure 13-6 shows what the reset unordered list looks like in a browser. non CSS Sprites Figure 13-6. The unordered list reset with no bullets or indentation. 250 WEB SITE CASE STUDY 2 CSS SPRITES Extreme negative text indent In the next code block we set the text indent to an extreme negative value on all list items inside the unordered list so that there s virtually no chance that the HTML text will display over the top of the background image. nav li text-indent -9999px Figure 13-7 shows what the .