Օգտագործելով CSS- ի նկարը, վեբ էջի ձախ կողմում պատկերի կարգավորելը
Նայեք գրեթե ցանկացած վեբ էջին, եւ կտեսնեք այդ էջերի մեծ մասը կազմող տեքստի եւ պատկերների համադրություն: Շատ հեշտ է տեքստի եւ պատկերների էջը ավելացնել : Տեքստը կոդավորված է, օգտագործելով ստանդարտ HTML տառերը, ինչպիսիք են պարբերությունները, ցուցակները եւ վերնագրերը, իսկ պատկերները ներառված են տարրը :
Այն տեքստը դարձնելու ունակությունը եւ այդ պատկերները միասին աշխատելն է, թե ինչ է սահմանում մեծ վեբ դիզայներներ: Դուք պարզապես չեք ցանկանում, որ ձեր տեքստը եւ պատկերները հայտնվեն մեկը մյուսի հետեւից, ինչն է այդ բլոկային մակարդակի տարրերը տեղադրելու համար: Ոչ, որոշակի վերահսկողություն եք ուզում, թե ինչպես է տեքստը եւ պատկերները հոսում միասին, ինչն ի վերջո կլինի ձեր կայքի վիզուալ դիզայնը:
Ունենալով պատկեր, որը էջի ձախ կողմում է, մինչդեռ այդ էջի տեքստը հոսում է դրա շուրջ , տպագիր դիզայնի ընդհանուր նախագծման եւ ինտերնետային էջերի համար: Վեբ տեսանկյունից այս ազդեցությունը հայտնի է որպես լողացող պատկեր : Այս ոճը հասնում է «float» - ի CSS հատկությանը : Այս հատկությունը թույլ է տալիս տեքստը հոսել ձախ կողմում պատկերված իր աջ կողմում: (Կամ աջ կողմի պատկերով նրա ձախ կողմում): Ստացենք, թե ինչպես հասնել այս տեսողական ազդեցությանը:
Սկսեք HTML- ով
Առաջին բանը, որ դուք պետք է անեք, HTML- ով աշխատեք: Մեր օրինակի համար մենք կգրենք տեքստի պարբերություն եւ դրեք պարբերության սկզբում պատկերը (նախքան տեքստը, սակայն
պիտակի բացումից հետո): Ահա թե ինչ է HTML նշումը կարծես:
Լռելյայն, մեր կայքէջը կտարածվի տեքստի վերեւում գտնվող պատկերով: Սա այն է, որ HTML- ի պատկերները բլոկ-մակարդակի տարրեր են: Սա նշանակում է, որ զննարկիչը ցուցադրում է գծի ընդմիջումները պատկերի տարրից առաջ եւ հետո `կանխադրված: Մենք կփոխենք այս կանխադրված տեսքը, դարձնելով CSS: Նախ, այնուամենայնիվ, մենք ավելացնում ենք դասի արժեք մեր պատկերային տարրին : Այդ դասը կգործի որպես «կեռ», որը մենք կօգտագործենք մեր CSS- ում:
Ուշադրություն դարձրեք, որ «ձախ» այս դասը ոչինչ չի անում ինքնուրույն: Մեր ցանկալի ոճը հասնելու համար մենք պետք է օգտագործենք CSS հաջորդը:
CSS ոճերը
Մեր HTML- ի տեղում, ներառյալ `« ձախ »մեր դասի հատկանիշով, այժմ կարող ենք դիմել CSS: Մենք կցանկանայինք, որ կանոնը ավելացնենք մեր ստեղնաշարի վրա , որը կփակի այդ պատկերը եւ կցուցադրի մի փոքրիկ լիցք, որպեսզի տեքստը, որը վերջնականապես կպցնելով պատկերի վրա, չափազանց սերտորեն չի դիմանում դրա դեմ: Այստեղ կարող եք գրել CSS- ը.
.left {float: ձախ; padding: 0 20px 20px 0; }Այս ոճը փչում է այդ պատկերը դեպի ձախ եւ ավելացնում է մի փոքրիկ լցոնում (օգտագործելով CSS- ի որոշակի ստեղներ) պատկերի աջ եւ ներքեւ:
Եթե դիտարկեք այս HTML- ը պարունակող էջը զննարկիչում, ապա պատկերն այժմ կկտրվի ձախ կողմում, եւ պարբերության տեքստը կհայտնվի իր իրավունքի հետ, երկուի միջեւ համապատասխան քանակությամբ: Նշենք, որ «ձախ» դասի արժեքը, որ մենք օգտագործում ենք, կամայական է: Մենք կարող էինք որեւէ բան անվանել, որովհետեւ «ձախ» տերմինը ինքնին ոչինչ չի անում: Սա պետք է ունենա դասի հատկանիշ HTML- ում, որն աշխատում է իրական CSS- ի ոճով, որը թելադրում է տեսողական փոփոխությունները, որոնք դուք փնտրում եք:
Այս ոճերի հասնելու այլընտրանքային ուղիներ
Այս մոտեցումը պատկերի տարրը դասի հատկանիշը տալուց հետո, օգտագործելով ընդհանուր CSS- ի ոճը, որը փչում է տարրը միայն մեկ ձեւով կարող եք իրականացնել այս «ձախ կողմը»: Դուք նաեւ կարող եք վերցնել դասի արժեքը պատկերի վրա եւ ոճով այն CSS- ով ավելի կոնկրետ ընտրող գրել: Օրինակ, եկեք նայենք մի օրինակ, որտեղ այդ պատկերը «գլխավոր պարունակության» դասի արժեք ունեցող բաժանման մեջ է:
Այս կերպարին ոգեշնչելու համար դուք կարող եք գրել այս CSS- ը:
.main-content img {float: ձախ; padding: 0 20px 20px 0; }Այս սցեարիայում մեր պատկերը կկապվի ձախ կողմում, այն տեքստը, որը լողում էր դրա շուրջ, ինչպես նախկինում, բայց մենք չպետք է լրացուցիչ դասի արժեք ավելացնենք մեր նշագծին: Դա մասշտաբով անելը կարող է օգնել ստեղծել ավելի փոքր HTML ֆայլ, որը հեշտ կլինի կառավարել եւ կարող է նաեւ օգնել բարելավել կատարողականը:
Վերջապես, նույնիսկ կարող եք ուղղել ոճերը անմիջապես ձեր HTML ձեւաչափով, ինչպես այսպես.
Այս մեթոդը կոչվում է « ներդիրային ոճեր »: Դա նպատակահարմար չէ, քանի որ այն հստակորեն համատեղում է տարրերի ոճը իր կառուցվածքային նշումով: Վեբ լավագույն փորձը թելադրում է, որ էջի ոճը եւ կառուցվածքը պետք է մնան առանձին: Սա հատկապես օգտակար է, երբ ձեր էջը պետք է փոխի իր դասավորությունը եւ փնտրեք տարբեր տեսակի չափերի եւ սարքերի հետ պատասխանող կայք: HTML- ով ներկառուցված էջի ոճը ունենալը շատ ավելի դժվար է դարձնում լրատվամիջոցների հարցումները, որոնք կկարողանան հարմարեցնել ձեր կայքի տեսքը, անհրաժեշտության դեպքում այն տարբեր էկրանների համար:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Վերափոխվել է Երեմի Գիրարդը 4/3/17 թ .: