Stiilitud siltidega vorm
Kuidas kujundada vormisilti CSS-i abil. Vormielement, mida kasutatakse veebilehe vormi erinevate väljade ja sisestusalade märgistamiseks, on sildielement. Seda saab kujundada kaskaadlaaditabeli reeglite abil.
Samm 1
Et kujundada sildielemendid nii, nagu need sissejuhatuses oleval pildil on, peate kasutama sildielementi atribuudiga "for". Lisaks peate enne sisendelemendi lisamist sildielemendi sulgema. Illustratsioonil näidatud täieliku vormi HTML.
Päeva video
2. samm
Sildielementide stiilimiseks panin sildid kuvama plokitaseme elementidena, mis ujutati vasakule. Seejärel määrasin siltidele laiuse, et sisestusväljad oleksid kõik siltidest ühtlasel kaugusel. Määrasin värvi ja muutsin teksti paksuks. Kasutasin genereeritud sisu, et lisada sildi järele koolon (: ). (Koolon ei pruugi ilmuda igas brauseris.)
Siin on CSS:
etikett { värv: #B4886B; fondi kaal: paks; kuva: plokk; laius: 150 pikslit; ujuk: vasak; } silt: pärast { sisu: ": " }
3. samm
Täielikkuse huvides näitan teile ka CSS-i, mida kasutatakse väljakomplekti stiiliks, kuna sildielemendid on ümbritsetud ääristatud väljakomplektiga.
Siin on see CSS:
fieldset { border: 1px solid #CCA383; laius: 400 pikslit; taust: #FFE8EF; polsterdus: 3px; } väljakomplekti legend { background: #CCA383; polster: 6px; fondi kaal: paks; }
4. samm
Sildi elementide kujundamiseks saate teha palju muid asju. Minu näide on vaid üks võimalus seda teha.
Vorm HTML
Asjad, mida vajate
Tööalased teadmised HTML-ist
Tööalased teadmised CSS-ist
