Վերնագիր (ֆոն՝ #00b0d8 url(images/header-gradient.png) կրկնում-x; ) .header-bg (ֆոն՝ url(images/header-animal.png) կրկնում-x կենտրոնի ներքև; բարձրություն՝ 405px; )

Արդյունքում ֆայլերի չափը 12,5 ԿԲ է ստացվել, ինչը սպասվածից էլ քիչ է։

Կայքի անվանումը

Անունը գրված է փետրավոր եզրերով ամպի վրա, ինչը պետք է դժվարացնի գրադիենտին կիրառելը։ Դրանք շրջանցելու երկու եղանակ կա.

1. Օգտագործեք PNG-24 ձևաչափը՝ պահպանելով թափանցիկությունը:
2. Պահպանեք նկարը որպես GIF կամ PNG-8 գրադիենտ հատվածով, այնուհետև ծածկեք նկարը գրադիենտի վրա, որպեսզի համապատասխանությունը կատարյալ լինի պիքսելներով:

Ակնհայտ է, որ երկրորդ մեթոդը մի շարք թերություններ ունի՝ պատկերը հնարավոր չէ տեղափոխել նույնիսկ մի երկու պիքսելով, այն կապված է գրադիենտի հետ, և եթե դրա գրադիենտը փոխվի, ապա պատկերը նույնպես պետք է փոխվի։ Այսպիսով, մենք պահպանում ենք վերնագիրը PNG-24 ձևաչափով: HTML կոդը կմնա նույնը, բայց ոճերը կընդլայնվեն:

Վերնագիր ( ֆոն՝ #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg (ֆոն՝ url(images/header-animal.png) կրկնել-x կենտրոնի ներքև; բարձրություն՝ 405px; /* Վերնագրի բարձրությունը */ տեքստի հավասարեցում. կենտրոն; /* Կենտրոնի հավասարեցում */ ) .header-bg img ( դիրքը՝ հարաբերական; /* Հարաբերական դիրքավորում */ վերև՝ 40px; /* Տեղափոխել պատկերը ներքև */ )

Կենտրոնում հավասարեցումը կատարվում է պիտակի ծնողին ավելացված text-align հատկության միջոցով , և տեղափոխեք ներքև՝ վերևի հատկության միջով: Որպեսզի այս հատկությունը աշխատի, պատկերը պետք է տեղադրվի հարաբերական՝ օգտագործելով position հատկությունը սահմանված հարաբերականի վրա:

Կայքի գլխավոր էջում անվամբ նկարը ցուցադրվում է ինչպես միշտ, մյուս էջերում այն ​​ծառայում է որպես հղում. գլխավոր էջ. Դա անելու համար պարզապես մի փոքր փոխեք կոդը.

href հատկանիշի / արժեքը մատնանշում է հիմնական էջը և աշխատում է միայն վեբ սերվերի վրա, ոչ թե տեղական:

Վերնագրի վերջնական կոդը ներկայացված է Օրինակ 6.14-ում:

Օրինակ 6.14. Կայքի վերնագիր

HTML5 CSS 2.1 IE Cr Op Sa Fx

Հաճախ թվում է պարզ առաջադրանքներԴասավորությունները պահանջում են HTML նշագրման բարդ կառուցվածք և CSS հնարքների օգտագործում: Կենտրոնացնելով տարրերը կամ բովանդակության հավասարեցումը կարող է շատ հոգնեցուցիչ լինել: Նման առաջադրանքներից մեկը կայքի վերևի տարրերը հավասարեցնելն է, որպեսզի պատկերանշանը լինի ձախ կողմում, իսկ ցանկի տարրերը՝ աջ: Դուք կարող եք օգտագործել float և position:absolute, իսկ ուղղահայաց հավասարեցման համար տարբեր տարրերին ավելացնել լուսանցք և լիցք: Թվում է, թե ոչ մի բարդ բան չկա: Բայց եթե կայքը պետք է ճիշտ ցուցադրվի շարժական սարքեր, խնդիրները շատ են։

Ստորև ներկայացված է այս խնդրի լուծման հակիրճ ձևը:

HTML նշումը հնարավորինս պարզ է.

Վերնագրի բարձրությունը ամրագրված է, ավելացրեք տեքստի հավասարեցում. արդարացնել, մանկական տարրերի համար.

Վերնագիր (տեքստի հավասարեցում. արդարացնել; տառերի միջև ընկած տարածություն՝ 1px; բարձրություն՝ 8em; լիցք՝ 2em 10%, ֆոն՝ #2c3e50; գույն՝ #fff; )

Ավելացում ցուցադրում՝ ներկառուցված բլոկբոլոր տարրերի համար նավորպեսզի կարողանաք դրանք իրար կողքի դասավորել.

Վերնագիր h1, վերնագիր նավարկություն (ցուցադրում՝ inline-block;)

Վերագրել տեքստի հավասարեցում. արդարացնելՈրպեսզի աշխատենք այնպես, ինչպես ցանկանում ենք, մենք պետք է օգտագործենք կեղծ տարրերի մի փոքր հնարք, որը հայտնաբերված է Կատարյալ հիմնավորված CSS ցանցի տեխնիկայում՝ օգտագործելով ներկառուցված բլոկ Ջելմեր դե Մաատի կողմից.

Վերնագիր::հետո (բովանդակություն՝ «»; ցուցադրում՝ ներկառուցված բլոկ; լայնություն՝ 100%; )

Արդյունքը հորիզոնական հավասարեցումն էր՝ առանց օգտագործման լողալԵվ դիրք՝ բացարձակ. Այժմ դուք պետք է հարթեցնեք տարրերը ուղղահայաց: Օգտագործելով ուղղահայաց-հավասարեցնելտարրերի համար նավկախվածություն կլինի մայր բլոկի բարձրությունից՝ վերնագիր: Եվ սա այնքան էլ ճիշտ չէ։ Ուղղահայաց հավասարեցում օգտագործելու օրինակներ՝ վերև և ուղղահայաց հավասարեցում՝ միջին jsbin-ում: Ստորև, հավանաբար, ամենաշատը հարմար միջոցուղղահայաց հավասարեցում.

Եկեք նորից օգտագործենք կեղծ տարրերը: օգտագործելով Միխալ Չեռնոուի կողմից հիշատակված Անհայտ հոդվածում Կենտրոնացման օրինակը.

Վերնագիր h1 (բարձրությունը՝ 100%; ) վերնագիր h1::նախքան (բովանդակությունը՝ ""; ցուցադրումը՝ ներկառուցված բլոկ; ուղղահայաց հավասարեցում՝ միջին; բարձրությունը՝ 100%; )
Արդյունքն այն է, ինչ ձեզ հարկավոր է.

Մնում է լուծել երկու խնդիր՝ վերնագրում մեծ քանակությամբ տեքստի ճիշտ ցուցադրում և հարմարվողականություն: Եթե ​​կայքի վերնագիրը չափազանց երկար է, դասավորությունը կսկսի դուրս գալ.

Օգտագործելով կեղծ տարրերի հնարքը վերնագիր:

CSS կոդը

վերնագիր (տեքստի հավասարեցում. արդարացնել; բարձրությունը՝ 15մ; լիցք՝ 2մմ 5%, ֆոն՝ #2c3e50; գույնը՝ #fff; ) վերնագիր::հետո (բովանդակությունը՝ ""; ցուցադրում՝ inline-block; լայնությունը՝ 100%; ) header > div, header nav, header div h1 ( ցուցադրում՝ inline-block; ուղղահայաց հավասարեցում: միջին; ) header > div ( լայնությունը՝ 50%; բարձրությունը՝ 100%, տեքստի հավասարեցումը՝ ձախ; ) header > div: :before (բովանդակությունը՝ ""; ցուցադրումը՝ inline-block; ուղղահայաց հարթեցում՝ միջին; բարձրությունը՝ 100%; )

Շատ ավելի լավ տեսք ունի.

Հիմա եկեք անցնենք հարմարվողականությանը: Այս խնդիրը լուծելու մի քանի եղանակ կա, դուք պարզապես կարող եք չսահմանել վերնագրի բարձրությունը, և բոլոր ներքին տարրերը հարմարվող կլինեն բարձրության վրա: Սա չի պահանջում երկրորդ կեղծ տարրերի հնարք, կենդանի օրինակ jsbin-ում:

CSS կոդը

վերնագիր (տեքստի հավասարեցում. հիմնավորում; լիցքավորում՝ 2em 5%, ֆոն՝ #2c3e50; գույն՝ #fff; ) վերնագիր::հետո (բովանդակություն՝ ""; ցուցադրում՝ inline-block; լայնությունը՝ 100%; ) վերնագիր h1, վերնագրի նավարկություն (ցուցադրում՝ ներկառուցված բլոկ; ուղղահայաց հավասարեցում՝ միջին; ) վերնագիր h1 (լայնությունը՝ 50%; տեքստի հավասարեցում՝ ձախ; ներդիր՝ վերևում՝ 0.5 մ; )

Եթե ​​Ձեզ անհրաժեշտ է սահմանել վերնագրի բարձրությունը, ապա դուք ստիպված կլինեք օգտագործել երկրորդ հնարքը կեղծ տարրերով և ավելացնել մեդիա հարցում տարբեր չափերի էկրանների համար.

@media էկրան և (առավելագույն լայնությունը՝ 820px) ( վերնագիր ( բարձրությունը՝ ավտոմատ; ) վերնագիր > div, վերնագիր >

Արդյունքը արձագանքող է և շարժական սարքերում այսպիսի տեսք ունի.

Օրինակը պարզության համար օգտագործում է 820px, կենդանի կայքում, իհարկե, արժեքը պետք է տարբեր լինի՝ պահանջներին համապատասխան։ Աջակցության համար Internet Explorer 8 կեղծ տարրերի համար անհրաժեշտ է օգտագործել «:»՝ «::»-ի փոխարեն:

Վերջնական CSS կոդը

@import url (http://fonts.googleapis.com/css?family=Lato:400,700 italic); * ( լիցք՝ 0; լուսանցք՝ 0; ) հիմնական (ֆոն՝ #1abc9c; տառատեսակ-ընտանիք՝ «Lato», sans-serif; տեքստի փոխակերպում՝ մեծատառ; տառերի միջև հեռավորություն՝ 1px;) վերնագիր (տեքստի հավասարեցում՝ արդարացնել ; բարձրություն՝ 8մ; լիցք՝ 2մ 5%, ֆոն՝ #2c3e50; գույն՝ #fff; ) վերնագիր::հետո (բովանդակություն՝ ""; ցուցադրում՝ ներգծային բլոկ; լայնություն՝ 100%; ) վերնագիր > div, վերնագիր > div:: առաջ, վերնագիր նավարկություն, վերնագիր > div h1 ( ցուցադրում. ներդիր-բլոկ; ուղղահայաց հավասարեցում: միջին; տեքստի հավասարեցում: ձախ; ) վերնագիր > div ( բարձրությունը՝ 100%; : ""; բարձրություն՝ 100%; ) վերնագիր > div h1 ( տառաչափը՝ 3em; տառատեսակի ոճը՝ շեղ; -երեխա ( padding-աջ՝ 0; ) @media էկրան և (առավելագույն լայնությունը՝ 720px) ( վերնագիր ( բարձրությունը՝ ավտոմատ; ) վերնագիր > div, վերնագիր > div h1, վերնագիր նավարկություն ( բարձրությունը՝ ավտոմատ; լայնությունը՝ ավտոմատ, ցուցադրում բլոկ; տեքստի հավասարեցում: կենտրոն; ))

Էջ դասավորությունը html փաստաթղթի կառուցվածքի մշակման գործընթացն է, որի արդյունքը վեբ էջն է։ Վեբ էջի կառուցվածքը որոշվում է համապատասխան html թեգերով։ Թեգերը՝ բովանդակության համար նախատեսված ուղղանկյուն կոնտեյների բլոկները, չեն ցուցադրվում բրաուզերի պատուհանում: Նրանք զննարկիչին տեղեկացնում են բովանդակության տեսակի մասին, և բրաուզերը ցուցադրում է դրանց բովանդակությունը էկրանին այս տեղեկատվության հիման վրա՝ տեքստային կամ մեդիա ֆայլեր։

Ինչպես ստեղծել էջի կառուցվածք՝ օգտագործելով բլոկներ (բլոկների դասավորություն)

1. Ինչպես բաժանել ձեր էջի դասավորությունը բաժինների

Էջի դասավորություն ստեղծելու համար անհրաժեշտ է ընտրել փաստաթղթի հիմնական բաժինները (հատվածները): Սեկցիոն տարրերի մասին ավելին կարող եք կարդալ հոդվածում:

Ստանդարտ վեբ էջը պարունակում է հետևյալ բաժինները.

Մենք չենք օգտագործի տարրը, քանի որ այն չի աջակցվում բոլոր բրաուզերների կողմից:

տարրեր,

և բլոկ մակարդակի են, ուստի նրանք կզբաղեցնեն իրենց կոնտեյներ-տարրի ամբողջ լայնությունը: Նման նշումով էջը լավ տեսք կունենա փոքր էկրաններին, սակայն ավելի բարձր լուծաչափով սարքերում նման էջերի տեքստը անհարմար կլինի կարդալ: Հետևաբար, դուք պետք է ավելացնեք կոնտեյների պիտակ բովանդակության համար՝ յուրաքանչյուր բաժնի բովանդակությունը.

Բրինձ. 2. Էջի հիմնական բաժինները կոնտեյների պիտակով

և դրա համար սահմանեք առավելագույն լայնություն՝ լիցք, որը կառանձնացնի բովանդակությունը ցածր լուծաչափով սարքերի էկրանի եզրերից, ինչպես նաև արտաքին լցոնում, որը թույլ է տալիս հարթեցնել կոնտեյները մայր բլոկի մեջտեղում.

Բեռնարկղ (լայնությունը՝ 100%, առավելագույն լայնությունը՝ 1024px; /*առավելագույն լայնությունը կարող է տարբեր լինել*/ լիցք՝ 0 15px; լուսանցք՝ 0 ավտոմատ; )

Այսպիսով, մենք ստացանք շրջանակ մեր էջի համար (հատվածների բարձրությունն այս դեպքում վիրտուալ է, քանի որ առանց բովանդակության բաժինները զրոյական բարձրություն ունեն):

2. Կայքի վերնագրի դասավորությունը և դրա տարրերի դիրքավորումը

Սկսենք նշել առաջին բաժինը, այսպես կոչված, վեբ էջի վերնագիրը: Տարրը նախատեսված է էջի/կայքի վրա ներածական տեղեկատվության և նավիգացիոն միջոցները խմբավորելու համար: Ավելացնել կայքի պատկերանշանը և նավիգացիոն հղումները պիտակի ներսում.

Լոգոն ( float: ձախ; ) nav ( float: աջ; ) nav ul ( լուսանցք՝ 0; լիցքավորում՝ 0; ցուցակի ոճ՝ ոչ մեկը; ) nav li (ցուցադրում՝ inline-block; /*տարրերը շարելու մեկ եղանակ * /)

Բլոկի տարրերը գծի վրա տեղադրելու մի քանի եղանակ կա: Բոլորն էլ ներառված են դասում։

Ուշադրություն դարձրեք, որ փաթաթումը կիրառելուց հետո գլխարկը չկա: Դա պայմանավորված է նրանով, որ լողացող տարրերը (որոնք դրված են լողացող) դուրս են բերվում նորմալ հոսքից, և մայր կոնտեյները այլևս չի տեսնում դրանց բարձրությունը, ուստի և՛ տարրը, և՛ դրա ներսում գտնվող տարրը .container դասի հետ փլուզվել են: Այս իրավիճակը շտկելու համար եկեք օգտագործենք հոսքի մաքրումը .container դասի տարրի համար՝

Կոնտեյներ՝ հետո (բովանդակություն՝ «», ցուցադրում՝ աղյուսակ, պարզ՝ երկուսն էլ; )

Դրան մենք կավելացնենք նաև ուղղահայաց լցոնում՝ առանձնացնելով դրա ներսում գտնվող տարրերը վերնագրի եզրերից։ Արդյունքում ոճերը կունենան հետևյալ տեսքը.

Բեռնարկղ (լայնությունը՝ 100%, առավելագույն լայնությունը՝ 1024px, լիցքավորումը՝ 15px, լուսանցքը՝ 0 ավտոմատ; )

Բրինձ. 5. Հոսքի մաքրում

Դիտարկենք մի իրավիճակ, երբ նկարը հանդես է գալիս որպես լոգո։ Այն կարող է ավելացվել անմիջապես թեգի ներսում կամ որպես ֆոնային պատկեր: Պատկերը կունենա իր բարձրությունը, որը կարող է շատ տարբերվել նավիգացիոն մենյուի բարձրությունից, ուստի մենք կբախվենք վերնագրի տարրերի ուղղահայաց դասավորության խնդրին։

Մեր օրինակում պատկերանշանի բարձրությունը 38px է, ուստի ցանկի հղումները վերնագրի մեջտեղում հավասարեցնելու համար մենք պետք է նրանց համար սահմանենք համապատասխան տողի բարձրությունը.

Nav a (տեքստային դեկորացիա՝ ոչ մեկը, տողի բարձրությունը՝ 38px; ) 7. Հավասարեցնել վերնագրի ցանկի հղումները

3. Ստեղծեք ցանց էջի հիմնական մասի համար

Էջի հիմնական մասը ամենից հաճախ տարբեր լայնությունների բլոկների ցանց է: Նման բլոկների տեղադրումը նույնպես կատարվում է օգտագործելով float հատկությունը: Բլոկների յուրաքանչյուր տող կփաթաթվի լրացուցիչ բլոկով .row դասով.

Բրինձ. 7. % էջի մարմնի ցանց; float՝ ձախ; ) .col-2-3 (լայնությունը՝ 66.6666666667%; float՝ ձախ; )

.row Class ունեցող տարրի համար մենք կարող ենք նաև կիրառել հոսքի մաքրում.

Container:after, .row:after (բովանդակությունը՝ ""; ցուցադրում: աղյուսակ; հստակ՝ երկուսն էլ; )

Տողերը միմյանցից առանձնացնելու համար կարող եք ներքևի լուսանցք ավելացնել.

Տող (լուսանցք-ներքև՝ 15px;)

Ցանցային բլոկների բարձրությունը որոշվում է դրանց բովանդակության բարձրությունից, ուստի այն կարող է տարբեր լինել.

Բլոկների բարձրությունը կարելի է ֆիքսել՝ այն հստակ նշելով, օրինակ՝ .row div (բարձրությունը՝ 100px): Բայց այս դեպքում պետք է վստահ լինել, որ դասավորությանը հարմարվողականություն ավելացնելիս բլոկների բովանդակությունը բլոկի եզրից այն կողմ չի անցնի։

Եթե ​​Ձեզ անհրաժեշտ է սահմանել Ֆոնի գույնըտողերի բլոկների համար, ապա դա կարելի է անել հետևյալ կերպ. .row դասի տարրի համար ավելացնել նոր դաս, որը թույլ կտա ոճավորել միայն այս շարքը (կստացվի. տող-մեկ տող), մենք դրա համար կնշենք բլոկի ֆոնի գույնը, որն ավելի փոքր է բարձրությամբ, իսկ բարձրահասակ բլոկի համար կսահմանենք իր գույնը։ , այսինքն՝ այս կերպ կպատրաստենք ֆոնային սուբստրատ։

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.

Մեկ շարք (ֆոն՝ բաց կապույտ; ) .col-2-3 (լայնություն՝ 66.6666666667%; լողացող՝ ձախ; ֆոն՝ ծովախեցգետին; )

Բրինձ. 9. Ֆոնային ենթաշերտ

Եթե ​​էջի հիմնական բաժինը պարունակում է ընդամենը երկու բլոկ, ապա լրացուցիչ փաթաթման տող կարող է բաց թողնել.

4. Էջի ստորագիր դասավորություն

Էջի ստորագիր կամ ստորագիր սովորաբար պարունակում է հեղինակային իրավունքի մասին տեղեկություններ, լրացուցիչ հղումներ և այլն։ Այս ամբողջ տեղեկատվությունը տեղադրվում է նաև սյունակներում, որոնք կարող են լինել նույն կամ տարբեր լայնություններով:

Կարծում եմ, որ ձեզանից շատերն արդեն նկատել են, որ այժմ միտումը ավելի ու ավելի կպչուն դիզայնի տարրեր են, որոնք մնում են տեսադաշտում, երբ օգտվողը ոլորում է էջը: Իմ կարծիքով սա շատ հարմար է, հատկապես, եթե դա կայքի նավարկություն է։ Սա հենց այն օրինակն է, որը մենք պատրաստվում ենք անել այսօր։ Կսովորենք, թե ինչպես անիմացիոն jQuery և CSS3 վերնագիր պատրաստել:

Ինչպես միշտ, պարզվում է, որ դա արվում է կոդերի նվազագույն տողերում և շատ պարզ է, և միևնույն ժամանակ շատ արդյունավետ։ Դե, հիմա եկեք անցնենք դասին:

Բայց նախ կցանկանայի մեծ շնորհակալություն հայտնել http://www.webdesignerdepot.com-ին և հիմա եկեք սկսենք:

Ι

HTML

HTML կոդը շատ, շատ պարզ է, մենք պարզապես պետք է սահմանենք պիտակները, այնուհետև դրանց միջև գրենք կայքի բովանդակությունը.

Կցված կայքի վերնագիր

Քանի որ սա ամենապարզ օրինակն է, այստեղ մենք պարզապես ավելացրել ենք տեքստ h1 պիտակների միջև, բայց այնտեղ կարող են օգտագործվել նաև պատկերներ, կամ, օրինակ, կայքի նավարկություն։

jQuery կոդը

CSS-ն ամենաշատն է լավագույն միջոցըանիմացիաների և անցումների իրականացում այժմ: Այսպիսով, մենք կօգտագործենք նվազագույն սցենարներ, այնուհետև էջը ոլորելիս գործարկվող անիմացիայի սահմանումը սահմանելու համար:

Երբ ոլորման արժեքի վրա էջի դիրքը 1-ից մեծ է, դա նշանակում է, որ օգտատերը ոլորել է էջը, և դուք պետք է ավելացնեք «կպչուն» դասը կայքի վերնագրի պիտակին: Այսպիսով, կայքի վերնագիրը գործարկվում և ամրագրվում է:

Եվ ահա ինքնին կոդը.

$(window).scroll(function() ( if ($(this).scrollTop() > 1)($("header").addClass("sticky"); ) else($("header").removeClass («կպչուն»); ) ));

Կարևոր է նշել, որ օգտագործումը այս օրինակըլավ գաղափար չէ, քանի որ եթե բրաուզերը անջատում է սկրիպտների օգտագործումը, ապա կայքի վերնագիրը պարզապես կուղղվի և վերջ։

css

CSS կոդը բաղկացած կլինի 2 մասից. Առաջին կոդը պատասխանատու կլինի կայքի ստանդարտ վերնագրի համար, որը գտնվում է լռելյայն դիրքում։ Երկրորդ կոդը պատասխանատու կլինի վերնագրի ցուցադրման համար, երբ օգտվողը ոլորում է էջը: Տեսնենք, թե ինչ տեսք ունի լռելյայն կոդը.

Վերնագիր (դիրքը՝ ֆիքսված; լայնությունը՝ 100%, տեքստի հավասարեցումը՝ կենտրոնում; տառաչափը՝ 72px; տողի բարձրությունը՝ 108px; բարձրությունը՝ 108px; ֆոնը՝ #335C7D; գույնը՝ #fff; տառատեսակը՝ ընտանիքը՝ "PT Sans" «, sans-serif;)

Հիմա զվարճալի մասի մասին. երբ օգտատերը ոլորում է էջը ներքև, այնուհետև կկիրառվի .sticky դասը, որը մենք կարող ենք նրան տալ բոլոր տեսակի ցուցադրումներ, որոնք ունակ են CSS-ին: Մենք նաև կսահմանենք ֆիքսված դիրք, որպեսզի մեր կայքի վերնագիրը միշտ տեսանելի լինի:

Սրանց հետ CSS կանոններ, որոնք ներքևում են, մենք ուզում ենք ոլորելիս կրճատել հենց վերնագրի տարածքը, փոխել գույնը և, իհարկե, նվազեցնել տառատեսակը: Ահա ինքնին կոդը.

Header.sticky ( տառաչափը՝ 24px; տողի բարձրությունը՝ 48px; բարձրությունը՝ 48px; ֆոն՝ #efc47D; տեքստի հավասարեցում՝ ձախ; ներդիր՝ ձախ՝ 20px; )

Սա ամենապարզ օրինակն է, որով պետք է հասկանալ աշխատանքի էությունը։ Ամեն ինչ կախված է ձեր կայքի դիզայնից:

Առայժմ, եկեք մի քանի անիմացիա ավելացնենք մեր անցմանը, օգտագործելով: Ահա կոդը.

Անցում. բոլոր 0.4s հեշտություն;

Ι

Եզրակացություն

Հուսով եմ, որ այս մեթոդը շատ հարցեր կլուծի կայքի համար հարմար և պարզ նավիգացիայի իրականացման վերաբերյալ: Բացի այդ, այս իրականացումը շատ պարզ է և հասկանալի:

Հեղուկի դասավորության հիմնական դժվարությունն այն է, որ այն ճիշտ ցուցադրվի տարբեր լուծաչափերով՝ բարձրից մինչև ցածր: Քանի որ մենք սահմանափակել ենք բովանդակության լայնությունը մինչև 760 պիքսել, վերնագրի պատկերը պետք է տեղադրվի այնպես, որ պատկերի ավելի կարևոր մասը տեղավորվի այդ չափի մեջ: Նկ. 6.3-ը ցույց է տալիս, թե ինչպես դա անել: 760px լայնությամբ կենտրոնական մասը ընդգծված է մուգ գույնով, նույն լայնության մնացած հատվածները նշված են A տառով։

Բրինձ. 6.3. Կափարիչի լայնությունը

Վերնագրում նկարի ավելացումը կատարվում է ֆոնային պատկերի միջոցով, որը պետք է համապատասխանեցվի տարրի կենտրոնին:

Վերնագիր (ցուցադրում՝ արգելափակում; /* Ավելի հին բրաուզերների համար */ բարձրությունը՝ 405px; /* Վերնագրի բարձրությունը */ ֆոնը՝ url (images/header-bg.png) առանց կրկնվող կենտրոնի ներքևի;

Իդեալում, նկարը պետք է ունենա 2000 պիքսել մեծ լայնություն, այնուհետև գրեթե ցանկացած մոնիտորի լուծաչափով նկարը ցույց կտա կենտրոնական մասը՝ կտրելով այն ամենը, ինչ չի տեղավորվում պատուհանում: Բայց դժվարությունն այն է, որ ի սկզբանե նկարն այնքան էլ լայն չէ, և դուք չեք ցանկանում նկարել սև շերտեր, որոնք անվերջ ձգվում են կողմերի երկայնքով: Լուծումներից մեկը ֆոնին հորիզոնական կրկնելու հնարավորություն տալն է: Նրանք, ովքեր ունեն 1280 պիքսել կամ ավելի լայնություն, կտեսնեն մեկ պատկեր, մինչդեռ լայն մոնիտորների տերերը կկարողանան հիանալ միանգամից մի քանի կենդանիներով և միաժամանակ մայր մտնելով: Այստեղ կարևոր է գծագիրը խմբագրել այնպես, որ այն իր հետ հորիզոնական հարթեցվի առանց հոդերի (նկ. 6.4): Հստակության համար գրադիենտը թաքնված է:

Բրինձ. 6.4. Պատկերի հորիզոնական հավասարեցում

Այս նկարում հոդը նշվում է սլաքով և բացով, որպեսզի հոդի տեսանելի լինի: Եթե ​​դուք ճիշտ խմբագրեք ֆոնային պատկերի աջ և ձախ մասերը, ապա այն կկրկնվի հորիզոնական՝ առանց տեսանելի հոդերի, ինչպես մեկ շարունակական նկար: Մնում է մի փոքր շտկել ոճը՝ փոխարինելով չկրկնվող արժեքը (առանց կրկնության) կրկնվող x-ով (հորիզոնական կրկնություն):

Վերնագիր (ցուցադրում՝ բլոկ; բարձրություն՝ 405 պիքսել; ֆոն՝ url (images/header-bg.png) կրկնում-x կենտրոնի ներքևում;)

Բրինձ. 6.5. Վերնագրի ֆոնային պատկեր

PNG-24 ձևաչափով 1325x405 պիքսել ֆոն ունեցող ֆայլը պահանջում է մոտ 32 Կբ, իսկ PNG-8-ում՝ 256 գույնի ներկապնակով, որտեղ գրադիենտի որակը մի փոքր ավելի վատ է՝ մոտ 15 Կբ։ Դուք կարող եք ֆոնը բաժանել երկու բաղադրիչի՝ գրադիենտ և պատկեր, և պահպանել յուրաքանչյուր պատկեր իր ձևաչափով, ինչը պետք է հանգեցնի գրադիենտ ցուցադրման որակի բարձրացմանը: Այնուամենայնիվ, 32 ԿԲ-ն այդքան մեծ պատկերի համար շատ չէ, և ինչ-որ մեկը լրացուցիչ օպտիմալացումը կհամարի որպես «խնայողություն համընկնումների վրա»: Այնուամենայնիվ, կայքի վերնագրի ստեղծման այլընտրանքային մոտեցումը օգտակար կլինի ինչ-որ մեկին, և եթե ցանկանում եք, կարող եք բաց թողնել այն:

Վերնագրի օպտիմիզացում

Քանի որ վերնագրի գրադիենտը կրկնվում է հորիզոնական, այն կարելի է կտրել դասավորությունից և սահմանել որպես ֆոնային պատկեր: Նկ. Նկար 6.6-ում ներկայացված է 405 պիքսելանոց բարձր գրադիենտ, որը պատրաստված է այս նպատակով: PNG-24 ձևաչափը աղավաղում չի առաջացնում պատկերի մեջ և լավ սեղմում է գրադիենտները (վերջնական չափը 402 բայթ է), ուստի այս դեպքում այն ​​անպայման պետք է օգտագործվի: Նկարի շուրջ շրջանակն ավելացվում է պարզության համար:

Բրինձ. 6.6. Գրադիենտ գծագրություն (header-gradient.png)

Կենդանի ուրվանկարներով նկարը արված է թափանցիկ ֆոնի վրա և 198 պիքսել բարձրությամբ, անիմաստ է այն դարձնել վերնագրի ամբողջ բարձրությունը, քանի որ այն զբաղեցնում է դրա միայն մի մասը։ Պատկերի հատվածը ներկայացված է նկ. 6.7. Շաշկի տախտակը նշանակում է թափանցիկություն։

Բրինձ. 6.7. Թափանցիկությամբ ֆոնային պատկեր (header-animal.png)

Քանի որ այս պատկերը պահվում է PNG-8 ձևաչափով, որն ունի թափանցիկության միայն մեկ մակարդակ, ի տարբերություն PNG-24 ձևաչափի 256 մակարդակների, կարևոր է ապահովել, որ այն ճիշտ համադրվի գրադիենտ ֆոնի հետ: Դա անելու համար Photoshop-ում խնայելիս անհրաժեշտ է նշել եզրերի գույնը (Մատթ) գրադիենտի միջին հատվածին մոտ, որտեղ ուրվագիծը ծածկված է: Մոտավորապես այս գույնը #9de1f0 է: Այս դեպքում ծառերի և կենդանիների շուրջ կեղտոտ եզրագծեր չեն լինի, իսկ գրադիենտի վրա կիրառված նկարը կընկալվի որպես ամբողջություն։

Պատրաստվում է վերնագրի ֆոնի երկու պատկեր, գրում ենք HTML կոդը։

Եվ ոճ header-bg տարրի և շերտի համար:

Վերնագիր (ֆոն՝ #00b0d8 url(images/header-gradient.png) կրկնում-x; ) .header-bg (ֆոն՝ url(images/header-animal.png) կրկնում-x կենտրոնի ներքև; բարձրություն՝ 405px; )

Արդյունքում ֆայլերի չափը 12,5 ԿԲ է ստացվել, ինչը սպասվածից էլ քիչ է։

Կայքի անվանումը

Անունը գրված է փետրավոր եզրերով ամպի վրա, ինչը պետք է դժվարացնի գրադիենտին կիրառելը։ Դրանք շրջանցելու երկու եղանակ կա.

1. Օգտագործեք PNG-24 ձևաչափը՝ պահպանելով թափանցիկությունը:
2. Պահպանեք նկարը որպես GIF կամ PNG-8 գրադիենտ հատվածով, այնուհետև ծածկեք նկարը գրադիենտի վրա, որպեսզի համապատասխանությունը կատարյալ լինի պիքսելներով:

Ակնհայտ է, որ երկրորդ մեթոդը մի շարք թերություններ ունի՝ պատկերը հնարավոր չէ տեղափոխել նույնիսկ մի երկու պիքսելով, այն կապված է գրադիենտի հետ, և եթե դրա գրադիենտը փոխվի, ապա պատկերը նույնպես պետք է փոխվի։ Այսպիսով, մենք պահպանում ենք վերնագիրը PNG-24 ձևաչափով: HTML կոդը կմնա նույնը, բայց ոճերը կընդլայնվեն:

Վերնագիր ( ֆոն՝ #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg (ֆոն՝ url(images/header-animal.png) կրկնել-x կենտրոնի ներքև; բարձրություն՝ 405px; /* Վերնագրի բարձրությունը */ տեքստի հավասարեցում. կենտրոն; /* Կենտրոնի հավասարեցում */ ) .header-bg img ( դիրքը՝ հարաբերական; /* Հարաբերական դիրքավորում */ վերև՝ 40px; /* Տեղափոխել պատկերը ներքև */ )

Կենտրոնում հավասարեցումը կատարվում է պիտակի ծնողին ավելացված text-align հատկության միջոցով , և տեղափոխեք ներքև՝ վերևի հատկության միջով: Որպեսզի այս հատկությունը աշխատի, պատկերը պետք է տեղադրվի հարաբերական՝ օգտագործելով position հատկությունը սահմանված հարաբերականի վրա:

Կայքի գլխավոր էջում վերնագրով նկարը ցուցադրվում է ինչպես միշտ, մյուս էջերում այն ​​ծառայում է որպես գլխավոր էջի հղում։ Դա անելու համար պարզապես մի փոքր փոխեք կոդը.

href հատկանիշի / արժեքը մատնանշում է հիմնական էջը և աշխատում է միայն վեբ սերվերի վրա, ոչ թե տեղական:

Վերնագրի վերջնական կոդը ներկայացված է Օրինակ 6.14-ում:

Օրինակ 6.14. Կայքի վերնագիր

HTML5 CSS 2.1 IE Cr Op Sa Fx

Ինչպե՞ս բռնել առյուծին անապատում.

Հաճախ դասավորության պարզ թվացող առաջադրանքները պահանջում են բարդ HTML նշագրման կառուցվածք և CSS հնարքների օգտագործում: Կենտրոնացնելով տարրերը կամ բովանդակության հավասարեցումը կարող է շատ հոգնեցուցիչ լինել: Նման առաջադրանքներից մեկը կայքի վերևի տարրերը հավասարեցնելն է, որպեսզի պատկերանշանը լինի ձախ կողմում, իսկ ցանկի տարրերը՝ աջ: Դուք կարող եք օգտագործել float և position:absolute, իսկ ուղղահայաց հավասարեցման համար տարբեր տարրերին ավելացնել լուսանցք և լիցք: Թվում է, թե ոչ մի բարդ բան չկա: Բայց եթե կայքը պետք է ճիշտ ցուցադրվի շարժական սարքերում, ապա շատ խնդիրներ կան:

Ստորև ներկայացված է այս խնդրի լուծման հակիրճ ձևը:

HTML նշումը հնարավորինս պարզ է.

սուպեր վատ

Վերնագրի բարձրությունը ամրագրված է, ավելացրեք տեքստի հավասարեցում. արդարացնել, մանկական տարրերի համար.

Վերնագիր (տեքստի հավասարեցում. արդարացնել; տառերի միջև ընկած տարածություն՝ 1px; բարձրություն՝ 8em; լիցք՝ 2em 10%, ֆոն՝ #2c3e50; գույն՝ #fff; )

Ավելացում ցուցադրում՝ ներկառուցված բլոկբոլոր տարրերի համար նավորպեսզի կարողանաք դրանք իրար կողքի դասավորել.

Վերնագիր h1, վերնագիր նավարկություն (ցուցադրում՝ inline-block;)

Վերագրել տեքստի հավասարեցում. արդարացնելՈրպեսզի աշխատենք այնպես, ինչպես ցանկանում ենք, մենք պետք է օգտագործենք կեղծ տարրերի մի փոքր հնարք, որը հայտնաբերված է Կատարյալ հիմնավորված CSS ցանցի տեխնիկայում՝ օգտագործելով ներկառուցված բլոկ Ջելմեր դե Մաատի կողմից.

Վերնագիր::հետո (բովանդակություն՝ «»; ցուցադրում՝ ներկառուցված բլոկ; լայնություն՝ 100%; )

Արդյունքը հորիզոնական հավասարեցումն էր՝ առանց օգտագործման լողալԵվ դիրք՝ բացարձակ. Այժմ դուք պետք է հարթեցնեք տարրերը ուղղահայաց: Օգտագործելով ուղղահայաց-հավասարեցնելտարրերի համար նավկախվածություն կլինի մայր բլոկի բարձրությունից՝ վերնագիր: Եվ սա այնքան էլ ճիշտ չէ։ Ուղղահայաց հավասարեցում օգտագործելու օրինակներ՝ վերև և ուղղահայաց հավասարեցում՝ միջին jsbin-ում: Ստորև բերված է, թերևս, ուղղահայաց հավասարեցման ամենահարմար միջոցը:

Եկեք նորից օգտագործենք կեղծ տարրերը: օգտագործելով Միխալ Չեռնոուի կողմից հիշատակված Անհայտ հոդվածում Կենտրոնացման օրինակը.

Վերնագիր h1 (բարձրությունը՝ 100%; ) վերնագիր h1::նախքան (բովանդակությունը՝ ""; ցուցադրումը՝ ներկառուցված բլոկ; ուղղահայաց հավասարեցում՝ միջին; բարձրությունը՝ 100%; )
Արդյունքն այն է, ինչ ձեզ հարկավոր է.

Մնում է լուծել երկու խնդիր՝ վերնագրում մեծ քանակությամբ տեքստի ճիշտ ցուցադրում և հարմարվողականություն: Եթե ​​կայքի վերնագիրը չափազանց երկար է, դասավորությունը կսկսի դուրս գալ.

Օգտագործելով կեղծ տարրերի հնարքը վերնագիր:

CSS կոդը

վերնագիր (տեքստի հավասարեցում. արդարացնել; բարձրությունը՝ 15մ; լիցք՝ 2մմ 5%, ֆոն՝ #2c3e50; գույնը՝ #fff; ) վերնագիր::հետո (բովանդակությունը՝ ""; ցուցադրում՝ inline-block; լայնությունը՝ 100%; ) header > div, header nav, header div h1 ( ցուցադրում՝ inline-block; ուղղահայաց հավասարեցում: միջին; ) header > div ( լայնությունը՝ 50%; բարձրությունը՝ 100%, տեքստի հավասարեցումը՝ ձախ; ) header > div: :before (բովանդակությունը՝ ""; ցուցադրումը՝ inline-block; ուղղահայաց հարթեցում՝ միջին; բարձրությունը՝ 100%; )

Շատ ավելի լավ տեսք ունի.

Հիմա եկեք անցնենք հարմարվողականությանը: Այս խնդիրը լուծելու մի քանի եղանակ կա, դուք պարզապես կարող եք չսահմանել վերնագրի բարձրությունը, և բոլոր ներքին տարրերը հարմարվող կլինեն բարձրության վրա: Սա չի պահանջում երկրորդ կեղծ տարրերի հնարք, կենդանի օրինակ jsbin-ում:

CSS կոդը

վերնագիր (տեքստի հավասարեցում. հիմնավորում; լիցքավորում՝ 2em 5%, ֆոն՝ #2c3e50; գույն՝ #fff; ) վերնագիր::հետո (բովանդակություն՝ ""; ցուցադրում՝ inline-block; լայնությունը՝ 100%; ) վերնագիր h1, վերնագրի նավարկություն (ցուցադրում՝ ներկառուցված բլոկ; ուղղահայաց հավասարեցում՝ միջին; ) վերնագիր h1 (լայնությունը՝ 50%; տեքստի հավասարեցում՝ ձախ; ներդիր՝ վերևում՝ 0.5 մ; )

Եթե ​​Ձեզ անհրաժեշտ է սահմանել վերնագրի բարձրությունը, ապա դուք ստիպված կլինեք օգտագործել երկրորդ հնարքը կեղծ տարրերով և ավելացնել մեդիա հարցում տարբեր չափերի էկրանների համար.

@media էկրան և (առավելագույն լայնությունը՝ 820px) ( վերնագիր ( բարձրությունը՝ ավտոմատ; ) վերնագիր > div, վերնագիր >

Արդյունքը արձագանքող է և շարժական սարքերում այսպիսի տեսք ունի.

Օրինակը պարզության համար օգտագործում է 820px, կենդանի կայքում, իհարկե, արժեքը պետք է տարբեր լինի՝ պահանջներին համապատասխան։ Internet Explorer 8-ին աջակցելու համար «::»-ի փոխարեն օգտագործեք «:» կեղծ տարրերի համար:

Վերջնական CSS կոդը

@import url (http://fonts.googleapis.com/css?family=Lato:400,700 italic); * ( լիցք՝ 0; լուսանցք՝ 0; ) հիմնական (ֆոն՝ #1abc9c; տառատեսակ-ընտանիք՝ «Lato», sans-serif; տեքստի փոխակերպում՝ մեծատառ; տառերի միջև հեռավորություն՝ 1px;) վերնագիր (տեքստի հավասարեցում՝ արդարացնել ; բարձրություն՝ 8մ; լիցք՝ 2մ 5%, ֆոն՝ #2c3e50; գույն՝ #fff; ) վերնագիր::հետո (բովանդակություն՝ ""; ցուցադրում՝ ներգծային բլոկ; լայնություն՝ 100%; ) վերնագիր > div, վերնագիր > div:: առաջ, վերնագիր նավարկություն, վերնագիր > div h1 ( ցուցադրում. ներդիր-բլոկ; ուղղահայաց հավասարեցում: միջին; տեքստի հավասարեցում: ձախ; ) վերնագիր > div ( բարձրությունը՝ 100%; : ""; բարձրություն՝ 100%; ) վերնագիր > div h1 ( տառաչափը՝ 3em; տառատեսակի ոճը՝ շեղ; -երեխա ( padding-աջ՝ 0; ) @media էկրան և (առավելագույն լայնությունը՝ 720px) ( վերնագիր ( բարձրությունը՝ ավտոմատ; ) վերնագիր > div, վերնագիր > div h1, վերնագիր նավարկություն ( բարձրությունը՝ ավտոմատ; լայնությունը՝ ավտոմատ, ցուցադրում բլոկ; տեքստի հավասարեցում: կենտրոն; ))

Բարեւ բոլորին. Այսօր ստուգեցի վիճակագրությունը որոնման հարցումներ, որով մարդիկ գնում են բլոգ և պարզում, որ կան մի քանիսը, որոնք բոլորովին տեղին չեն։ Ոչ, ոչ թե բլոգ, այլ հոդվածներ:

Նրանցից մեկը ինչպես շտկել կայքի վերնագիրը? Ես անմիջապես որոշեցի շտկել իրավիճակը և հոդված գրել, քանի որ թեման արդիական է, և այս ոլորտում կան հարցեր։

Ընդհանուր առմամբ, էջը ոլորելու մի քանի եղանակ կա: Դուք կարող եք օգտագործել javascript, բայց ես այնքան էլ ուժեղ չեմ այս թեմայում և պարզապես սովորում եմ այն: Հետևաբար, առայժմ մենք կանենք css-ով։ Աստված օրհնի, շտկել կայքի վերնագիրը(և ոչ միայն գլխարկ, այլ ցանկացած այլ տարր), դուք կարող եք «փոքր արյուն» :)

Իրականում էջը ոլորելիս տարրը շտկելու մեթոդը շատ պարզ է, և դուք կզարմանաք, թե որքան հեշտ է լուծել այս խնդիրը։

Էջը ոլորելիս վերնագրի ամրագրում

Վերնագիրը շտկելու համար դուք պետք է ստեղծեք երկու բլոկ: Մեկ - որպեսզի կարողանանք կենտրոնացնել գլխի գլուխը: Ու երեխա ունի, որը կուղղվի։ Եկ սկսենք...

Ահա այսպիսի պարզ html կառուցվածք: Հիմա եկեք ոճեր ավելացնենք:

#headerMain ( լայնությունը:920px; բարձրությունը: 195px; լուսանցք:0px ավտոմատ; z-index:0; ) #header (լայնությունը:920px; բարձրությունը:195px; ֆոն: url(../img/bg-header.jpg) ոչ -կրկնել; դիրքը՝ ֆիքսված; z-ինդեքս՝ 9999;)

Այժմ վերնագիրը կֆիքսվի էկրանի վերևում և ոլորելիս չի շարժվի։

Այս հոդվածում մենք կանդրադառնանք, թե ինչպես կարելի է կայքի վերնագիր կազմել և դրա վրա տեղադրել կայքի վերնագիրը և նկարագրությունը:

Նախևառաջ անհրաժեշտ է պատկեր կայքի վերնագրի համար: Դա լավագույնս արվում է Photoshop-ում:

Իսկ նրանց համար, ովքեր չունեն այս խմբագրիչը, առաջարկում եմ ամենահեշտ տարբերակը, որը հասանելի է բոլոր Windows-ում լռելյայն՝ Paint-ը:

Պատկերի լայնությունը կդարձնենք 900px, կայքի լայնությունը, բարձրությունը՝ 200px։ Իհարկե, դուք կարող եք ունենալ ձեր սեփական չափսերը, քանի դեռ պատկերի լայնությունը համընկնում է կայքի լայնության հետ (փաթաթման պատյան), բարձրությունը կախված է ձեզանից:

Հենց որ նկարը պատրաստ լինի և տեղադրվի պատկերների թղթապանակում, մենք կվերցնենք նախորդ էջում ստեղծվածը և կանցնենք կայքի վերնագրի տեղադրմանը։

#header-ի ընտրիչում մենք հանում ենք դրան տրված բարձրությունը և սահմանում արված պատկերի լայնությունն ու բարձրությունը։

#վերնագիր(
լայնությունը՝ 900px - լայնությունը
բարձրությունը՝ 200px; - բարձրություն
ֆոնի գույնը՝ #25B33f; - ֆոն
լուսանցք-ներքև: 10px; - ներքևից նահանջ
}

Այնուհետև տեղադրեք պատկերն ինքնին:

#վերնագիր(
լայնությունը՝ 900px
բարձրությունը՝ 200px;
ֆոնի գույնը՝ #25B33f;
լուսանցք-ներքև: 10px;
background-image: url(images/i8.png) - պատկեր
}

Ֆոնի գույնի հատկությունը նշվում է այն դեպքում, երբ պատկերը հանկարծակի չցուցադրվի այցելուի որևէ դիտարկիչում:

Եթե ​​նկարը գտնվում է որոշակի օֆսեթով, և դուք պետք է այն շտկեք, ապա գույքը ավելացվում է այստեղ

Այժմ հերթը կայքի վերնագրի և նկարագրությանն է: Դա անելու համար մարմնի պիտակի մեջ մենք գրում ենք div բլոկ id="header" նույնացուցիչով, և այն պարունակում է երկու վերնագիր h1 և h3, որոնց մեջ տեղադրում ենք կայքի անվանումը և դրա նկարագրությունը:

Տեսնենք, թե ինչ ենք ստանում:

Հիմա եկեք տեսնենք վերնագիրը և նկարագրությունը: Մենք նրանց համար ստեղծում ենք երկու ընտրիչ և սահմանում ենք հետևյալ հատկությունները.

H3-ի համար լայնությունը սահմանեք 200 պիքսել, որպեսզի այն չձգվի ամբողջ պատկերի վրա: Նահանջը կարող է մանիպուլյացիայի ենթարկվել՝ կախված նրանից, թե վերնագրի որտեղ ավելի հարմար կլինի տեղադրել տեքստը:

Տեսնենք արդյունքը։

Իմ կարծիքով՝ շատ սիրուն։

Եկեք ամփոփենք այս էջի կոդը:

Կայքի վերնագրում պատկեր տեղադրելու ևս մեկ տարբերակ կա. Դուք կարող եք տեղադրել պատկերի հասցեն բլոկում

• Android - Ընդհանուր
• Անվտանգություն
• Այլ
• Խաղեր
• Համացանց
• Ստեղնաշարեր
• Մուլտիմեդիա
• Նավիգացիա
• Գրասենյակ
• Ծրագրեր
• Տարբեր
• Համակարգային

Վերջին գրառումները

Դասընկերների մեջ ջնջված կամ արգելափակված էջը վերադարձնելը

Ինչու՞ Vkontakte-ն երաժշտություն չի նվագում և ինչ անել դրա հետ:

Ինչպե՞ս նշել մարդուն Vkontakte-ում:

Բրայան Քարտեզների կենսագրական տվյալներ

VKontakte MP3 ռեժիմ Փոփոխություններ վերջին տարբերակում

Հանրաճանաչ

ՖԻՖԱ-ն վթարի է ենթարկվել մեկնարկի պահին

Փոխարկեք ժամերը րոպեների Microsoft Excel-ում

Գրաֆիկներ և գծապատկերներ Microsoft Excel-ում

Նորություններ

2022-10-21 03:04:00

Nine Store - ինչ է այս ծրագիրը Ներբեռնեք ինը խանութի հին տարբերակը

2021-11-30 17:27:20

Առավելությունները և հեռանկարները

2021-11-30 17:27:20

Գնացեք ձեր էջում դասընկերների մոտ. Մանրամասն տեղեկություններ

2021-11-25 03:14:50

Մասնագիտություն վեբ դիզայներ. Որքա՞ն են նրանք վաստակում և որտեղ սովորել այս մասնագիտությունը:

2021-11-25 03:14:50

Էլեկտրական ցնցում. հետևանքներ, անհրաժեշտ գործողություններ և ճիշտ միջոցներ Ինչպես էլեկտրականացնել ձեռքերը ցնցումներին