Sådan ændres Rullebjælker

Hvis du gerne vil krydre din hjemmeside eller gøre det blander sig med resten af ​​dit websted, kan du prøve at ændre dine scrollbars.Ændringer af et rullepanel farver vises i Internet Explorer, men ikke andre browsere, såsom Firefox eller Opera.

Brug CSS (Cascading Style Sheets) til at ændre Rullebjælker

  1. dig bekendt med de dele af et rullepanel, så du ved, hvordantil adgang / ændre dem i din CSS kode.En rullebjælke omfatter skyderen (bruges til at rulle op / ned en side), scrollbar spor (hvor skyderen bevæger sig over) og to rullebjælken pile (på toppen og bunden af ​​sporet).

  2. anmeldelse CSS kode til en rullebjælken.Her er et eksempel kode:
    scrollbar-face-color: Gælder til farven på rullebjælken skyderen
    scrollbar-track-farve: Gælder til farven på rullebjælken sporet
    scrollbar-arrow-color: Gælder til farven på rullebjælken pil
    scrollbar-shadow-farve: Gælder til farven på rullebjælken skygge
    scrollbar-darkshadow-farve: Gælder til farven på rullebjælken mørke skyg

    ge
    scrollbar-highlight-farver: Gælder til farven på rullebjælken fremhæve
    rullepanel-3dlight-Farve: Gælder til farven på rullebjælken 3D lys

  3. For at ændre farven på din rullebjælken skyderen til rød, vil din kode læses:

    scrollbar-face-color: # FF0000;
    Sørg for at medtage et semikolon efter hver linje kode.

Tilføjelse af Scrollbar CSS som et eksternt link

  1. Åbn din foretrukne teksteditor og oprette en CSS-fil.

  2. Føj følgende kode til din CSS-fil for at ændre rullebjælken standard:
    krop {scrollbar-basen-color: # FF0000;}
    Den rullebjælken standard kan du ændre alle farverne på din scrollbar på en gang.

  3. Udskift farven med din.

  4. foretage detaljerede ændringer af de enkelte dele af din scrollbar ved at tilføje følgende kode i stedet:
    krop {
    scrollbar-face-color: # 0000FF
    GO
    scrollbar-track-color: # 000000
    GO
    scrollbar-arrow-color: # 000000
    GO
    scrollbar-shadow-color: # 999999
    GO
    scrollbar-darkshadow-color: # 999999
    GO
    scrollbar-highlight-color: # 0000FF
    GO
    scrollbar-3dlight-color: # 0000FF
    GO
    }
    Husk at erstatte farverne med dem, du vil bruge.

  5. Gem din CSS-fil og åbne din HTML-fil.

  6. Placer følgende kode mellem HEAD tag:
    & lt; link rel = \ "stylesheet \" type = \ "text / css \" href = \ "scrollbar.css \" / & gt;
    Erstat "scrollbar.css" med dit faktiske CSS filnavn og en placering.

  7. Gem din HTML-fil og få det vist i din browser.

Tilføjelse af Scrollbar CSS som et internt link

  1. Tilsæt direkte følgende i din HTML-kode mellem HEAD tag, men erstatte farverne med dem, du gerne vil bruge:
    & lt; stil & gt;
    krop {
    scrollbar-face-color: # 0000FF
    GO
    scrollbar-track-color: # 000000
    GO
    scrollbar-arrow-color: # 000000
    GO
    scrollbar-shadow-color: # 999999
    GO
    scrollbar-darkshadow-color: # 999999
    GO
    scrollbar-highlight-color: # 0000FF
    GO
    scrollbar-3dlight-color: # 0000FF
    GO
    }
    & lt; / typografi & gt;

  2. Gem din HTML-fil og få det vist i browseren.

  3. Leg med farverne, indtil du er tilfreds med din skabelse.

  4. Skift hver farve til baggrunden farven på din side for at skjule din scrollbar, eller gøre det gennemsigtigt.

Fjernelse Rullebjælker fra et popup-vindue med JavaScript

  1. Placer følgende kode mellem HEAD tag på dit HTML-dokument:
    & lt; script type = \ "javascript \" & gt;
    funktion PopUp (URL) {
    window.open (URL, \ "WINDOW \", \ "width = 500, height = 500, venstre = 0, top = 0, scrollbars = nej, menulinje = nej, resizable = nej,placering = nej, værktøjslinje = ingen \ ")
    GO
    }
    & lt; / script & gt;

  2. Udskift WINDOW (navn på popup-vinduet), bredde, højde, venstre (afstand fra venstre på skærmen), top (afstand fra venstre på skærmen), scrollbars (ja / nej for at vise rullepaneler) og menulinje (ja/ nej for at vise menulinjen), resizable (ja / nej for at ændre størrelsen vindue), placering og værktøjslinje med dine oplysninger.

  3. Føj følgende kode til & lt; BODY & gt;tag for at erstatte linket til din pop-up-side.
    & lt; a href = \ "JavaScript: popup (page_name.html '); \" & gt; din tekst til linket & lt; / a & gt;

  4. Erstat "page_name.html" med dit faktiske HTML-side.

  5. Gem din HTML-fil og få det vist i en browser.Du er alle gjort.

Tips & amp;Advarsler

  • Oprettelse af en separat CSS-fil til dine scrollbars gør det lettere at ændre det i fremtiden.Du vil kun nødt til at ændre det til en tid i din CSS-fil versus flere gange for hver HTML-fil.
  • JavaScript skal være aktiveret for JavaScript muligheden for at arbejde.

Ressourcer

  • Mere om Ændring Rullebjælker
421
0
0
Webdesign