වෙබ් අඩවිය ඔබ වෙනුවෙන් තිරස් මෙනු කරන්න

තිරස් මෙනු අඩවිය ඕනෑම ඇති - එය එහි පෙනුම හා භාවිතාව අනෙක් අතට ආකර්ෂණය කර ගැනීම සඳහා හෝ, අමුත්තන් ඉවතට බිය වැද්දීමට සමග හැකි, ඉතා වැදගත් කොටසකි. එය "ඇටසැකිල්ලක්" නිර්මාණය කිරීමේ මූලික කුසලතා ප්රගුණ කිරීමට, HTML වලට කරන්න: ගේ චිරකාලීන තිරස් මෙනු නිර්මාණය කිරීමට කොහොමද කියලා අපි බලමු. ඔබ නිසැකවම සූදානම් මෙනුව සොයා ගත හැකි, නමුත් එය ඔබ දියුණු කරන ආකාරය ඉගෙන ගැනීමට සදයට. එය ලස්සන සෙල්ලමක් නෙමෙයි.

මෙනු ගන්න පුරුදු

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

HTML-කේතය මේ වගේ:

කවුද දන්නේ නෑ: සඳහා උල් ටැගය භාවිතා වෙඩි, එහි අංග li සමග පටන් ගනියි. Li ටැග් වූ උල් කිරීමට ඉල්ලා සිටින බව මෝස්තරවලට උරුම.

උල් - ලැයිස්තුව වාරණ අංගයක්, එය පළල දිගු කරනු ඇත. Li ද වාරණ වේ.

ඒ නිසා, එය index.html නිර්මාණය කරන්න. අපේ කේතය රැස් කරන්න. මේ මොහොතේ දී, ගවේශකයට තිරස් මෙනු වඩා සිරස් දක්වනු ඇත. වෙබ් අඩවිය සඳහා තිරස් මෙනු කිරීමට - නමුත් ඔබ ඉලක්කය හා අපි. මේ සඳහා අපි CSS අවශ්යයි.

CSS වේ කුමක්ද?

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

මෙනු සංවර්ධනය සඳහා Style Sheets සඳහා භාවිතා

මෙනු සඳහා CSS-කේතය:

1. # My_1menu {ලැයිස්තුව ආකාරයේ: කිසිවක්; පුරවන: 6; පළල: 800px; ආන්තිකය: මෝටර් රථ,}
2. # My_1menu li {පාවෙන: වමේ; අකුරු: ඇල අකුරු 18px Arial,}
3. # My_1menu ඇති {වර්ණ: # 756; සංදර්ශකය: වාරණ; උස: 55px; රේඛීය උස: 55px; පුරවන: 0px 15px 0px 15px; පසුබිම: #dfc; පෙළ-සැරසිලි: කිසිවක්;}
4. # My_1menu වූ: පියාසර {වර්ණ: #foa; පසුබිම: # 788;}

දැන් අපි එහි ප්රතිඵලයක් තිරස් CSS මෙනුව දෙස බලමු.

# My_1menu - එසේ id = my_1menu, ලැයිස්තුව රටාවකට UL- අංගයක් සඳහා ශෛලිය පැවරුම ඇත: කිසිවක් - මෙම විධානය නියමිත භාණ්ඩ විසින් ඉතිරි කළ ලකුණු ඉවත් කිරීමට.

පළල: 800px - අපගේ මෙනුව පළල පික්සල 800 වේ.

පුරවන: 0 - මෙම තුළ ඇති, පුරවන ඉවත් කරයි.

ආන්තිකය: මෝටර් රථ - අපගේ පිටුවට කේන්ද්රය තිරස් මෙනු vyravnivnie.

# My_1menu li - මෝස්තර li-අංග පැවරීම.

උස: 55px - මෙනුව උස.

# My_1menu වූ: මවුසය - මූලද්රව්යයේ මෝස්තර පැවරීම සහ එය මූසිකය ප්රේරණය වේ.

සෑම සංවර්ධක මෙතන එහි පරාමිතීන් නියම කල හැක, අපි විස්තරාත්මකව, සෑම රේඛාවක් විස්තර නැහැ. එම වෙබ් අඩවිය මෙනුවේ මෝස්තර භාවිතය සඳහා මෙම පදනම. ඔබ පින්තූර භාවිතා, එය වඩාත් නිමි හා ලස්සන පෙනුම ලබා දිය හැක. url එක (img1.png) නැවත-x: අංගයක් නමුත්, උදාහරණයක් ලෙස, පසුබිම සදනන. url එක (img2.png) නැවත-x සඳහා: පියාසර පසුබිම සිදුවීමට ඉඩ නොදිය යුතු.

ඔබගේ පරිකල්පනය, නිර්මාණාත්මක මනාප භාවිතා කරන්න. එවිට වෙබ් අඩවිය සරල මෙනුව නිර්මාණය කරන ආකාරය පිළිබඳ දැනුම මත පදනම්, ඔබ එයට ආවේණික හැඩයක් සහිත පිටු වර්ධනය විය හැක.