Div- ի վրա հիմնված վեբ կայքի հիմունքները. 7 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:53

Այս ուսանելի ծրագիրը ցույց կտա ձեզ այն հիմնական հիմունքները, թե ինչպես կարելի է վեբ կայք ստեղծել div- ներով: Քանի որ դասավորության համար օգտագործվող սեղանները չար են:: p Այս հրահանգը հասկանալու համար պետք է իմանալ հիմնական html և css- ը: Եթե դուք ինչ -որ բան չեք հասկանում, ազատ զգացեք հարցնելու համար: Իմ անձնական էջը նույնպես օգտագործում է այս տեսակի div կառուցվածքը: https://www.erwtje.net Վայելեք

Քայլ 1: Ստեղծեք հիմնական ֆայլեր

Նախ ստեղծեք ձեր html ֆայլը: Մենք դրան կավելացնենք հիմնականը: Css ֆայլն առայժմ դատարկ կլինի: html ֆայլը այժմ պարունակում է. Անունը կարող եք ինքներդ ընտրել: Ձեր css ֆայլը պետք է պահվի որպես.css: Համոզվեք, որ դրան տալիս եք նույն անունը, ինչպես նշված է html ֆայլում: Այս դեպքում "style.css". Մենք այժմ ունենք դատարկ HTML էջ, երբ դիտվում ենք մեր դիտարկիչում:

Քայլ 2: Խմբագրեք մարմնի պիտակը հիմնական գույների, տառատեսակների,…

