Mavzu: html, css va JavaScript yordamida birinchi kirish sahifani yaratish

, a 

va a 

. Shunday qilib, sukut bo'yicha CSS uni har bir element uchun bittadan uch qatorli panjara qiladi. Boshqacha qilib aytganda, oq to'rtburchakni uch qatorli panjara deb tasavvur qiling.

• To'rning birinchi qatori, sarlavhasi avvalgidek qoladi. U olinadigan yagona modifikatsiya markazlashtirilgan main-holderbo'lishning mazmuni natijasida markazlashtiriladi.
• Boshqa tomondan, ikkinchi qatorda ba'zi o'zgarishlar mavjud (26 dan 49 gacha satrlar), chunki biz xato xabarini o'z ichiga olgan qatorni ham, keyin xato xabarining o'zini ham o'zgartirishimiz kerak. Xabarni ikkinchi qatorga markazlashtirish va 
  uning qatoridagi barcha boʻsh joyni egallash uchun biz yana bir marta panjara tartibidan foydalanamiz (esda tutingki, sukut boʻyicha a 

  undagi elementlar bilan bir xil oʻlchamda boʻladi, shuning uchun uni kattaroq qilish uchun uning balandligi va/yoki kengligini ko'rsatish kerak).
• Xato xabari uchun biz shunchaki uning o'lchami va uslublari bilan o'ynaymiz. E'tibor bering, dastlab opacityu 0 ga o'rnatilgan, ya'ni u ko'rinmaydi. Agar foydalanuvchi noto'g'ri hisob ma'lumotlarini kiritsa, bu qiymat JavaScript yordamida o'zgartiriladi.

• Xato xabaridagi matnning yarmi ko'rinishini ham o'zgartiramiz. Agar siz HTML-dagi xabar elementiga qaytsangiz, bizda:
• 
  Foydalanuvchi nomi noto'g'ri va/yoki parol
  
• Matnning yarmini o'rab turgan elementga e'tibor bering . elementdagi matnning faqat bir qismini uslublashni xohlasangiz juda foydali. Xato xabari matnning ikki qatoriga, “Noto'g'ri foydalanuvchi nomi” va “va/yoki parol”ga bo'linishini xohlayotganimiz sababli, biz ikkinchi yarmini matnning yangi qatori sifatida ko'rsatamiz, bu ekranni block( #error-msg-second-line {display: block;}).
• Endi biz CSS-ni to'ldirish uchun faqat qoidalar to'plamini, 
  panjaraning uchinchi qatoridan o'tishimiz kerak (71-qator oxirigacha). Biz to'r tartibini oxirgi marta to'rga aylantirish uchun foydalanishni boshlaymiz . Biroq, biz uning qoidalarida boshqa grid xususiyatidan ham foydalanamiz, #login-form. Yildan bir grid element hisoblanadi 

  element Grid idish, biz bu grid element o'z satr ichiga o'rnatilgan bo'lishi kerak qanday aytishim mumkin. Shunday qilib, biz uni satrning yuqori qismiga vertikal ravishda tekislashni aytamiz align-self: flex-start. Hech narsa ko'proq, kam emas.

• Keyin shakl maydonlarini stilize qilamiz. Ikkala maydon ham (foydalanuvchi nomi va parol) bir xil ko'rinishini xohlaganimiz uchun biz ikkala elementga berilgan sinfni tanlaydigan yagona qoidalar to'plamini yaratamiz, login-form-field. Har bir alohida elementni faqat CSS-ni takrorlash uchun identifikatori bo'yicha tanlash o'rniga, biz CSS-ni bitta sinfda bir marta yozamiz va keyin bu sinfni ikkala elementga beramiz.
• Uslubni o'zgartirish uchun bu ikki elementni yaxshiroq ko'rsatish uchun ozgina o'zgarishlar kiritildi . To'ldiruvchi matn uslubini s uslubiga mos saqlash uchun biz ushbu to'ldiruvchining ranglarini ::placeholderpsevdo-element bilan ham o'zgartiramiz . Lekin, uni umumiy qilish va yozish o'rniga ::placeholder {...}, biz faqat sinfga ega bo'lgan elementlarning joy egalarini o'zgartirishni xohlashimizni belgilaymiz .login-form-field: .login-form-field::placeholder {...}. Yana CSS selektorlarini iloji boricha aniqroq qilishga harakat qiling.
• Nihoyat, tizimga kirish tugmasi uslubini o'zgartirib, uni yaxshiroq ko'rinishga keltiramiz. Bu yerda hech qanday yangilik yo‘q, bundan tashqari cursor: pointer, kursorni tugma ustiga olib borganingizda kursorni ko‘rsatkichga aylantiradi.