Div-д суурилсан вэбсайтын үндсэн ойлголтууд: 7 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:06

Энэхүү зааварчилгаа нь танд divs ашиглан вэбсайт бүтээх үндсэн аргуудыг харуулах болно. Учир нь зохион байгуулалтанд ашигладаг хүснэгтүүд муу юм!: pЭнэ зааварчилгааг ойлгохын тулд та html болон css -ийн үндсэн мэдлэгтэй байх хэрэгтэй. Хэрэв та ямар нэг зүйлийг ойлгохгүй байгаа бол асуугаарай, миний хувийн нүүр хуудсан дээр ийм төрлийн дивизийн бүтэц ашиглагддаг.

Алхам 1: Үндсэн файлуудыг үүсгэнэ үү

Эхлээд html файлаа үүсгээрэй. Бид үүнд хамгийн үндсэн зүйлийг нэмж оруулах болно. CSS файл одоохондоо хоосон байх болно.html файлд одоо агуулагдсан болно: тест Өөрийн html файлыг ямар нэг зүйл.html хэлбэрээр хадгалах. Та нэрийг өөрөө сонгож болно. Таны CSS файлыг.css хэлбэрээр хадгалах ёстой. Html файлд дурдсантай ижил нэр өгсөн эсэхээ шалгаарай. Энэ тохиолдолд "style.css". Бид хөтөч дээрээ урьдчилан үзэхэд бидэнд энгийн хоосон HTML хуудас байна.

Алхам 2: Үндсэн өнгө, фонт, …