Մենք HTML ֆայլը կթողնենք այնպես, ինչպես կա և կփոխենք միայն css ֆայլը: Ձեր css ֆայլին ավելացրեք հետևյալ ծածկագիրը ՝ body {background: #444444; font-family: verdana, arial, sans-serif; գույն: #444444; տառատեսակի չափը `12px; margin: 0px;} Այս փոքր կոդով մենք կսահմանենք մարմնի պիտակի բոլոր հատկությունները: Քանի որ ամբողջ բովանդակությունը գտնվում է մարմնի պիտակում, այս պարամետրերը կազդի ամբողջ էջի վրա: Ֆոնի և տառատեսակի գույնը (գույնը) սահմանվել է մուգ մոխրագույնի: Տառատեսակի ընտանիքը (տառատեսակ-ընտանիք) սահմանվել է verdana: Եթե մեր կայքը դիտելու համար օգտագործվող համակարգիչը չունի «verdana» տառատեսակը, այն մեր կայքը կցուցադրի «arial» տառատեսակով: Դուք կարող եք ավելի շատ տառատեսակներ ավելացնել ցուցակին: «Sans-serif»-ն այն ընդհանուր տեսակն է, որը կօգտագործվի, երբ ձեր տրամադրած տառատեսակը հասանելի չէ: Տառատեսակի չափը (տառաչափը) սահմանվել է 12 պիքսել: Սա բացարձակ արժեք է: Եթե ցանկանում եք խմբագրել տառատեսակի այլ չափսեր (օրինակ ՝ վերնագրերը, պարբերությունները, ընտրացանկի տարրերը …), կարող եք օգտագործել «em» հարաբերական միավորը «px»-ի փոխարեն: Այս կերպ, եթե ցանկանում եք չափափոխել ձեր վեբ կայքը, դուք պետք է փոխեք միայն տառատեսակի չափը: Մարմնի պիտակի չորս կողմերի համար լուսանցքը սահմանվել է 0px: Դա արվում է, որպեսզի համոզվեք, որ կայքը կպչի պատուհանի վերևին:

Քայլ 3: Վերնագրով և բովանդակությամբ բեռնարկղ ավելացնելը

Այժմ մենք ավելացնում ենք կոնտեյները: Սա պարզապես կենտրոնացված բաժանմունք է, որը կպարունակի մեր ամբողջ կայքը: Այս կոնտեյներով մենք կավելացնենք ևս երկու div: բովանդակություն div և վերնագիր div. Մեր html ֆայլը այսուհետ կունենա այս տեսքը. լուսանցք ՝ 0px ավտոմատ; ֆոն ՝ #FFFFFF; լիցքավորում ՝ 0px;} div#բովանդակություն {լայնություն ՝ 800px; լիցք-վերև ՝ 100px; ֆոն ՝ դեղին;} div#վերնագիր {լայնություն ՝ 800px; բարձրություն `100px; ֆոն `կապույտ; պաշտոնը `բացարձակ; վերև: 0px;}. clearfix: հետո {բովանդակությունը ՝ "."; ցուցադրում `բլոկ; բարձրություն `0; պարզ ՝ երկուսն էլ; տեսանելիություն ՝ թաքցված;}. clearfix {ցուցադրում ՝ inline-block;}/* Թաքցնել IE Mac- ից \*/. clearfix {display: block;} div#բեռնարկղը նշանակում է, որ մենք ունենք div պիտակ ՝ id «բեռնարկղ» -ով: Մենք կավելացնենք որոշ գույներ և «լուսանցք ՝ 0px ավտոմատ;» համոզվելու համար, որ մեր կոնտեյները կենտրոնացած է էջում: Մենք պետք է բովանդակությանը տանք լցոնիչ և վերնագիր `« վերև: 0px »բացարձակ արժեք` համոզվելու համար, որ վերնագիրը տեղադրված է մյուս բովանդակության վերևում: տգեղ գույները: Պարզապես գույներն ընթերցելն ու տարբեր դիվերը տեսնելը հեշտացնելու համար մեզ պետք կգա այս տարօրինակ հստակեցման կոդը ՝ համոզվելու համար, որ մեր նավարկության և բովանդակության div- ները (ավելացված են հաջորդ քայլում) դուրս չեն գալիս շրջապատող div- ից:

Քայլ 4. Նավիգացիայի և իրական բովանդակության բովանդակության բաժնում կազմեք երկու բաժանում

Այժմ մենք բովանդակության բաժանման մեջ կավելացնենք ևս երկու div: Մեկը նավարկության համար և մեկը `իրական բովանդակության համար: Բովանդակության պիտակի միջև; Դուք կավելացնեք նոր ծածկագիրը.

Նավիգացիա Հիմնական բովանդակություն Մենք կավելացնենք որոշ css ծածկագիր ՝ նավարկության և հիմնական բովանդակության div- ները ցուցադրելու համար; div#nav {width: 200px; բոց: ձախ; ֆոն `նարնջագույն;} div#maincontent {լայնությունը` 600px; բոց: աջ; ֆոն ՝ վարդագույն;} Ուշադրություն դարձրեք այն փաստին, որ այս երկու բաժանարարները երկուսն էլ լողում են: Եթե մենք նախորդ քայլին չտեղադրեինք լրացուցիչ հստակեցման ծածկագիրը, ապա div- ները կլողանային շրջակա div- ից դուրս: Clearfix մեթոդով մենք կհամոզվենք, որ դա տեղի չի ունենում:

Քայլ 5: Նավիգացիայի կառուցվածքի համար ավելացրեք որոշ լրացուցիչ բաժիններ

Այժմ մենք մի քանի լրացուցիչ div կավելացնենք երկու «nav» div- ին ՝ մեր վեբ էջում ինչ -որ կառուցվածք ստեղծելու համար: Փոփոխեք հետևյալ բիտ կոդը.

• Ֆու
• Բար

