06 දින 01
CSS සහ නොකියන්නන් සමඟ මුද්රණ සංචලනය නිර්මාණය කරන්නේ කෙසේද
වෙබ් පිටු වල සංචලනය ලැයිස්තුවේ ස්වරූපය, සහ ටැබ් තහඩුවක් යනු තිරස් ලැයිස්තුවකි. CSS සමඟ තිරස් පුවරු සෙවුම් නිර්මාණය කිරීම ඉතා පහසුය. නමුත් CSS 3 අපට වඩාත් හොඳ පෙනුමක් ලබා දෙන තවත් මෙවලම් කිහිපයක් අපට ලබා දෙයි.
මෙම නිබන්ධනය CSS ටැබ්ඩ් මෙනුව සෑදීමට අවශ්ය HTML සහ CSS හරහා ඔබව රැගෙන යනු ඇත. එය දිස්වන ආකාරය බැලීමට එම සබැඳිය ක්ලික් කරන්න.
මෙම ටැබ්ලේෂන් මෙනුවේ කිසිදු රූපයක් භාවිතා නොවේ , HTML සහ CSS 2 සහ CSS 3 පමණි. එය තවත් ටැබ් එකතු කිරීමට හෝ ඒවායේ පෙළ වෙනස් කිරීමට පහසුවෙන් සංස්කරණය කළ හැකිය.
බ්රවුසර් සහාය
සියලු ප්රධාන බ්රවුසර වල මෙම ටැබ් මෙනුව වැඩ කරනු ඇත. අන්තර්ජාල ගවේෂකය මගින් වටකුරු කොන පෙන්නුම් නොකරනු ඇත, නමුත් එසේ නොවුවහොත් එය ෆයර්ෆොක්ස්, සෆාරි, ඔපෙරා සහ ක්රෝම් වැනි ටැබ් පෙන්වනු ඇත.
06 සිට 06 දක්වා
ඔබේ මෙනු ලැයිස්තුව ලියන්න
සියලු නාවික උපකරණ සහ ටැබ් සැබැවින්ම අසමමිතික ලැයිස්තුවකි. එබැවින් ඔබ කිරීමට අවශ්ය පළමු දෙය වන්නේ ඔබේ පටිගත කිරීමේ සංචාලනය වෙත යාමට අවශ්ය තැනට සබැඳි නොලැරුණු ලැයිස්තුවක් ලිවීමයි.
මෙම නිබන්ධනය ඔබ ඔබේ පෙළ HTML සංස්කාරකයක් ලියන බව උපකල්පනය කර ඇති අතර ඔබේ වෙබ් පිටුවෙහි ඔබේ මෙනුව සඳහා HTML යන්න ස්ථානගත කිරීමට කොතැනදැයි ඔබ දන්නවා ඇත.
ඔබේ නොබැඳි ලැයිස්තුව පහත දැක්වේ:
- class = "ටැබ්ලටිස්">
- CSS 3
- id = "වත්මන්"> ටැබ්
- සදහා
- මෙනුස්
කේතය දෙකට කරුණු දෙයි කියා ඔබට පෙනෙනු ඇත: class = "tablist" සහ id = "current". පළමුව අවශ්ය වේ . ඔබ ඔබගේ නොබැඳුනු ලැයිස්තුවේ ටැබ්ට් පංතිය නොසිටින නම්, ටැබ් ක්රියාත්මක නොවේ. දෙවැන්න අත්යවශ්ය නොවේ. ඔබ එම පිටුවෙහි උද්දීපනය කළ යුතු කුමන කවරයේ ටැබයක් මත id = "current" යන්න. මම සාමාන්යයෙන් මා භාවිතා කරන පිටුව හුවා දැක්වීමට මෙය සාමාන්යයෙන් භාවිතා කරමි, නමුත් වඩාත් වැදගත්ම ටැබය ඉස්මතු කිරීමට එය භාවිතා කළ හැකිය. නැතහොත් එය සම්පූර්ණයෙන්ම ඉවත් කළ හැකිය.
06 දින 03
ඔබේ ස්ටයිල් පත්රය සකස් කරන්න
ඔබට බාහිර ශිලා පත්රය හෝ අභ්යන්තර ශෛල පත්රයක් භාවිතා කළ හැකිය. නියැදි මෙනු පිටුව ලේඛනයෙහි අභ්යන්තර ශෛලීය පත්රය භාවිතා කරයි.
පළමුවෙන්ම අප UL නිපදවන්නෙමු
අප පංති පුවරුව භාවිතා කරන්නේ මෙහි දීයි. UL ටැග් විලාසනය වෙනුවට, ඔබගේ නොනිමි ලැයිස්තු සියල්ලම විලාසිතාවක් ලෙස සකස් කරන ලද, ඔබ UL විලාසනය පමණක් සාදාගත යුතුය. සටහන: ඔබේ CSS හි පළමු ප්රවේශය විය යුත්තේ:
.tablist {}කල් ඉකුත්වීමට පෙර ඉමිති පටිය (}) පෙරාතුව, මම එය පසුව අමතක නොකරමි.
අපි තාවකාලික මෙනු ලැයිස්තුවක් සඳහා අසමමිතික ලැයිස්තුවක් භාවිතා කරන අතර, අප විසින් උණ්ඩ හෝ අංක රැුසිමට අවශ්ය නැත. එබැවින් ඔබ එකතු කළ යුතු පළමු විලාසය. ලැයිස්තුව-style: none; මෙය ලැයිස්තුවක් වන අතරම එය බ්රවුසරයට කියයි, පෙර-නිශ්චිත ශෛලීන් නොමැති ලැයිස්තුවක් (උණ්ඩ හෝ අංක වැනි).
එවිට, ඔබට ඔබගේ අවශ්යතාවය පිරිමැසීම සඳහා අවශ්ය ලැයිස්තුවට ඔබේ ලැයිස්තුවේ උස සැකසිය හැකිය. මම මගේ උස සඳහා 2em තෝරා ගත්තා, එය සම්මත සම්මත ෆොන්ටේ ප්රමාණය මෙන් දෙගුණයක් වන අතර, ටැබ් පෙළ ඉහළින් සහ පහළට වඩා අඩක් පමණ ලබා දෙයි. උස: 2em; නමුත් ඔබ කැමති ඕනෑම ප්රමාණයකට ඔබේ පළල සකස් කළ හැකිය. UL ටැග් වලින් ස්වයංක්රීයව 100% ක්ම ලබා ගත හැකි වනු ඇත. එබැවින් වත්මන් බහාලුමට වඩා එය කුඩා විය හැකි නම්, ඔබ ඉවත් කළ හැකිය.
අවසාන වශයෙන්, ඔබේ ප්රධාන ශෛලිය පත්රයට UL සහ OL ටැග් සඳහා පූර්ව නාලිකාවක් නොමැති නම්, ඔබට ඒවා තැබීමට අවශ්ය වනු ඇත. මෙය ඔබගේ UL හි මායිම්, ආන්තික සහ වැසුම් නිවා දැමිය යුතුය. වැටීම: 0; ආන්තික: 0; දේශසීමා: කිසිවක් නැත; ඔබ දැනටමත් UL ටැගය නැවත සකස් කර ඇත්නම්, ඔබේ සැලසුම සමඟ ගැලපෙන යමක් සඳහා ඔබට ආන්තිකයන්, වැහි වීම් හෝ සීමාව වෙනස් කළ හැකිය.
ඔබගේ අවසාන .tablist පන්තිය මෙබඳු ආකාරයක් විය යුතුය:
.tablist {list-style: none; උස: 2em; වැටීම: 0; ආන්තික: 0; දේශසීමා: කිසිවක් නැත; }}06 දින 04
LI ලැයිස්තු අයිතම සංස්කරණය කිරීම
ඔබගේ නොබැඳි ලැයිස්තුවේ විලාසිතාවක් ඇති වූ පසු, ඔබට එය ඇතුලත LI ටැග් විලාසනය කිරීමට අවශ්ය වේ. එසේ නොමැතිනම්, ඔවුන් සම්මත පුවරුවක ලෙස ක්රියා කරන අතර ඊළඟ රේඛාව වෙත සෑම පියවරක්ම නිවැරදිව තබාගැනීමෙන් තොරව.
පළමුව ඔබේ ස්ලයිඩයේ දේපල සකස් කරන්න:
.tablist li {}එවිට ඔබට තිරස් තලය මත තැබීමට අවශ්ය වන පරිදි ඔබේ ටැබ් එක පාවීමට අවශ්යයි. float: වම්;
ටැබ් අතර යම් ආන්තිකයක් එක් කිරීමට අමතක නොකරන්න, ඒ නිසා ඔවුන් එකට එකතුවී නැත. මායිම්-දකුණ: 0.13em;
ඔබගේ ලී මෝස්තර මෙවැන්නකි:
.tablist li {float: වම්; මායිම්-දකුණ: 0.13em; }}06 සිට 05 දක්වා
ටැබ් CSS 3 ටැබ් මෙන් දිස්වෙයි
මෙම ශෛලිය තුල විශාල බර ඉසිලීම සඳහා, මම නොබැඳුනු ලැයිස්තුව තුළ ඇති සම්බන්ධතා ඉලක්ක කරමි. වෙබ් බ්රවුසරය වෙනත් ටැගයන් වලට වඩා සබැඳි වෙබ් අඩවි මත වැඩි වැඩියෙන් කරන බව හඳුනාගෙන ඇති අතර, එබැවින් ඒවා ඇඹරුම් ටැගය වෙත ඈඳා ඇත්නම්, ඒවා ඇලුම් වැනි රාජ්යයන් වලට අනුකූලව කටයුතු කිරීමට පහසුය. ඒ නිසා පළමුව ඔබේ ස්තිර ගුණාංග ලියන්න:
.tablist li a {}. ටබ්ලිව්ස්: a hover {}මෙම ටැබ් එක යෙදුමක ටැබ් ලෙස ක්රියා කළ යුතු බැවින්, ටැබ් එකේ මුළු ප්රදේශයම ක්ලික් කළ හැකි පාඨයක් පමණක් විය හැක. මෙය සිදු කිරීම සඳහා, ඔබ එය සාමාන්යයෙන් " අවෘත " තත්වයෙන් බ්ලොක් අංගයක් බවට පරිවර්තනය කළ යුතුය. පදර්ශනය: බ්ෙලොක්; (ඔබ වෙනස ගැන වැඩි දැන ගැනීමට උනන්දු නම්, Block-Level vs. Inline Elements කියවන්න .)
එවිට, ඔබේ ටැබ් එකිනෙක එකිනෙකා සමමිතික වීමට බල කිරීම සඳහා පහසු ක්රමයකි. නමුත් වම් පස සවි කර ගැනීම සඳහා දකුණට සහ වම පැකැට්ටුව සෑදීමට තවමත් උචිතය. මම ඉහළ සහ පහළට 0 සිට දකුණට සහ 1 ඊයම් දක්වා පිහිටුවීම සඳහා පුරාවිද්යා ශෝධන වත්කම භාවිතා කළෙමි. පුරප්පාඩු: 0 1em;
මෙම සබැඳිය ඉවත් කිරීමටද මම තෝරා ගත්තා, එමඟින් ටැබ් වැනි අඩු සම්බන්ධතා දක්නට ලැබෙනු ඇත. නමුත් ඔබේ සබයට ව්යාකූල විය හැකි නම්, මෙම රේඛාව අතහැර දමන්න. සබැඳි සැරසිලි: none;
ටැබ් එක වටේ තුනී කොටුවක් තැබීමෙන් එය ටැබ් මෙන් පෙනේ. මායිම් හතරේ සීමාව වටා මායිම සවි කිරීම සඳහා මායිම්වල ශේෂ පත්රයේ මා භාවිතා කළෙමි. ඉන් පසුව පතුලේ සිට එය ඉවත් කිරීම සඳහා දේශ සීමා-පහළ දේපල භාවිතා කරන ලදී. මායිම්-පහළ: 0;
ඉන්පසුව මම පටිතිවල වර්ණය, පැහැය සහ පසුබිම් පාටට යම් වෙනස්කම් සිදු කළා. ඔබේ වෙබ් අඩවියට ගැලපෙන මෝස්තර වලට මේවා සකස් කරන්න. අකුරු: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; වර්ණය: # 000; පසුබිම් වර්ණය: #ccc;
ඉහත සඳහන් සියළුම විලාසයන් තෝරන්න .Tablist li a, සාමාන්යයෙන් ඇන්කර් ටැග් වල ඒවාට බලපාන පරිදි එම රීතියයි. එවිට ටැබ් ක්ලික් කිරීම් වඩා ක්ලික් කළ හැකි පරිදි, ඔබ විසින් රාජ්ය පාලනයක් කිහිපයක් එකතු කල යුතුය .ස්ථාපනය li a: hover.
ඔබට මූසිකය මවුසය වන විට ටැබ් පොප් සෑදීම සඳහා පෙළ සහ පසුබිමේ වර්ණය වෙනස් කිරීමට මා කැමතිය. පසුබිම: # 3cf; වර්ණය: #fff;
මෙම සබැඳිය නොසැලකිලිමත් වීමට අවශ්ය බව බ්රවුසරයට තවත් සිහිගැන්වීමක් ඇතුලත් කර ඇත. පාඨමය අලංකාරය: කිසිවක් නැත; තවත් පොදු ක්රමයක් වන්නේ ඔබ ටැබ් එක මත මූසිකය මත ක්ලික් කිරීමෙන් පසු නැවත අවධාරණය කිරීමයි. ඔබට එය කිරීමට අවශ්ය නම්, එය පෙළ-අලංකාරයට වෙනස් කරන්න: යටි ඉරි;
නමුත් CSS 3 කොහේද?
ඔබ අවධානය යොමු කර ඇත්නම්, ඔබ විලාසිතා පත්රයේ භාවිතා නොකළ CSS 3 මෝස්තර නොමැති බව ඔබ බොහෝ විට දැක ඇති. Internet Explorer ඇතුළුව, ඕනෑම නවීන බ්රවුසරයක් තුළ වැඩ කිරීමේ වාසියක් ඇත. නමුත් ටැබ් වර්ග හතරක් වැනි කොටු වඩා වැඩිය. CSS 3 ආකාරයේ ඇමතුම් මායිම්-අරය (සහ එය ආශ්රිත බ්රවුසර-නිශ්චිත ඇමතුම්) එකතු කිරීම මඟින්, ඔබට මැලිලා ෆෝල්ඩරය මත ටැබ් වැනි දෑ බැලීමට වටකුරු කළ හැකිය.
.tablist li නීතියට එකතු කළ යුතු විලාසය වනුයේ: -webkit-border-top-right-radius: 0.50em; -webkit-දේශසීමා-ඉහළ-වම්-අරය: 0.50em; -moz-දේශසීමා-අරය-විශිෂ්ටයි: 0.50em; -මොස්-මායිම්-රේඩියුස්-සවුස්: 0.50em; මායිම්-ඉහළ-දකුණ-අරය: 0.50em; දේශසීමා-ඉහළ-වම්-අරය: 0.50em;
මම ලියූ අවසාන ශෛලිය නීති මේවා:
.tablist li a {display: block; පුරප්පාඩු: 0 1em; පාඨමය අලංකාරය: කිසිවක් නැත; දේශ සීමාව: 0.06 ඝන # 000; මායිම්-පහළ: 0; අකුරු: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; වර්ණය: # 000; පසුබිම් වර්ණය: #ccc; / * CSS 3 මූලද්රව්ය * / වෙබ් කිට්-මායිම්-ඉහළ-දකුණු-අරය: 0.50em; -webkit-දේශසීමා-ඉහළ-වම්-අරය: 0.50em; -moz-දේශසීමා-අරය-විශිෂ්ටයි: 0.50em; -මොස්-මායිම්-රේඩියුස්-සවුස්: 0.50em; මායිම්-ඉහළ-දකුණ-අරය: 0.50em; දේශසීමා-ඉහළ-වම්-අරය: 0.50em; } .ස්ථාපිත li a: hover {පසුබිම: # 3cf; වර්ණය: #fff; පාඨමය අලංකාරය: කිසිවක් නැත; }}මෙම විලාසිතා වලින් ඔබට සියලු ප්රධාන බ්රව්සර් වල ක්රියා කරන මුද්රණ කවුළුවක් සහ CSS 3 අනුකූල බ්රව්සර් වල ලස්සන මුද්රිත පටි සේ පෙනේ. මීලඟ පිටුවේ තවත් අමතර තේරීමක් ඔබට ලබා ගත හැකිය.
06 සිට 06 දක්වා
වත්මන් ටැබයට අවධාරණය කරන්න
මා විසින් නිර්මාණය කරන ලද HTML තුල UL වල ලැයිස්තුවක් සහිත ලැයිස්තුවක් ඇත. මෙය එක් LI එකක් වෙනත් ආකාරයකින් ලබා දීමට ඉඩ සලසයි. වඩාත් පොදු තත්වය වන්නේ වත්මන් ටැබය තුළ යම් ආකාරයකින් කැපී පෙනෙන ලෙස කටයුතු කිරීමයි. ඔබ සිතන තවත් ක්රමයක් නම් සජීවී නොවූ ටැබ ට්රලස් කිරීමට ඔබට අවශ්ය ය. ඉන්පසු වෙනස් පිටු මත ඇති අංකය වෙනස් වේ.
# ටැගය A ටැගය මෙන්ම #current A: hover sta යන දෙකම දෙකම වෙනස් වේ. එම මූලද්රව්යයේ වර්ණය, පසුබිම් වර්ණය, උෂ්ණත්වය, පළල සහ පැල්ලම් පවා වෙනස් කළ හැකිය. ඔබේ නිර්මාණයේ යම් වෙනස්කම් ඇති කර ගන්න.
.tablist li # වත්මන් {පසුබිමේ වර්ණය: # 777; වර්ණය: #fff; }. tablist li # current a: hover {පසුබිම: # 39C; }}ඔයා ඉවරයි! ඔබ විසින් ඔබේ වෙබ් අඩවියේ ටැබ්ලටඩ් මෙනුවක් නිර්මාණය කර ඇත.