Бид html файлыг байгаагаар нь үлдээж зөвхөн CSS файлыг засварлах болно. Дараах кодыг CSS файлдаа нэмнэ үү: body {background: #444444; фонт-гэр бүл: verdana, arial, sans-serif; өнгө: #444444; фонтын хэмжээ: 12 пиксел; margin: 0px;} Энэ бит кодоор бид биеийн хаягийн бүх шинж чанарыг тодорхойлно. Бүх агуулга үндсэн хаяг дотор байгаа тул эдгээр тохиргоо нь бүх хуудсанд нөлөөлөх болно. Арын дэвсгэр, фонтын өнгө (өнгө) нь хар саарал, фонтын бүлгийг (фонт-гэр бүл) вердана болгож тохируулсан болно. Хэрэв манай вэбсайтыг үзэхэд ашигладаг компьютерт "verdana" фонт байхгүй бол манай сайтыг "arial" фонтоор харуулах болно. Та жагсаалтад илүү олон фонт нэмж болно. "Sans-serif" нь таны өгсөн фонт байхгүй үед хэрэглэгдэх ерөнхий төрөл юм. Үсгийн хэмжээг (фонтын хэмжээ) 12 пикселээр тохируулсан болно. Энэ бол үнэмлэхүй үнэ цэнэ юм. Хэрэв та бусад үсгийн хэмжээг (толгой, догол мөр, цэсийн зүйл гэх мэт) засварлахыг хүсч байвал "px" -ийн оронд "em" харьцангуй нэгжийг ашиглаж болно. Хэрэв та вэбсайтынхаа хэмжээг өөрчлөхийг хүсвэл зөвхөн биеийн фонтын хэмжээг өөрчлөх шаардлагатай болно. Энэ сайт нь цонхны дээд талд наалдах эсэхийг шалгахын тулд хийгддэг.

Алхам 3: Толгой ба агуулгатай контейнер нэмэх

Одоо бид савыг нэмж оруулах болно. Энэ бол манай вэбсайтыг бүхэлд нь багтаасан төвлөрсөн div юм. Энэ контейнерт бид дахин хоёр div нэмэх болно; Агуулга div ба толгой div. Одоо манай html файл иймэрхүү харагдах болно: Агуулгын толгойг шалгах Бид CSS файлдаа дараах кодыг нэмнэ: div#container {width: 800px; маржин: 0 пиксел авто; дэвсгэр: #FFFFFF; дүүргэлт: 0px;} div#контент {өргөн: 800px; дэвсгэр дүүргэгч: 100 пиксел; дэвсгэр: шар;} div#толгой {өргөн: 800px; өндөр: 100 пиксел; дэвсгэр: цэнхэр; байр суурь: үнэмлэхүй; top: 0px;}. clearfix: дараа {контент: "."; дэлгэц: блок; өндөр: 0; тодорхой: хоёулаа; харагдах байдал: далд;}. clearfix {дэлгэц: inline-block;}/* IE Mac-аас нуух \*/. clearfix {дэлгэц: блок;} div#контейнер нь "контейнер" id-тэй div хаягтай гэсэн үг юм. Бид зарим өнгө, "margin: 0px auto;" нэмэх болно. Манай контейнер хуудсан дээр төвлөрч байгаа эсэхийг шалгахын тулд толгойг бусад контентоос дээгүүр байрлуулсан эсэхийг шалгахын тулд контентийг дүүргэгч болон толгой хэсэгт "top: 0px" гэсэн үнэмлэхүй утгыг өгөх ёстой. муухай өнгө. Энэ нь өнгийг унших, өөр өөр хэсгүүдийг харахад хялбар болгох үүднээс бидний навигаци болон агуулгын хуваалтууд (дараагийн алхамд нэмэгдсэн) эргэн тойрны дивизээс унахгүй байхын тулд бидэнд энэ хачин тод томруун код хэрэгтэй болно.

Алхам 4: Навигац болон бодит контентийн хувьд Агуулгын хэлтэст хоёр Div хий

Бид одоо контентийн дивид дахин хоёр div нэмэх болно. Нэг нь навигацид, нөгөө нь бодит агуулгад зориулагдсан. Агуулгын шошго хооронд; Та шинэ кодыг нэмэх болно:

Жолоодлогын үндсэн агуулга Бид навигаци болон үндсэн контентийг харуулахын тулд css кодыг нэмж оруулах болно; div#nav {width: 200px; хөвөх: зүүн; дэвсгэр: улбар шар;} div#maincontent {өргөн: 600px; хөвөх: баруун; background: pink;} Эдгээр хоёр дивиз хоёулаа хөвж байгааг анхаарна уу. Хэрэв бид өмнөх алхамдаа нэмэлт цэвэрлэгээний кодыг оруулаагүй бол divs нь эргэн тойрны дивээс гадуур хөвөх болно. Clearfix аргын тусламжтайгаар бид ийм зүйл болохгүй гэдгийг баталгаажуулах болно.

Алхам 5: Навигацид зарим нэмэлт Div -ийг нэмж оруулаарай

Бид одоо вэб хуудсандаа ямар нэгэн бүтэц үүсгэхийн тулд "nav" div аль алинд нь нэмэлт div -үүдийг нэмж оруулах болно. Дараах кодыг өөрчилнө үү.

• Хөөе
• Баар

Одоо бид "navblock" div хэрхэн харуулах ёстойг тодорхойлохын тулд нэг хэсэг код зарлах болно. Үүний шалтгаан нь энгийн; id бүхий div -ийг зөвхөн нэг удаа харуулдаг (навигацийн блок, толгой, хөл,…). Ангиудтай дивийг нэгээс олон удаа харуулах боломжтой. Энд бид анги ашиглах болно. Зүгээр л бид дараа нь өөр навигацийн блок нэмэхийг хүсэх болно.div.navblock {width: 180px; маржин: 5 пиксел авто; border: 1px хатуу улаан;} Хэрэв бид өөр навигацийн блок нэмэхийг хүсч байвал та шинэ бүтэц нэмж оруулах хэрэгтэй болно. Таны код одоо иймэрхүү харагдах болно;

• Хөөе
• Баар
• Боо
• Алс

Алхам 6: Үндсэн агуулга дахь бүтцэд зориулж зарим нэмэлт Divs нэмнэ үү

Бид одоо maincontent div -ийн хувьд ижил зүйлийг хийх болно. Код одоо иймэрхүү харагдаж байна:

Lorem ipsum dolor sit amet,…

Дахин хэлэхэд бид div -ийг хэрхэн харуулахыг тодорхойлохын тулд CSS файлдаа нэг хэсэг код нэмж оруулах болно: div.contentblock {width: 580px; маржин: 5 пиксел авто; border: 1px хатуу цагаан;} Бид одоо үндсэн контентийн дивиз дээр өөр "…" нэмж өөр агуулгын блок нэмж болно;

Lorem ipsum dolor sit amet,…

Nunc cursus, зүгээр л нэг чухал элемент, …

Алхам 7: Сайтыг арай муухай болгоорой

Одоо хөгжилтэй хэсэг; Өнгө. Дивын үндсэн бүтэцтэй болсон тул өнгийг арай өөр эмх замбараагүй/муухай/болгон өөрчилж болно … Зүгээр л CSS файлын өнгөөр тоглоорой. Зураг дээр харуулсан вэб хуудасны html файлыг энд оруулав.: туршилт

• Хөөе
• Баар
• Боо
• Алс

Lorem ipsum dolor sit amet,…

Nunc cursus, зүгээр л нэг чухал элемент, …

Толгой ба энэ бол бүрэн CSS файл юм: body {background: #444444; фонт-гэр бүл: verdana, arial, sans-serif; өнгө: #444444; фонтын хэмжээ: 12 пиксел; зах: 0px;} div#контейнер {өргөн: 800px; маржин: 0 пиксел авто; дэвсгэр: #FFFFFF; дүүргэлт: 0px;} div#контент {өргөн: 800px; дэвсгэр дүүргэгч: 100 пиксел; дэвсгэр: #FFFFFF;} div #толгой {өргөн: 800px; өндөр: 100 пиксел; дэвсгэр: #888888; байр суурь: үнэмлэхүй; дээд: 0px;} div#nav {өргөн: 200px; хөвөх: зүүн; дэвсгэр: #FFFFFF;} div #maincontent {өргөн: 600px; хөвөх: баруун; дэвсгэр: #DDDDDD;} div.navblock {өргөн: 180px; маржин: 5 пиксел авто; хил: 1px хатуу #DDDDDD;} div.contentblock {өргөн: 580px; маржин: 5 пиксел авто; хил: 1px хатуу #FFFFFF;}. clearfix: дараа {контент: "."; дэлгэц: блок; өндөр: 0; тодорхой: хоёулаа; харагдах байдал: далд;}. clearfix {дэлгэц: inline-block;}/* IE Mac-с нуух \*/. clearfix {display: block;} Тэгэхээр одоо та үндсэн ойлголттой боллоо. Мэдээжийн хэрэг өнгө, фонтын хэмжээ, илүү сайн харагдах навигацийн блок гэх мэт олон зүйлийг засах шаардлагатай хэвээр байна … Гэхдээ энэ заавар нь зөвхөн div бүтцийн тухай юм. Хэрэв та бусад холбогдох зааварчилгааг үзэхийг хүсч байвал үргэлж асууж болно. Би цагаа олж чадах эсэхийг харах болно.