Div-ga asoslangan veb-saytning asoslari: 7 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:29

Bu ko'rsatma sizga divlar yordamida veb -sayt yaratish asoslarini ko'rsatib beradi. Chunki tartib uchun ishlatiladigan jadvallar yomon!: pTa'lim berishni tushunish uchun siz asosiy HTML va CSS -ni bilishingiz kerak. Agar biror narsani tushunmasangiz, bemalol so'rang. Mening shaxsiy bosh sahifamda ham shunday div tuzilmasi ishlatiladi.

1 -qadam: Asosiy fayllarni yarating

Avval html faylini yarating. Biz unga eng asosiylarini qo'shamiz. CSS fayli hozircha bo'sh bo'ladi.html fayli hozir o'z ichiga oladi: test Html faylini biror narsa.html sifatida saqlang. Ismni o'zingiz tanlashingiz mumkin. Sizning CSS faylingiz.css sifatida saqlanishi kerak. Html faylida aytilgan nomni berganingizga ishonch hosil qiling. Bu holda "style.css". Bizni brauzerimizda oldindan ko'rilganda html sahifasi bo'sh bo'ladi.

2 -qadam: Asosiy ranglar, shriftlar uchun asosiy yorliqni tahrirlash …

Biz html faylini shunday qoldiramiz va faqat CSS faylini tahrir qilamiz CSS faylingizga quyidagi kodni qo'shing: body {background: #444444; shrift-oilasi: verdana, arial, sans-serif; rang: #444444; shrift o'lchami: 12 piksel; margin: 0px;} Ushbu bitli kod yordamida biz tana yorlig'ining barcha xususiyatlarini aniqlaymiz. Barcha kontent asosiy tagda bo'lgani uchun, bu sozlamalar butun sahifaga ta'sir qiladi. Fon va shrift rangi (rangi) quyuq kul rangga, shriftlar oilasi (shriftlar oilasi) esa verdanaga o'rnatildi. Agar bizning veb -saytimizni ko'rish uchun ishlatiladigan kompyuterda "verdana" shrift bo'lmasa, u bizning saytimizni "arial" shriftida ko'rsatadi. Siz ko'proq shriftlarni ro'yxatga qo'shishingiz mumkin. "Sans-serif"-bu siz ko'rsatmagan shrift mavjud bo'lganda ishlatiladigan umumiy turdagi shrift o'lchami (shrift o'lchami) 12 piksel. Bu mutlaq qiymat. Agar siz boshqa shrift o'lchamlarini tahrir qilmoqchi bo'lsangiz (masalan, sarlavhalar, paragraflar, menyu elementlari, …) "px" o'rniga "em" nisbiy birligidan foydalanishingiz mumkin. Shunday qilib, agar siz veb -saytingiz hajmini o'zgartirmoqchi bo'lsangiz, siz tanadagi shrift hajmini o'zgartirishingiz kerak bo'ladi. Bu sayt oynaning yuqori qismiga yopishib olishiga ishonch hosil qilish uchun qilingan.

3 -qadam: Sarlavha va kontentli konteyner qo'shish

Endi biz konteynerni qo'shamiz. Bu butun veb -saytimizni o'z ichiga oladigan markazlashtirilgan div. Bu konteynerga biz yana ikkita div qo'shamiz; kontent div va sarlavha div. Html faylimiz endi shunday bo'ladi: test Content Header Biz CSS faylimizga quyidagi kodni qo'shamiz: div#container {width: 800px; chegara: 0 piksel avtomatik; fon: #FFFFFF; to'ldirish: 0 piksel;} div#kontent {kengligi: 800 piksel; to'ldirish tepasi: 100 piksel; fon: sariq;} div#sarlavha {kenglik: 800 piksel; balandligi: 100 piksel; fon: ko'k; pozitsiya: mutlaq; top: 0px;}. clearfix: keyin {content: "."; ko'rsatish: blok; balandligi: 0; aniq: ikkalasi ham; visibility: hidden;}. clearfix {display: inline-block;}/* IE Macdan yashirish \*/. clearfix {display: block;} div#konteynerida id konteynerli div yorlig'i borligini bildiradi. Biz bir nechta ranglar va "margin: 0px auto;" qo'shamiz. Bizning konteynerimiz sahifada joylashganligiga ishonch hosil qilish uchun biz sarlavhani "yuqori: 0 piksel" bilan mutlaq qiymat va yuqori qismga berishimiz kerak. xunuk ranglar. Bu ranglarni o'qishni osonlashtirish va turli divlarni ko'rish uchun. Bizning navigatsiya va kontent divlarimiz (keyingi bosqichda qo'shilgan) atrofdagi divdan chiqib ketmasligiga ishonch hosil qilish uchun bizga bu g'alati aniq kod kerak bo'ladi.

4 -qadam: Navigatsiya va haqiqiy tarkib uchun kontent bo'limida ikkita div tuzing

Endi kontent diviga yana ikkita div qo'shamiz. Biri navigatsiya uchun, ikkinchisi haqiqiy kontent uchun. Kontent yorlig'i o'rtasida; siz yangi kodni qo'shasiz:

