වගු නොමැතිව පිරිසැලසුම් සෑදීම සඳහා CSS ස්ථානගත කිරීම භාවිතා කරන්නේ කෙසේද

Tableless layouts නව නිර්මාණ දේශසීමා විවෘත වේ

පිරිසැලසුම සඳහා වගු භාවිතා නොකිරීමට බොහෝ හේතු තිබේ . CSS සමඟ CSS සැකසුම සෑදීමට අපහසු නිසා, නිතරම භාවිතා කරන ලෙස මිනිසුන් නිතරම හේතු වේ. CSS විධානාවලි ඉගෙනීමේ වක්රයක් ඇතුළත් වුවද, CSS සැලැස්මක් සිදු කරන්නේ කෙසේදැයි තේරුම් ගන්නා විට, එය ඔබට කොතරම් පහසු විය හැකිදැයි විමසනු ඇත. ඔබ ඉගෙන ගත් පසු, ඔබ විසින් වගු පිටපත් කිරීම සඳහා වේගවත් කිරීම සඳහා වන පොදුම හේතුව ලෙස ඔබ දෙවන පොදු සරලම හේතුව ලෙස අමතනු ඇත. ඔබ CSS ඉගෙන ගන්නා විට ඔබ ඉක්මණින් CSS ඉගෙන ගන්නා විට වේගවත් වේ. එය වේගවත් වේ. ඒ සමඟම.

CSS ස්ථානීකරණයේ බ්රවුසරය සහාය

CSS ස්ථානගත කිරීම සියළු නූතන බ්රව්සරවල හොඳින් අනුග්රහය දක්වයි. ඔබ Netscape 4 හෝ Internet Explorer 4 සඳහා වෙබ් අඩවියක් සාදා නොගන්නේ නම්, ඔබේ පාඨකයින් ඔබේ CSS-පිහිටුවන ලද වෙබ් පිටු බැලීමේදී ගැටලු ඇති නොවිය යුතුය.

පිටුවක් ගොඩනඟන ආකාරය ගැන සිතන ආකාරය

ඔබ විසින් වගු භාවිතා කරමින් වෙබ් අඩවියක් තැනූ විට, ඔබ ටැගල් ආකාරයේ සිතියමක් සිතා ගත යුතුය. වෙනත් වචනවලින් කියනවා නම්, ඔබ සෛල, පේළි හා තීරු අනුව සිතා බලයි. ඔබේ වෙබ් පිටු මෙම ප්රවේශය පිළිබිඹු කරයි. ඔබ CSS ස්ථානකරණ සැලසුමකට මාරු වන විට, අන්තර්ගතයන් අනුව ඔබගේ සිතුවිලි ආරම්භ වනු ඇත. මන්ද, අන්තර්ගතය ඔබට වෙනත් තැනක සිට සකස් කර ඇති පරිදි ඕනෑම තැනක තිබිය හැක.

විවිධ වෙබ් අඩවි විවිධ ව්යුහයන් ඇත. ඵලදායී පිටුවක් සාදා ගැනීම සඳහා ඔබ අන්තර්ගතය පැවරීමට පෙර කිසියම් පිටුවක ව්යූහය ඇගයීමට ලක් කරන්න. නිදසුනක් ලෙස එක්තරා අංශ පහක් ඇතුළත් විය හැකිය:

1. ශීර්ෂකය . බැනර් දැන්වීමක්, වෙබ් අඩවියේ නම, නාවික සම්බන්ධතා, ලිපියක් මාතෘකාවක් සහ වෙනත් දේවල් කීපයකි.
2. දකුණු තීරුව . මෙම සෙවුම් පෙට්ටිය, දැන්වීම්, වීඩියෝ පෙට්ටි සහ සාප්පු සහිත ස්ථාන සමඟ පිටුවෙහි දකුණු පැත්තේ.
3. අන්තර්ගතය . ලිපියේ පිටපතක්, බ්ලොග් පෝස්ට් හෝ සාප්පු කරත්තය - පිටුවේ මස් සහ අර්තාපල්.
4. පේළි දැන්වීම් . අන්තර්ගතය ඇතුළත දැන්වීම් වෙළඳ දැන්වීම්.
5. පාදකය . පහළ යාත්රා, කතෘ තොරතුරු, හිමිකම් තොරතුරු, පහළ බැනර් දැන්වීම් සහ අදාළ සබැඳි.

එම වගුවෙහි ඇති මූලද්රව්ය පහක් වෙනුවට අන්තර්ගතයේ විවිධ කොටස් අර්ථදැක්වීම සඳහා HTML5 කොටස් කිරීමේ අංගයන් භාවිතා කරන්න, ඉන්පසු අන්තර්ගතයේ අංගයන් පිටුවට ස්ථානගත කිරීම සඳහා CSS ස්ථානීකරණය කිරීම භාවිතා කරන්න.

ඔබගේ අන්තර්ගත අංශ හඳුනා ගැනීම

ඔබ ඔබේ වෙබ් අඩවියේ විවිධ අන්තර්ගතයන් අර්ථ දැක්වුවද, ඒවා ඔබේ HTML බවට ලිවිය යුතුයි. සාමාන්යයෙන් ඔබේ කොටස් ඕනෑම පිළිවෙළකට තැබිය හැකි නමුත්, ඔබගේ පිටුවෙහි වඩාත් වැදගත් කොටස් මුල් තැන තැබීම හොඳ අදහසකි. මෙම ප්රවිෂ්ටය සෙවුම් එන්ජිම ප්රශස්තිකරණයට සහය වනු ඇත.

ස්ථානගත කිරීම් ප්රදර්ශනය කිරීම සඳහා, තීරු තුනකින් යුත් පිටුවක් සැපයේ, නමුත් ශීර්ෂකය හෝ පාදය නොමැත. ඔබට අවශ්ය ඕනෑම ආකෘතියක් නිර්මාණය කිරීමට ස්ථානගත කිරීම භාවිතා කළ හැකිය.

තීරු තුනක් සඳහා, කොටස් තුනක් අර්ථ දක්වන්න: වම් තීරුව, දකුණු තීරුව සහ අන්තර්ගතය.

මෙම කොටස් අන්තර්ගතය සඳහා ARTICLE මූලද්රව්යය සහ තීරු දෙක සඳහා කොටස් කොටස් දෙකක් භාවිතා කරනු ඇත. සෑම දෙයක්ම හඳුනාගත හැකි බවක් ඇත. ඔබ හැඳුනුම් ගුණාංගය භාවිතා කරන විට, එක් එක් අනන්යතාව සඳහා අද්විතීය නමක් ලබා දිය යුතුය.

අන්තර්ගතය ස්ථානගත කිරීම

CSS භාවිතා කරමින්, ඔබේ ID'd අංග සඳහා පිහිටීම නිර්වචනය කරන්න. මෙවන් ආකාරයේ ඇමතුමක් තුල ඔබේ ස්ථානයේ තොරතුරු ගබඩා කරන්න:

#content {

}}

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

මෙම පිරිසැලසුම සඳහා තීරු දෙක ස්ථාවර විෂ්කම්භයට තැබිය යුතු අතර, ඒවායේ පිහිටුම නිරපේක්ෂ වශයෙන් පිහිටුවා ගත යුතුය, ඒවා HTML මගින් සොයාගත හැකි ස්ථාන වලින් ඒවාට බලපෑමක් නොවනු ඇත.

# වම්-තීරුව {
පිහිටීම: නිරපේක්ෂ
වමේ: 0;
පළල: 150px;
ආන්තික වමේ: 10px;
margin-top: 20px;
වර්ණය: # 000000;
පෑඩිං: 3px;
}}
# දකුණ තීරුව {
පිහිටීම: නිරපේක්ෂ
වමේ: 80%;
ඉහළ: 20px;
පළල: 140px;
padding-left: 10px;
z-index: 3;
වර්ණය: # 000000;
පෑඩිං: 3px;
}}

ඉන්පසුව අන්තර්ගතය සඳහා, පිටත තීරු දෙක එකිනෙකට නොගැලපෙන පරිදි, දකුණු පස සහ වම් පසෙහි සීමාව සකසන්න.

#content {
ඉහළ: 0px;
ආන්තික: 0px 25% 0 165px;
පෑඩිං: 3px;
වර්ණය: # 000000;
}}

HTML හි වගුවක් වෙනුවට CSS භාවිතා කිරීමෙන් ඔබේ පිටුව නිර්වචනය කිරීම සඳහා වඩා තාක්ෂණික නිපුණත්වයක් අවශ්ය වේ. එහෙත් ප්රතිලාභය වඩාත් නම්යශීලී සහ ප්රතිචාරාත්මක මෝස්තර වලින් ලබා ගත හැකි අතර, පසුව ඔබේ පිටුවට ව්යුහාත්මක වෙනස්කම් සිදුකිරීමට පහසු වේ.