Ako kódu aa Search Bar Vytvorené vo Photoshope

Daj , aby sa vstupné štítok typ " text " , meno a ID " s " :

4

Zadajte " tlačidlo " značku na tlačidlo Hľadať a dať mu triedu . " BTN " Ak chcete , aby váš kód kompatibilný , mali by ste tiež pridať názov :

vyhľadávanie

" tlačidlo " značka je novšia značka , ktorá umožňuje tlačidlo prirodzene zladiť s vstupného poľa , oveľa lepšie funkcie ako predchádzajúci " image " typu vstupného poľa . Môžete použiť " BTN " triedu štýl tlačidla pomocou čistej CSS premennej alebo obrázok na pozadí .
5

Zadajte uzatváracie tagy pre formset a formu . Váš dokončená HTML by mal vyzerať nejako takto :

input type = " text " name = " s " id = " s " /> sťahovanie

Vyhľadať < /tlačidlo >

< /fieldset >

< /form >
6

v čele svojho dokumentu HTML alebo v samostatnom CSS štýlov vytvoriť si CSS vyhlásenie pre každý prvok . Pozrite sa na vášho obrazu Photoshopu a určiť šírku a výšku vyhľadávacieho riadku , vrátane akéhokoľvek priestoru nad a pod vstupné pole a tlačidlo . Zadajte túto výšku a šírku do " mainsearch " ID vyhlásenie . Ďalšie veci , aby zvážila by mohlo byť umiestnenie baru , šírka hraničné a pozadia . Ak je potrebné umiestniť na pravej strane menu navigácie , napríklad , mali by ste zadať " float : right " . Variabilný
7

Zadajte premenné do triedy , ktorá máte v úmysle " Searchbar . " vzťahuje na všetky vyhľadávacie lišty po celom webe . To pomáha znížiť počet opakovaných vyhlásení štýl , pretože môžete znovu použiť " . Searchbar " triedu s iným formulára ID na rovnakej stránke , napríklad. Opakované premenné tried môžu obsahovať výplň , okraje , farbu okraja a pozadia .
8

Štýl vášho vstupného poľa pomocou triedy search bar nasledovaný selektora vstupov . Premenné zahrnúť do vstupnej triedy sú veci , ako je šírka , výška , farba textu , písmo a štýl písma , orámovania , pozadia , polstrovanie a okraje . Každá z týchto premenných by mali zodpovedať rozmerom a nastavenia efektov v súbore aplikácie Photoshop , ktoré môžu byť stanovené zobrazením voľby vrstvy a pomocou nástroja pre výber na meranie pixelov .
9

Pridať štýl pre vyhľadávanie tlačidlo . Môžete dosiahnuť väčšinu tlačidiel štýly CSS pomocou kombinácie hranice a vrhnutý tieň premenné alebo môžete použiť obrázok na pozadí . Dôležité premenné patrí pre tlačidlo štýl je jeho výška a šírka . Príkladom štýlu tlačidlo je nasledovné :

Searchbar button.btn {

šírka : . 32px ;

výška : 32px ;

texte zarážka : - 9999px ;

background : # CCCCCC URL ( searchbutton.png ) no - repeat vpravo hore ;

}

Tento štýl sa hodí rozmer obrazu 32 pixelov široký o 32 pixelov vysoký , strčí do " Odoslať Hľadať " text z dohľadu , takže to nie je prekrývať tlačidlo a umiestni na tlačidlo Hľadať grafiku v pravej hornej časti nádoby tlačidla sa presvedčte , že nie je odrezaný .
10

Dokončiť vykonávacie požadovaný vyhľadávací skript alebo funkciu do formulára HTML . To sa zvyčajne vykonáva pridaním názov súboru alebo cestu skriptu na " akcie " premennou v tagu form , ale niektoré skripty môžu zahŕňať ďalšie kroky , ako je napríklad pridanie javascript na hlavu vášho HTML stránky , kde bude umiestnený vyhľadávací panel .

• Predchádzajúca strana: Ako používať 3D rotujúcim nástrojom v Adobe Photoshop CS4 
• Ďalšia strana: Ako vidieť váš Photoshop aktivačné číslo