Div əsaslı bir veb saytın əsasları: 7 addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:49

Bu təlimat sizə div ilə veb sayt qurmağın əsaslarını göstərəcək. Layihə üçün istifadə olunan masalar pis olduğu üçün!: p Bu təlimatı başa düşmək üçün əsas html və css -i bilməlisiniz. Şəxsi ana səhifəmdə də bu cür div quruluşu istifadə olunur.

Addım 1: Əsas Faylları yaradın

Əvvəlcə html faylınızı yaradın. Buna əsasları əlavə edəcəyik. CSS faylı indiyə qədər boş qalacaq.html faylı indi ehtiva edir: test HTML faylınızı bir şey.html olaraq qeyd edin. Adı özünüz seçə bilərsiniz. CSS faylınız.css olaraq qeyd edilməlidir. Html faylında qeyd edildiyi kimi eyni ad verdiyinizə əmin olun. Bu halda "style.css". Brauzerimizdə əvvəlcədən baxıldıqda indi boş bir html səhifəmiz var.

Addım 2: Əsas Rənglər, Şriftlər,…

Html faylını olduğu kimi buraxacağıq və yalnız css faylını redaktə edəcəyik. Aşağıdakı kodu css faylınıza əlavə edin: body {background: #444444; font-family: verdana, arial, sans-serif; rəng: #444444; şrift ölçüsü: 12 piksel; margin: 0px;} Bu kod parçası ilə bədən etiketinin bütün xüsusiyyətlərini təyin edəcəyik. Bütün məzmun gövdə etiketində olduğu üçün bu parametrlər bütün səhifəni təsir edəcək. Arxa fon və yazı tipi rəngi (rəng) tünd boz rəngə, font ailəsi (font-family) isə verdana olaraq təyin edilmişdir. Veb saytımıza baxmaq üçün istifadə olunan kompüterdə "verdana" yazı tipi yoxdursa, saytımızı "arial" şriftində göstərəcək. Siyahıya daha çox şrift əlavə edə bilərsiniz. "Sans-serif", təqdim etdiyiniz yazı tipi olmadıqda istifadə ediləcək ümumi tipdir. Şrift ölçüsü (font ölçüsü) 12 piksel olaraq təyin edilmişdir. Bu mütləq dəyərdir. Başqa şrift ölçülərini (başlıqlar, paraqraflar, menyu elementləri kimi …) redaktə etmək istəyirsinizsə, "px" yerinə nisbi "em" vahidindən istifadə edə bilərsiniz. Bu yolla, veb saytınızın ölçüsünü dəyişdirmək istəyirsinizsə, gövdə şriftinin ölçüsünü dəyişmək məcburiyyətindəsiniz. Marja bədən etiketinin dörd tərəfi üçün 0px olaraq təyin edilmişdir. Bu, saytın pəncərənin üstünə yapışacağından əmin olmaq üçün edilir.

Addım 3: Başlıq və məzmunlu bir konteyner əlavə edin

İndi konteyner əlavə edəcəyik. Bu, bütün veb saytımızı ehtiva edən mərkəzləşdirilmiş bir divdir. Bu konteynerə daha iki div əlavə edəcəyik; məzmun div və başlıq div. Html faylımız indi belə görünəcək: test Content Header Aşağıdakı kodu css faylımıza əlavə edəcəyik: div#container {width: 800px; margin: 0 piksel avtomatik; fon: #FFFFFF; doldurma: 0 piksel;} div#məzmun {en: 800 piksel; dolgu üstü: 100 piksel; fon: sarı;} div#başlıq {en: 800 piksel; hündürlük: 100 piksel; fon: mavi; mövqe: mütləq; üst: 0px;}. clearfix: sonra {content: "."; ekran: blok; hündürlük: 0; aydın: hər ikisi; görünürlük: gizli;}. clearfix {ekran: inline-blok;}/* IE Mac-dan gizlət \*/. clearfix {göstər: blok;} div#konteyner "konteyner" id ilə bir div etiketinə sahib olduğumuz deməkdir. Bəzi rənglər və "margin: 0px auto;" əlavə edəcəyik. Konteynerimizin səhifənin mərkəzində olduğundan əmin olmaq üçün başlığın digər məzmunun üstündə yerləşdiyinə əmin olmaq üçün məzmuna "üst: 0 piksel" ilə mütləq bir dəyər vermək lazımdır. çirkin rənglər. Sadəcə rəngləri oxumağı və fərqli divləri görməyi asanlaşdırmaq üçün naviqasiya və məzmun divlərimizin (növbəti addımda əlavə edilmiş) ətrafdakı divdən düşməməsini təmin etmək üçün bu qəribə aydınlaşdırma koduna ehtiyacımız olacaq.

Addım 4: Naviqasiya və Həqiqi Məzmun üçün Məzmun Bölməsində İki Div yaradın

İndi məzmun div -ə daha iki div əlavə edəcəyik. Biri naviqasiya üçün, biri də əsl məzmun üçün. Məzmun etiketi arasında; yeni kodu əlavə edəcəksiniz:

Naviqasiya Əsas məzmun Naviqasiyanı və əsas məzmun divlərini göstərmək üçün bir neçə css kodu əlavə edəcəyik; div#nav {width: 200px; üzmək: sol; fon: narıncı;} div#maincontent {en: 600px; üzmək: sağ; background: pink;} Bu iki divin hər ikisinin də üzən olduğuna diqqət yetirin. Əvvəlki addımda əlavə təmizləmə kodunu qoymasaydıq, divlər ətrafdakı divin xaricində üzərdi. Clearfix metodu ilə bunun baş verməyəcəyinə əminik.

Addım 5: Naviqasiyada Struktur üçün Bəzi Əlavə Divlər əlavə edin

İndi veb səhifəmizdə bir növ quruluş yaratmaq üçün həm "nav" div -ə bir neçə əlavə div əlavə edəcəyik. Aşağıdakı kodu dəyişdirin:

• Foo
• Bar

Div "navblock" un necə göstərilməli olduğunu təyin etmək üçün indi bir kod reklam edəcəyik. Bunun səbəbi sadədir; id ilə divlər yalnız bir dəfə göstərilir (naviqasiya bloku, başlıq, altbilgi,…). Dərsləri olan divlər bir dəfədən çox göstərilə bilər. Burada bir sinif istifadə edəcəyik. Daha sonra başqa bir naviqasiya bloku əlavə etmək istəsək on.div.navblock {width: 180px; marj: 5 piksel avtomatik; haşiyə: 1 piksel bərk qırmızı;} Başqa bir naviqasiya bloku əlavə etmək istəsək, sadəcə yeni bir quruluş əlavə etməlisiniz … Sizin kodunuz indi belə olacaq;

• Foo
• Bar
• Boo
• Uzaq

Addım 6: Əsas Məzmunda Struktur üçün Bəzi Əlavə Divlər əlavə edin

İndi maincontent div üçün də eyni şeyi edəcəyik. Kod indi belə görünür:

Lorem ipsum dolor sit amet,…

Div -in necə göstərilməli olduğunu müəyyən etmək üçün yenə də CSS faylımıza bir kod parçası əlavə edəcəyik: div.contentblock {width: 580px; marj: 5 piksel avtomatik; haşiyə: 1 piksel bərk ağ;} İndi əsas məzmun div -inə başqa bir "…" əlavə edərək başqa bir məzmun bloku əlavə edə bilərik;

Lorem ipsum dolor sit amet,…

Nunc cursus, yalnız bir şey yazın,…

Addım 7: Saytı Biraz Daha Çirkin Edin

İndi əyləncəli hissə; rənglər. İndi əsas div quruluşuna sahib olduğumuz üçün rəngləri bir az daha xaotik/çirkin bir şeyə dəyişə bilərik … Yalnız css faylındakı rənglərlə oynayın. İşdə göstərilən veb səhifənin tam html faylı burada.: test

• Foo
• Bar
• Boo
• Uzaq

Lorem ipsum dolor sit amet,…

Nunc cursus, yalnız bir şey yazın,…

Başlıq Və tam css faylı budur: body {background: #444444; font-family: verdana, arial, sans-serif; rəng: #444444; şrift ölçüsü: 12 piksel; margin: 0px;} div#konteyner {en: 800px; margin: 0 piksel avtomatik; fon: #FFFFFF; doldurma: 0 piksel;} div#məzmun {en: 800 piksel; dolgu üstü: 100 piksel; fon: #FFFFFF;} div #başlığı {eni: 800 piksel; hündürlük: 100 piksel; arxa plan: #888888; mövqe: mütləq; üst: 0px;} div#nav {en: 200px; üzmək: sol; fon: #FFFFFF;} div #maincontent {eni: 600px; üzmək: sağ; fon: #DDDDDD;} div.navblock {eni: 180px; marj: 5 piksel avtomatik; sərhəd: 1 piksel möhkəm #DDDDDD;} div.contentblock {eni: 580px; marj: 5 piksel avtomatik; sərhəd: 1 piksel möhkəm #FFFFFF;}. clearfix: sonra {content: "."; ekran: blok; hündürlük: 0; aydın: hər ikisi; görünmə: gizli;}. clearfix {ekran: inline-blok;}/* IE Mac-dan gizlət \*/. clearfix {display: block;} Beləliklə, indi əsasları əldə etdiniz. Əlbəttə ki, rənglər, şrift ölçüləri, daha yaxşı görünən bir naviqasiya bloku kimi düzəltmək üçün hələ çox şey var … Amma bu təlimatlar yalnız div quruluşu haqqındadır. Əlaqədar digər təlimatçıları görmək istəyirsinizsə, hər zaman soruşa bilərsiniz. Vaxt tapa biləcəyimi görəcəyəm.