Navigatsiya Asosiy tarkib Navigatsiya va asosiy tarkib divlarini ko'rsatish uchun bir nechta CSS kodini qo'shamiz; div#nav {width: 200px; suzish: chap; fon: to'q sariq;} div#maincontent {en: 600px; suzish: o'ng; fon: pushti;} E'tibor bering, bu ikkita div ham suzuvchi. Agar biz oldingi qadamda qo'shimcha aniq kodni qo'ymaganimizda, divlar atrofdagi divdan tashqarida suzardi. Clearfix usuli bilan biz bunday bo'lmasligiga ishonch hosil qilamiz.

5 -qadam: Navigatsiyaga tuzilish uchun qo'shimcha divlar qo'shing

Endi biz veb -sahifamizda qandaydir tuzilma yaratish uchun "nav" div -ga qo'shimcha divlarni qo'shamiz. Quyidagi kodni o'zgartiring:

• Foo
• Bar

"Navblock" div qanday ko'rsatilishi kerakligini aniqlash uchun biz kodning bir qismini e'lon qilamiz. Buning sababi oddiy; identifikatorli divlar faqat bir marta ko'rsatiladi (navigatsiya bloki, sarlavha, altbilgi,…). Sinflar bilan divlar bir necha bor ko'rsatilishi mumkin. Bu erda biz sinfdan foydalanamiz. Agar biz boshqa navigatsiya blokini keyinroq qo'shmoqchi bo'lsak, on.div.navblock {width: 180px; chegara: 5 pikselli avtomatik; chegara: 1 piksel qattiq qizil;} Agar biz boshqa navigatsiya blokini qo'shmoqchi bo'lsak, siz yangi tuzilmani qo'shishingiz kerak bo'ladi. Sizning kodingiz endi shunday bo'ladi;

• Foo
• Bar
• Boo
• Uzoq

6 -qadam: Asosiy tarkibga tuzilish uchun qo'shimcha divlar qo'shing

Endi biz maincontent div uchun ham xuddi shunday qilamiz. Kod endi shunday ko'rinadi:

Lorem ipsum dolor o'tiring,…

Shunga qaramay, divni qanday ko'rsatish kerakligini aniqlash uchun CSS faylimizga bir parcha kod qo'shamiz: div.contentblock {width: 580px; chegara: 5 pikselli avtomatik; chegara: 1 pikselli oq;} Endi biz asosiy kontent diviga shunday "…" qo'shib, boshqa tarkib blokini qo'shishimiz mumkin;

Lorem ipsum dolor o'tiring,…

Nunc cursus, faqat element elementlari,…

7 -qadam: Saytni biroz chirkin qilib qo'ying

Endi qiziqarli qism; ranglar. Endi bizda asosiy div tuzilmasi bor, biz ranglarni biroz xaotik/chirkinroq narsaga o'zgartira olamiz … CSS faylidagi ranglar bilan o'ynang, mana rasmda ko'rsatilgan veb -sahifaning to'liq html fayli.: sinov

• Foo
• Bar
• Boo
• Uzoq

Lorem ipsum dolor o'tiring,…

Nunc cursus, faqat element elementlari,…

Sarlavha Va bu to'liq CSS fayli: body {background: #444444; shrift-oilasi: verdana, arial, sans-serif; rang: #444444; shrift o'lchami: 12 piksel; chegara: 0 piksel;} div#konteyner {kengligi: 800 piksel; chegara: 0 piksel avtomatik; fon: #FFFFFF; to'ldirish: 0 piksel;} div#kontent {kengligi: 800 piksel; to'ldirish tepasi: 100 piksel; fon: #FFFFFF;} div #sarlavha {kengligi: 800 piksel; balandligi: 100 piksel; fon: #888888; pozitsiya: mutlaq; tepa: 0px;} div#nav {kenglik: 200 piksel; suzish: chap; fon: #FFFFFF;} div #maincontent {en: 600px; suzish: o'ng; fon: #DDDDDD;} div.navblock {eni: 180 piksel; chegara: 5 pikselli avtomatik; chegara: 1px qattiq #DDDDDD;} div.contentblock {eni: 580 piksel; chegara: 5 pikselli avtomatik; chegara: 1px qattiq #FFFFFF;}. clearfix: keyin {tarkib: "."; ko'rsatish: blok; balandligi: 0; aniq: ikkalasi ham; visibility: hidden;}. clearfix {display: inline-block;}/* IE Macdan yashirish \*/. clearfix {display: block;} Demak, endi sizda asosiy ma'lumotlar bor. Albatta, ranglar, shrift o'lchamlari, navigatsiya bloki kabi tahrir qilish uchun hali ko'p narsa bor … Lekin bu ko'rsatmalarni faqat div tuzilishi haqida. Agar siz boshqa tegishli ko'rsatmalarni ko'rishni xohlasangiz, har doim so'rashingiz mumkin. Ko'raman, vaqt topa olamanmi.