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

වෙබ් පිටු සැකසීමේ වම් පැත්තට රූපයක් තැබීමට CSS භාවිතා කිරීම

වර්තමානයේ ඕනෑම වෙබ් පිටුවක් දෙස බලන්න. එම පිටු වලින් වැඩි කොටසක් සාදාගත හැකි පෙළ සහ පින්තූර සංයෝජනයක් වනු ඇත. පිටු සහ පෙළ සඳහා පෙළ හා පින්තූර එකතු කිරීම ඉතා පහසුය. ඡේදය, ලැයිස්තු සහ මාතෘකා වැනි සම්මත HTML ටැග් වලින් සංකේතවත් කරනු ලැබේ. රූප අඩංගු වන්නේ මූලද්රව්යයෙනි .

එම පාඨය සහ එම රූප සෑදීමේ හැකියාව එකිනෙකට හොඳින් කළ හැකි ය. ඔබේ පෙළ සහ පින්තූර වෙනත් එකකට එකක් දර්ශනය කිරීමට පමණක් නොව, මෙම බ්ලොක් මට්ටමේ මූලයන් පෙරනිමි ආකාරයට සැකසීමට සැලැස්විය යුතුය. නැත, ඔබට ඔබේ වෙබ් අඩවියේ දෘශ්ය නිර්මාණයේ අවසානයේ කුමක් වනු ඇත යන දෙය හා පෙළ හා පෙළ අතරට ගලා යන ආකාරය පිළිබඳව යම් පාලනයක් අවශ්ය වේ.

පිටුවක වම් පැත්තට සරිලන රූපයක් තිබීම එම පිටුවෙහි පාඨය ගලා එන අතර එහි මුද්රිත නිර්මාණ සඳහා ද පොදු වෙබ් අඩවි සඳහා පොදු සැලසුමකි. වෙබ් අඩවිවල දී, මෙම ප්රතිඵලය ලෙස රූපය පාවෙන ලෙස හැඳින්වේ . මෙම ආකාරයේ CSS දේපල "float" සඳහා ලබා ඇත. මෙම දේපල වම් අනුපූරක රූපය එහි දකුණු පැත්තට ගලා යන්නට පෙළ ඉඩ දෙයි. (හෝ හරි-අනුකලන රූපයක් එහි වම් පැත්තට වන්න.) මෙම දෘශ්ය ප්රයෝගය ලබා ගන්නේ කෙසේද යන්න දෙස බලමු.

HTML සමඟ ආරම්භ කරන්න

ඔබට කළ යුතු පළමු කරුණ නම්, වැඩ කිරීමට සමහර HTML ඇත. අපගේ උදාහරණය සඳහා, අපි පෙළපොතෙහි ඡේදයක් ලියන අතර, ඡේදයේ ආරම්භයේ (පෙළට පෙර, නමුත් විවෘත කිරීම

ට පසුව) පසුව පින්තූරය එකතු කරන්නෙමු. HTML සලකුණ මෙලෙස පෙනේ:

ඡේදයේ ඇති ඡේද මෙහි පවතී. මෙම උදාහරණයේදී, අප විසින් ප්රධාන ඡායාරූපය පිළිබිඹුවක් තිබේ, එබැවින් මෙම පිටපත ප්රධාන පුද්ගලයා සඳහා වන මෙම ලිපිය විය හැකිය.

පෙරනිමියෙන්, අපගේ වෙබ් පිටුව පෙළ පෙළට ඉහලින් රූපය දර්ශණය වනු ඇත. රූපය රූපයේ බ්ලොක් මට්ටමේ අංග HTML. මෙහි අර්ථය වන්නේ පෙරනිමිය ලෙස රූපයේ මූලද්රව්යය පෙර සහ පසු පේළිය කැඩී ඇති බවයි. මෙම පෙරනිමි පෙනුම අපි CSS වෙත යොමු කිරීමෙන් වෙනස් කරමු. කෙසේ වෙතත්, පළමුව, අපගේ ප්රතිරූපයේ අංගයට අපි පන්ති වටිනාකමක් එකතු කරමු. එම පන්තිය අපගේ CSS පසුව භාවිතා කරන "කොකු" ලෙස ක්රියා කරනු ඇත.

ඡේදයේ ඡේද මෙහි තිබේ. මෙම උදාහරණයේදී, අප විසින් ප්රධාන ඡායාරූපය පිළිබිඹුවක් තිබේ, එබැවින් මෙම පිටපත ප්රධාන පුද්ගලයා සඳහා වන මෙම ලිපිය විය හැකිය.

මෙම "වාම" මෙම පන්තිය කිසිවක් ම කිසිවක් නොකරයි! අපගේ අපේක්ෂිත ශෛලිය සාක්ෂාත් කර ගැනීම සඳහා, අප ඊළඟට CSS භාවිතා කළ යුතුය.

CSS විලාසිතා

අපගේ HTML වර්ගීකරණයේ "වමේ" අපගේ පන්ති ගුණාංගය ඇතුළුව දැන් අපට CSS වෙත හැරිය හැකිය. අපි එම රූපය පිහිනන අතර, එය වටා පොඩ්ඩක් එකතු කරන්නෙමු, එම රූපය වටා එසවීමෙන් පෙළෙන අතරම එය ඉතා සමීපව නොකෙරේ. මෙන්න ඔබ CSS විය හැකිය:

.left {float: left; padding: 0 20px 20px 0; }}

මෙම විලාසය එම වස්තුවට වම් පසින් ප්ලවායනය කර ඇති අතර කුඩා පින්තූරය (එක් CSS ක්රමලේඛයක් භාවිතා කරමින්) කුඩා රූපයක් එකතු කරයි.

ඔබ වෙබ් බ්රවුසරයේ මෙම වෙබ් පිටුව අඩංගු පිටුව සමාලෝචනය කළ විට, රූපය වම් පස පෙල ගැසෙන අතර, ඡේද අතර ඇති පරතරය සමඟ එහි ඡේදයේ දකුණු පස දැක්වෙනු ඇත. අපි පාවිච්චි කළ "වමේ" පන්ති වටිනාකම අත්තනෝමතිකයි. "වාමාංශික" යන වචනයෙන් කිසිවක් නොකරන නිසා අපි එය කිසිවක් නොකියා සිටියෙමු. මෙය ඔබ විසින් සොයන දෘශ්ය වෙනස්කම් නියම කරනු ලබන සැබෑ CSS ශෛලිය සමග ක්රියා කරන HTML වල පන්ති ගුණාංගයක් තිබිය යුතුය.

මෙම විලාසිතා අත් කර ගැනීමට විකල්ප මාර්ග

රූප ආකෘති පන්තියේ ගුණාංගයක් ලබා දෙමින් මෙම අංගය ප්රවාහනය කරන සාමාන්ය CSS ශෛලියක් භාවිතා කිරීම මෙම වම් පැත්තට සමාන ප්රතිරූපය පෙනුම ලබා ගත හැකි එක් ආකාරයකි. ඔබට රූපයේ වටිනාකමෙන් ඉවත් කළ හැකි අතර වඩා විශේෂිත තේරීම්කාරකය ලිවීමෙන් CSS සමඟ එය හැඩගස්වන්න. නිදසුනක් ලෙස, මෙම රූපය "ප්රධාන අන්තර්ගතය" පංති අගය සහිත කොට්ඨාසයක් තුළ නිදසුන් දෙස බලමු.