ფორმა სტილისტური ეტიკეტებით
როგორ შევქმნათ ფორმის ლეიბლი CSS-ით. ფორმის ელემენტი, რომელიც გამოიყენება ვებ გვერდის ფორმაში სხვადასხვა ველებისა და შეყვანის არეების ლეიბლისთვის, არის ლეიბლის ელემენტი. მისი სტილისტიკა შესაძლებელია კასკადური სტილის ფურცლის წესების გამოყენებით.
Ნაბიჯი 1
ლეიბლის ელემენტების სტილისთვის ისე, როგორც ისინი გამოსახულია შესავალში, თქვენ უნდა გამოიყენოთ ლეიბლის ელემენტი ატრიბუტით "for". გარდა ამისა, თქვენ უნდა დახუროთ ეტიკეტის ელემენტი, სანამ თავად დაამატებთ "შეყვანის" ელემენტს. HTML სრული ფორმისთვის, რომელიც ნაჩვენებია ილუსტრაციაში.
დღის ვიდეო
ნაბიჯი 2
ლეიბლის ელემენტების სტილისთვის, მე ვაჩვენე ეტიკეტები, როგორც ბლოკის დონის ელემენტები, რომლებიც მარცხნივ იყო მოძრავი. შემდეგ მე მივანიჭე ეტიკეტებს სიგანე ისე, რომ შეყვანის ველები ყველა იყოს ერთიანი მანძილის დაშორებით ეტიკეტებისგან. მე მივაკუთვნე ფერი და ტექსტი გავამკაცრე. მე გამოვიყენე გენერირებული კონტენტი ლეიბლის შემდეგ ორწერტილის (: ) დასამატებლად. (მსხვილი ნაწლავი შეიძლება არ გამოჩნდეს ყველა ბრაუზერში.)
აქ არის CSS:
ლეიბლი { ფერი: #B4886B; შრიფტის წონა: თამამი; ჩვენება: ბლოკი; სიგანე: 150px; float: მარცხენა; } label: შემდეგ { content: ": " }
ნაბიჯი 3
უბრალოდ სისრულისთვის მე ასევე გაჩვენებთ CSS-ს, რომელიც გამოიყენება ველების ნაკრების სტილისთვის, რადგან ლეიბლის ელემენტები შემოსაზღვრული ველების ნაკრებით არის შემოსაზღვრული.
აი ეს CSS:
fieldset { საზღვარი: 1px მყარი #CCA383; სიგანე: 400px; ფონი: #FFE8EF; padding: 3px; } fieldset legend { background: #CCA383; padding: 6px; შრიფტის წონა: თამამი; }
ნაბიჯი 4
თქვენ შეგიძლიათ გააკეთოთ ბევრი სხვა რამ ეტიკეტის ელემენტების სტილისთვის. ჩემი მაგალითი ამის გაკეთების მხოლოდ ერთი გზაა.
ფორმა HTML
რამ დაგჭირდებათ
HTML-ის სამუშაო ცოდნა
CSS-ის სამუშაო ცოდნა
