වෙබ් පිටුවක සමමුහුර්ත කිරීම සහ පාවෙන මූලද්රව්ය ලබා ගන්නේ කෙසේද

වෙබ් පිටුවක භාණ්ඩ ස්ථානගත කිරීම අත්යාවශ්ය වේ. ආකෘතියට බලපෑම් කිරීමට වෙනත් මාර්ග තිබේ නම්, අප විසින් නිර්දේශ නොකරන ලද වගු භාවිතා කිරීම වැනි, හොඳම CSS භාවිතා කිරීමයි .

පහත දැක්වෙන රූප, පින්තූර, ඡේද, සහ තවත් බොහෝ දේ සරල කිරීම සඳහා සරල CSS ශෛලියක් භාවිතා කරන ආකාරය දෙස අපි බලමු.

සටහන: මෙම ක්රමයන් බාහිර ශිලා පත්රයෙහිද භාවිතා කළ හැකි නමුත් ඒවා තනි තනිව අදාළ වන අතර එමගින් රැඳී සිටීමට අවශ්ය වනු ඇත. පහත දැක්වෙන දේ වැනි සබැඳි හැඩය භාවිතා කිරීම වඩාත් සුදුසුය.

පෙළපොත් පෙළගස්වන්න

ඡේදයේ ටැගය ඔබේ වෙබ් පිටුව සකස් කිරීම ආරම්භ කිරීමට ප්රථම ස්ථානයයි. එය විවෘත කිරීම සහ වසා දැමීමේ ටැග් වලින් දිස්වෙයි:

පිටුවක වම්පස ඇති අකුරු පෙළ පෙළ වම්පස පැත්තට යන්න, නමුත් ඔබේ ඡේදයේ දකුණ සහ මධ්යස්ථයද සමතලා කර ගත හැකිය.

Float දේපල භාවිතා කිරීම මඟින් ඔබට පාර්ශවයේ මූලද්රව්යයේ දකුණු හෝ වම් පැත්ත තෝරාගත හැක. එම මාපකයේ මූලද්රව්යයේ අනෙකුත් මූලද්රව්ය පාවෙන මූලද්රව්යය වටා ගමන් කරනු ඇත.

ඡේදයක් සමග හොඳ බලපෑමක් ලබා ගැනීම සඳහා, කන්ටේනර් (මාපිය) මූලද්රව්යයට වඩා කුඩා වන ඡේදයේ පළලක් පිහිටුවීම වඩාත් සුදුසුය.

පෙළ ඇතුළත පෙළගස්වන්න

ඡේදය සඳහා වඩාත් ආකර්ෂණීය පෙලගැස්වීම වන්නේ "යුක්ති සහගත" යන්නයි. එමඟින් විචලනය වන පාඨය දකුණු හා වම් පස දෙපසට සරිලන පරිදි පෙළගස්වනු ලැබේ.

ඡේදයක් තුල ඇති පදය යුක්ති සහගත කිරීම සඳහා, ඔබට පෙළ-ගැලපුම් දේපල භාවිතා කරනු ඇත.

ඔබ විසින් පෙළ-ඇලයිට් දේපලක් භාවිතා කරමින් දකුණු පැත්ත හෝ වමෙන් (පෙරනිමිය) වෙත ඡේදයක් ඇතුළත සියලු පෙළ පෙළට පෙළ ගැස්විය හැකිය.

පෙළ-align දේපල මූලද්රව්යයේ පෙළ පෙළට පෙළගැස්විය හැක. තාක්ෂණික වශයෙන්, ඡේදය හෝ වෙනත් මූලද්රව්යය තුළ අන්තර්ගත වන පින්තූරු පෙළ සමතලා කිරීමට අවශ්ය නොවේ. නමුත් බොහෝ බ්රවුසර මෙම දේපළ සඳහා පේළි ලෙස පේළි ලෙස සලකනු ලැබේ.

අනුරූපණය කිරීම

පින්තූර ටැගය මත පාවෙන දේපල භාවිතා කිරීම ඔබට පිටුවෙහි ස්ථානගත කිරීම අර්ථ දැක්වීමට සහ පෙළ වටා පෙළ වටේ එනු ඇත.

ඉහත ඡේදවල මෙන්ම, පින්තූරයේ ඇති ෆ්ලේට් ස්ලිටි දේපල ඔබේ පිටුවෙහි රූපය ස්ථානගත කරන අතර එම පින්තූරය වටා පෙළ සහ අනෙකුත් අංග ප්රවාහනය කරන ආකාරය බ්රවුසරයට කියයි.

ඉහත රූපයේ අනුරුව අනුගමනය කළ රූපයේ තිරය තිරයේ වම් පස දැක්වෙන බැවින් රූපය වටා දකුණට ප්රවාහය වෙයි.

පාඨය වටා පරිවාරණය කිරීම නතර කිරීමට අවශ්ය නම්, මම පැහැදිලි දේපලක් භාවිතා කරමි:






ඡේදයන් වඩා වැඩිය

කෙසේ වෙතත්, ඔබට ඡේදයක් හෝ පින්තූරයක් පමණක් සීමා කිරීමට අවශ්ය නම් කුමක් කළ හැකිද? ඔබට සෑම ඡේදයකම ශෛලියක් දේපලක් තැබිය හැකිය, නමුත් එය වඩාත් ඵලදායී ලෙස භාවිතා කළ හැකි ටැගයක් ඇත:

සරල ලෙස ටැග් සහ පින්තූර ( HTML ටැග් ඇතුලුව) ටැග් හා විලාසය සමග (float හෝ text-align) සහ එම අංශයෙහි ඇති සියලු දේ ඔබට ගැලපෙන ආකාරයට අනුකූල වේ.

කොට්ඨාශය තුළ ඡේද හෝ රූප වලට එකතු කරන ලද අනුපිළිවෙල, ටැගයට වඩා ඉහළින් ඇති බව මතක තබා ගන්න.