Այժմ մենք գովազդելու ենք կոդի մի կտոր, որը սահմանում է, թե ինչպես պետք է ցուցադրվի div «navblock» - ը: Նկատի ունեցեք, որ navblock- ն ունի դաս, այլ ոչ թե id: Դրա պատճառը պարզ է. id- ով գտնվող div- երը ցուցադրվում են միայն մեկ անգամ (նավիգացիոն բլոկ, վերնագիր, ստորագիր,…): Դասարաններով բաժանարարները կարող են ցուցադրվել մեկից ավելի անգամ: Այստեղ մենք կօգտագործենք դասարան: Այն դեպքում, երբ մենք կցանկանանք ավելացնել նավարկության մեկ այլ բլոկ ավելի ուշ.div.navblock {width: 180px; լուսանցք ՝ 5px ավտոմատ; եզրագիծ ՝ 1 պիքս կարմիր;

• Ֆու
• Բար
• Բու
• Հեռու

Քայլ 6: Հիմնական բովանդակության մեջ կառուցվածքի համար ավելացրեք որոշ լրացուցիչ բաժիններ

Այժմ մենք նույնը կանենք հիմնական բովանդակության div- ի համար: Այժմ ծածկագիրը հետևյալն է.

Lorem ipsum dolor sit amet,…

Կրկին, մենք կոդի մի կտոր կավելացնենք մեր css ֆայլում `որոշելու, թե ինչպես պետք է ցուցադրվի div- ը. Div.contentblock {width: 580px; լուսանցք ՝ 5px ավտոմատ; եզրագիծ ՝ 1 պիքս սպիտակ;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Քայլ 7: Կայքը մի փոքր ավելի տգեղ դարձրեք

Այժմ զվարճալի մասը; գույներ: Այժմ, երբ մենք ունենք հիմնական div կառուցվածքը, մենք կարող ենք գույները փոխել մի փոքր ավելի քաոսային/տգեղ/… Պարզապես խաղացեք css ֆայլում առկա գույների հետ: Ահա պատկերում ցուցադրված վեբ էջի ամբողջական HTML ֆայլը: փորձարկում

• Ֆու
• Բար
• Բու
• Հեռու

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Վերնագիր Եվ սա ամբողջական css ֆայլն է ՝ body {background: #444444; font-family: verdana, arial, sans-serif; գույն: #444444; տառատեսակի չափը `12px; լուսանցք ՝ 0px;} div#բեռնարկղ {լայնություն ՝ 800px; լուսանցք ՝ 0px ավտոմատ; ֆոն ՝ #FFFFFF; լիցքավորում ՝ 0px;} div#բովանդակություն {լայնություն ՝ 800px; լիցք-վերև ՝ 100px; ֆոն ՝ #FFFFFF;} div #վերնագիր {լայնություն ՝ 800px; բարձրություն `100px; ֆոն ՝ #888888; պաշտոնը `բացարձակ; վերև ՝ 0px;} div#nav {լայնությունը ՝ 200px; բոց: ձախ; ֆոն ՝ #FFFFFF;} div #հիմնական բովանդակություն {լայնություն ՝ 600px; բոց: աջ; ֆոն ՝ #DDDDDD;} div.navblock {լայնությունը ՝ 180px; լուսանցք ՝ 5px ավտոմատ; եզրագիծ ՝ 1px պինդ #DDDDDD;} div.contentblock {լայնություն ՝ 580px; լուսանցք ՝ 5px ավտոմատ; եզրագիծ ՝ 1px պինդ #FFFFFF;}. clearfix: հետո {բովանդակությունը ՝ "."; ցուցադրում `բլոկ; բարձրություն `0; պարզ ՝ երկուսն էլ; տեսանելիություն ՝ թաքցված;}. clearfix {ցուցադրում ՝ inline-block;}/* Թաքցնել IE Mac- ից \*/. clearfix {ցուցադրում: արգելափակում;} Այսպիսով, այժմ դուք ստացել եք հիմնականը: Իհարկե, դեռ շատ բան կա խմբագրելու, ինչպիսիք են գույները, տառատեսակի չափերը, ավելի լավ տեսք ունեցող նավարկության բլոկը … Բայց այս հրահանգները վերաբերում են միայն div կառուցվածքին: Եթե ցանկանում եք տեսնել այլ համապատասխան հրահանգներ, միշտ կարող եք հարցնել: Կտեսնեմ ՝ ժամանակ կգտնե՞մ: