සිරස් CSS මෙනුව: එය ඔබම කරන්නේ

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

දැන් මූලික පියවර

සරල නිර්මාණය කිරීමට සිරස් මෙනුව CSS, ඔබ ඒ සඳහා පහත දැක්වෙන පියවර අනුගමනය අවශ්ය:

1. පළමුව, මෙනු වනු ඇත වන, සබැඳි (කේතය HTML භාවිතා) ලැයිස්තුවක් තීරණය කරන්න. ඔවුන් නමක් දෙන්න, උදාහරණයක් ලෙස, පහත සඳහන් පරිදි වේ:

1. මුල් පිටුව.
2. අපේ ඉතිහාසය.
3. මග පෙන්වන.
4. සේවා.
5. අප අමතන්න.

ඔබ CSS ද සහාය ඇතිව රිසි ලෙස 2. එවිට සබැඳි විශාලනය.

අපි ලියන්න HTML කේතය, my_Vmenu.html ගොනුව තබා එය බ්රවුසරයේ බලන්න ආකාරය බලන්න:

මේ අපේ මෙනුව පදනම (ඇටසැකිල්ලක්) වේ. # 1, # 2, ආදිය සමුද්දේශ විස්ථාපනය කල යුතුය. එය වෙබ් බ්රව්සරය තුළ දැක්වෙන අයුරු බලන්න. ඡායාරූපයේ ඔබ කැමති නැත. දැන් අපි සම්පූර්ණ සිරස් CSS මෙනු කිරීමට, ශෛලියේ අංග විස්තර කිරීමට පටන් ගත යුතුය.

විස්තරය මෝස්තර

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

සවිස්තර විස්තරයක් stylesheet භාවිතා

දැන් අපේ CSS සිරස් මෙනුව විස්තර සලකා බලන්න

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

උල් # my_Vmenu - සමස්ත ලැයිස්තුව සමස්ත ශෛලිය.

උල් # my_Vmenu li a - මෙම ටැගය li අතර ශෛලිය සබැඳි.

උල් # my_Vmenu li වූ: මවුසය - එක් සෙනඟ කෙරෙහි පමන අවස්ථාවක මෙනු අයිතම සලකා බැලීම යටතේ වර්ගය පිළිබඳ විස්තරයක්.

උල් # my_Vmenu li කාලයක් - පෙළ විස්තරය (ශීර්ෂය මෙනුව).

බව my_Vmenu.css my_Vmenu.html ගොනු කළ අතර එම බහලුම තුල ආරක්ෂා කළ යුතු බව මතක තබාගන්න. කෙසේ වෙතත්, ඔවුන් වෙනස් ෆෝල්ඩර තුළ පිහිටා තිබිය හැකි නමුත්, එය my_Vmenu.css කිරීමට my_Vmenu.html ගොනුව මාර්ගය ලියාපදිංචි කිරීම වැදගත් වේ. බොහෝ විට මෙම ගැටලුව සඳහා නවක සාමාජිකයන්ට ප්රයෝජනවත් විය නිසා, ප්රවේශම් වන්න.

ශෛලිය ඉතා html-ගොනුවේ හිස ටැග් අතර සම්බන්ධ කළ යුතුය. menu_1.png හා menu_2.png - මේ සාමාන්ය රාජ්ය හා පියාසර දී චිත්රයක් මෙනු අයිතමය සඳහා චිත්රය.

එහි නම, එය my_images, රූප සඳහා වෙනම ෆෝල්ඩරයේ රූප බේරා ගැනීමට නම් හොඳයි, ඒත් පසුව CSS කේතය සීරුමාරු කරන්න. මේ රූප පෙන්වා මෙවැනි ලියන්න, ඔවුන් මෙම නාමාවලියට ඇත: url එක (my_images / menu_1.png) සහ url එක (my_images / menu_2.png).

තැටියක CSS කේතය විස්තර කර ඇති ගුණ ඉතිරි දී, ඉතා පහසුවෙන් තේරුම් ගැනීමට. ඔවුන් අපේ මෙනුව පෙනුම අර්ථ දක්වන්න. එය සාමාන්ය රාජ්ය එම භාණ්ඩ සඳහා නිශ්චිතව දක්වා ඇති අයිතම, පළල සහ උස නිරීක්ෂණය කිරීමට පහසු වන අතර, ඔබ ඔවුන් කෙරෙහි මූසිකය පියාසර කරන විට. අකුරු ප්රමාණය 18px, පුරවන ස්ථානය නම් විවිධ පැති වලින් එබුම දක්වයි. ප්රදර්ශනය ඔබ පළල හා පුරවන ස්ථාපනය කිරීම සඳහා ප්රදර්ශනය ඒකකයක් පිහිටුවා ඉඩ ලබා දෙයි.

අපගේ සිරස් මෙනුව

ඔබට පහසුවෙන් නිර්මාණය කිරීමට දැක ගැනීමට හැකි වන පරිදි, සිරස් CSS මෙනු. දැනුම දත්ත පදනම මත ඔබට එය සුන්දර හා ඔබගේ වෙබ් අඩවිය නරඹන්නන් වෙත ආකර්ෂණීය කිරීමට හැකි වනු ඇත! ඔබේ වෙබ් අඩවිය පරිපූරණ කිරීම සඳහා ඔබගේ පරිකල්පනය භාවිතා කරන අතර, එවිට හැඩකාර මෙනුව.