Tu esi dabar prieš iššūkį atnaujinti savo Quiz išvaizdą HTML su CSS. Tikslas yra suteikti quiz’ui patrauklų dizainą, kad vartotojai turėtų geresnę patirtį. Šiame vadove parodysiu, kaip per tikslias CSS pritaikymus sukurti paprastą, bet efektyvų išdėstymą savo quiz’ui. Pradėkime iškart nuo dizaino.
Pagrindiniai pastebėjimai
- CSS naudojimas gali žymiai pagerinti jūsų svetainės išvaizdą.
- Pasirinkite patrauklias spalvas, šriftus ir išdėstymus, kad optimizuotumėte vartotojų patirtį.
- Struktūruotas išdėstymas skatina interaktyvumą ir naudotojo patogumą.
Žingsnis po žingsnio vadovas
1. Fono dizainas
Pirmas dalykas, kurį turėtum padaryti, yra suteikti savo svetainės kūnui patrauklią fono spalvą. Paprastas, bet efektyvus būdas suteikti jūsų quiz’ui draugišką atmosferą yra švelni spalvų pasirinkimas. Rekomenduoju naudoti tokį atspalvį kaip „#b4c“.
Pridėdami šią fono spalvą, užtikrinsite, kad pagrindinis išdėstymas atrodytų mažiau nuobodus nei pirminis juodai-baltas dizainas.
2. Teksto spalvos ir šrifto pritaikymas
Kitą, turėtum pakeisti teksto spalvą, kad įsitikintum, jog ji gerai atrodo ant naujo fono. Švara balta spalva su šešioktaine verte „#FFF“ yra optimali šiam tikslui. Taip pat turėtum pasirinkti šriftą; Arial puikiai tinka moderniai prezentacijai ir užtikrina skaitomumą.
Pakeitus šiuos nustatymus, jūsų quiz’ui įgyjama vizualiai patrauklesnė išvaizda.
3. Antraštės stiliaus pritaikymas
Jūsų antraštė taip pat turėtų būti stilizuota, kad ji išsiskirtų iš likusios puslapio dalies. Nustatykite tekstą antraštėje centruodami ir pridėdami baltą, taškuotą rėmelį. Rėmas užtikrins aiškų atskyrimą.
CSS kodo pavyzdys, kurį galite naudoti: „border: 3px dotted #FFF;“ pagerina vizualinę struktūrą.
4. Antraštės fono spalva
Galite nustatyti antraštės fono spalvą į šviesų mėlyną toną, kad jis derėtų su bendru quiz’o vaizdu. Spalvos kodas kaip „lightblue“ suteikia šviežią ir kviečiančią išvaizdą.
Tu gali pasiekti tai uždėdamas CSS komandą „background-color: lightblue;“.
5. Sukurk konteinerį quiz’ui
Dabar yra metas sukurti konteinerį savo quiz’ui. Konteineris turėtų sukurti vizualines ribas ir stabilizuoti išdėstymą. Nustatyk fono spalvą konteinerio į „#6c9BCB“ ir įsitikink, kad jo plotis yra 50% visos svetainės.
Naudokite margin’ą ir padding’ą, kad tinkamai centruotumėte konteinerį ir suteiktumėte jam erdvės.
6. Padding’as geresniam išdėstymui
Norint konteineriui suteikti daugiau erdvės, pridėkite vidinį padding’ą. 15 pikselių vertė pagerins skaitomumą ir padarys plotą vizualiai patrauklesnį.
Pridėdami padding’ą, jūsų konteineris įgis švelnesnį dizainą.
7. Stiliuokite pateikimo mygtuką
Maitinimo mygtukas, skirtas quiz pateikimui, yra vienas iš svarbių elementų. Nustatykite mygtuko fono spalvą į ryškią oranžinę (pvz., „#f06226“), kad jis išsiskirtų. Pašalinkite standartinį rėmelį, kad sukurtumėte aiškesnį ir modernesnį įvaizdį.
Taip pat turėtum naudoti CSS komandą „cursor: pointer;“, kad naudotojai iš karto pastebėtų, kad tai interaktyvus elementas.
8. Padidinkite atstumą antraštėje
Suteikite antraštei šiek tiek daugiau erdvės ir atskirkite ją nuo likusio turinio, pridėdami 20 pikselių maržą apačioje. Tai pagerins vizualinį atskyrimą ir suteiks malonų bendrą vaizdą.
Pridėjus maržą, antraštė gaus stebuklus, kurių jai reikia.
9. Atsakymų srities stilius
Atsakymų sritis yra dar viena svarbi dalis. Kadangi ji žymiai prisideda prie vartotojo patirties, čia taip pat turėtum pasirinkti patrauklų dizainą. CSS kodas bus naudojamas rezultatams rodytis ir gali būti visiškai pritaikytas tik po JavaScript įdiegimo.
Bendras stilius atsakymų sričiai bus papildytas vėlesniuose kurso skyriuose.
10. Apibendrinimas ir perspektyva
Šio vadovo tikslas buvo parodyti jums pagrindinius žingsnius, kaip patraukliai sukurti savo quiz’ą naudojant CSS. Kai stilistinės detalės bus įgyvendintos, galėsite koncentruotis į JavaScript ir formuoti savo quiz’s interaktyvumą kurti.
Apibendrinimas – Quiz CSS stilius lemiamam vaizdui
Per tikslingą savo quiz puslapio stilizavimą žymiai pagerinote vartotojo patirtį. Su žiniomis, kurias įgijote šiame vadove, esate gerai pasiruošę kūrybiškai dirbti su CSS ir toliau optimizuoti savo quiz.
Dažniausiai užduodami klausimai
Kaip pakeisti fono spalvą?Galite pakeisti kūno fono spalvą CSS su „background-color: #SpalvosKodas;“.
Kaip centruoti antraštę?Nustatydami „text-align: center;“ CSS, tekstas bus centruotas.
Kas yra padding’as CSS?Padding’as apibūdina vidinį atstumą viduje elemento, kad jis būtų vizualiai malonesnis.
Ar galiu pasirinkti savo spalvas?Taip, galite naudoti bet kurią norimą spalvą, nurodydami šešioktinę vertę arba spalvų pavadinimą.
Kaip įjungti JavaScript savo quiz’ui?JavaScript galite įtraukti į savo HTML failą, kad įgyvendintumėte interaktyvias funkcijas.
