Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
  • * Dator Kunskap >> Programmering >> Computer Programspråk >> Content

    Hur man designar en CSS Sprite Navigation Bar

    CSS sprites kan hjälpa webbutvecklare att öka den hastighet med vilken deras webbplats laster med hjälp av en enda bildfil som innehåller flera bilder . En navigeringsfältet kan läsa som en enda bild när webbsidan återges , men ändå innehåller enskilda bilder som kan redigeras och stylade på egen hand inom navigeringsfältet . Webbläsaren har bara att ladda ner en bild istället för flera bilder som skulle vart representerar navigering element i navigationsfältet . Saker du behöver
    Adobe Photoshop
    Textredigerare ansökan
    Visa fler instruktioner
    1

    Starta Adobe Photoshop och öppna upp den bildfil du har utformats för att vara används som webbplatsens navigeringsfältet . Du kommer att behöva referera till denna fil för att bestämma pixel bredder som du går på för att skriva ut den CSS -kod som kommer att definiera hur navigeringsfältet används .
    2

    Starta en textredigerare och öppna sedan CSS -filen för webbsidan emot spriten navigeringsfältet . Om du inte har en specialitet kodning program till hands , kan du använda Anteckningar i Microsoft Windows eller Textredigeraren i Mac OS X.
    3

    Gå tillbaka till bilden i Photoshop och välj " , Bild " från listan över tillgängliga alternativ längst upp i Photoshop programfönstret . Välj "Egenskaper" och ta del av höjden och bredden på din navigeringsfältet bild som definieras i pixlar . CSS-koden kommer att använda dessa pixel definitioner .
    4

    Återgå till CSS-filen i textredigeraren och lägg till följande kod . Ändra höjd, bredd , namn bildfil och värderingar marginal för att överensstämma med den storlek och specifikationer på din bild

    * {margin : 0px; padding : 0px ; } . # Nav {background : url ( navbarsprite.png ) , höjd : 35px ; width : 800px ; marginal : 0 auto ; # nav span { display: none ; }
    5

    Ge navigeringsfältet en lämplig inriktning på din sida genom att använda följande rader CSS -kod och lägga till dem i din CSS- dokument :

    # nav li { list- style -type : none; float : left ; } # nav a { height: 38px ; display : block; }

    6

    Klicka på " Visa " i Photoshop , och sedan " Lägg Linjaler " för att lägga till en rad på skärmen regler till fönstret där navigeringsfältet bilden visas . Zooma in på bilden och mäta bredden på varje navigeringsknapp i navigeringsfältet .
    7

    Lägg till följande kod i din CSS-fil , med de enskilda pixel mätningar av varje element . Till exempel :

    # list1 { width : 110px ; } # list2 { width : 110px ; } # List3 { width : 125px ; } # list4 { width : 123px ; } # list5 { width : 131px ; }

    8

    spara den ändrade CSS-fil och ladda upp den och navigeringsfältet bilden till din webbserver för att börja använda den i webbplatsens produktionsmiljö .

    Tidigare:

    nästa:
    relaterade artiklar
    ·Hur man bygger Flash-program
    ·Hur man löser rekursion
    ·Hur ställa in timeout- sessioner i iFrame
    ·Hur skall jämföra de skillnader i två rader i Oracle…
    ·Hur man fångar alla DataGrid Undantag
    ·Hur man ändra tiden i registret med en Batch -fil
    ·Hur man skapar Logga in HTML
    ·Facelet Vs. JSP
    ·Lägga till Side information till en Login Script
    ·Hur man skriver koder som kommer att generera en textru…
    Utvalda artiklarna
    ·Lägga till JDK till din Classpath
    ·MySQL Load Data Tutorial
    ·Hur att öka DOS Variabelvärde
    ·Hur Validera CSS Pages
    ·Säkra Coding Certifiering
    ·Hur man lär sig Java Enterprise
    ·Hur man gör en skrivruta i Python
    ·Sun Java Tutorial
    ·PHP ' Om ' Statement Tutorial
    ·Hur konvertera binära siffror
    Copyright © Dator Kunskap http://www.dator.xyz