|
Untitled 4
| | | | عدد المساهمات : 947 | تاريخ التسجيل : 06/11/2013 |
|
| كود اضافة قائمة روابط على شكل شجرة
كُتب : [ الأربعاء أغسطس 26, 2015 2:52 am ] |
---|
أسم العضو : الرسام | |
يسعدني ان اقدم لكم كود روابط على شكل قائمة شجرة لمعاينة الشكل
واليكم الام الكود
- الكود:
-
<style type='text/css'> .related-cross { width: 100%; overflow: hidden; width: 300px; padding: 0 0 100px; margin: 40px 0 0; background: url("http://im49.gulfup.com/0en6jl.png") 0 100% no-repeat; } .related-cross ul { width: 100%; overflow: hidden; margin: 0; padding: 10px 0 0; background: url("http://im77.gulfup.com/ZQnZ9J.png") -646px 0 repeat-y; } .related-cross li { width: 146px; overflow: hidden; margin: 0 auto; padding: 5px 0; list-style-type: none; } .related-cross a { padding: 5px 10px 4px; background: #3f8cd9; color: #fff; background: #999; font-size: 0.75em; text-transform: uppercase; } .related-cross a:hover { background-color: #84af00 !important; color: #fff !important; text-decoration: none; } .related-cross .related-cross-center { clear: both; width: 200px; text-align: center; background: url("http://im77.gulfup.com/L7vre8.png") 50% -11px no-repeat; } .related-cross .related-cross-center a { padding-right: 15px; background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat; } .related-cross .related-cross-left { clear: left; float: left; margin: 12px 0 0; text-align: right; display: inline; } .related-cross .related-cross-left a { padding-left: 15px; background: url("http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png") 0 50% no-repeat; } .related-cross .related-cross-right { clear: right; float: right; text-align: left; margin: 0 1px 12px 0; display: inline; } .related-cross .related-cross-right a { padding-right: 15px; background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat; } .related-cross .tec-xataka-g, .related-cross .tec-genbetasocialmedia-g, .related-cross .tec-xatakahome-g, .related-cross .tec-nacionred-g, .related-cross .mot-motorpasion-g, .related-cross .mot-motorpasionfuturo-g, .related-cross .eco-elblogsalmon-g, .related-cross .eco-pymesyautonomos-g, .related-cross .oci-blogdecine-g, .related-cross .oci-diariodelviajero-g, .related-cross .oci-fueradelimites-g, .related-cross .est-trendencias-g, .related-cross .est-trendenciasbelleza-g, .related-cross .est-trendenciashombre-g, .related-cross .est-compradiccion-g, .related-cross .est-trendenciasshopping-g, .related-cross .est-directoalpaladar-g, .related-cross .est-poprosa-g, .related-cross .est-trendenciaslifestyle-g { clear: both; width: 200px; text-align: center; background: url("http://im56.gulfup.com/TjT79B.png") 50% -11px no-repeat; } .related-cross .tec-xataka-g a, .related-cross .tec-genbetasocialmedia-g a, .related-cross .tec-xatakahome-g a, .related-cross .tec-nacionred-g a, .related-cross .mot-motorpasion-g a, .related-cross .mot-motorpasionfuturo-g a, .related-cross .eco-elblogsalmon-g a, .related-cross .eco-pymesyautonomos-g a, .related-cross .oci-blogdecine-g a, .related-cross .oci-diariodelviajero-g a, .related-cross .oci-fueradelimites-g a, .related-cross .est-trendencias-g a, .related-cross .est-trendenciasbelleza-g a, .related-cross .est-trendenciashombre-g a, .related-cross .est-compradiccion-g a, .related-cross .est-trendenciasshopping-g a, .related-cross .est-directoalpaladar-g a, .related-cross .est-poprosa-g a, .related-cross .est-trendenciaslifestyle-g a { padding-right: 15px; background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat; } .related-cross .tec-xatakaon-g, .related-cross .tec-xatakafoto-g, .related-cross .tec-genbetadev-g, .related-cross .tec-applesfera-g, .related-cross .tec-xatakawindows-g, .related-cross .mot-motorpasionf1-g, .related-cross .eco-ahorrodiario-g, .related-cross .oci-vayatele-g, .related-cross .oci-zonafandom-g, .related-cross .oci-notasdefutbol-g, .related-cross .est-bebesymas-g, .related-cross .est-vitonica-g, .related-cross .est-ambienteg-g { clear: left; float: left; margin: 12px 0 0; text-align: right; display: inline; } .related-cross .tec-xatakaon-g a, .related-cross .tec-xatakafoto-g a, .related-cross .tec-genbetadev-g a, .related-cross .tec-applesfera-g a, .related-cross .tec-xatakawindows-g a, .related-cross .mot-motorpasionf1-g a, .related-cross .eco-ahorrodiario-g a, .related-cross .oci-vayatele-g a, .related-cross .oci-zonafandom-g a, .related-cross .oci-notasdefutbol-g a, .related-cross .est-bebesymas-g a, .related-cross .est-vitonica-g a, .related-cross .est-ambienteg-g a { padding-left: 15px; background: url("http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png") 0 50% no-repeat; } .related-cross .tec-xatakamovil-g, .related-cross .tec-xatakandroid-g, .related-cross .tec-genbeta-g, .related-cross .tec-vidaextra-g, .related-cross .tec-xatakaciencia-g, .related-cross .mot-motorpasionmoto-g, .related-cross .eco-tecnologiapyme-g, .related-cross .oci-poprosa-g, .related-cross .oci-hipersonica-g, .related-cross .oci-papelenblanco-g, .related-cross .oci-fandemia-g, .related-cross .est-decoesfera-g, .related-cross .est-pequesymas-g, .related-cross .est-embelezzia-g { clear: right; float: right; text-align: left; margin: 0 1px 12px 0; display: inline; } .related-cross .tec-xatakamovil-g a, .related-cross .tec-xatakandroid-g a, .related-cross .tec-genbeta-g a, .related-cross .tec-vidaextra-g a, .related-cross .tec-xatakaciencia-g a, .related-cross .mot-motorpasionmoto-g a, .related-cross .eco-tecnologiapyme-g a, .related-cross .oci-poprosa-g a, .related-cross .oci-hipersonica-g a, .related-cross .oci-papelenblanco-g a, .related-cross .oci-fandemia-g a, .related-cross .est-decoesfera-g a, .related-cross .est-pequesymas-g a, .related-cross .est-embelezzia-g a { padding-right: 15px; background: url("http://4.bp.blogspot.com/-9HPMgVDI5oQ/VPn88CM6N3I/AAAAAAAAd_4/T73cdYV2O8o/s1600/arrow-mini-right.png") 100% 50% no-repeat; } .related-cross .tec-xataka-g a { background-color: #6ca427; } .related-cross .tec-xatakamovil-g a { background-color: #437f27; } .related-cross .tec-xatakafoto-g a { background-color: #333333; } .related-cross .tec-xatakaon-g a { background-color: #6d8c3a; } .related-cross .tec-xatakandroid-g a { background-color: #7d9f13; } .related-cross .tec-xatakahome-g a { background-color: #2f5083; } .related-cross .tec-xatakawindows-g a { background-color: #0f6d39; } .related-cross .tec-xatakaciencia-g a { background-color: #53a7a7; } .related-cross .tec-vidaextra-g a { background-color: #1680c6; } .related-cross .tec-applesfera-g a { background-color: #38278a; } .related-cross .tec-genbeta-g a { background-color: #004c98; } .related-cross .tec-genbetadev-g a { background-color: #94c6eb; color: #333; } .related-cross .tec-genbetasocialmedia-g a { background-color: #658eae; } .related-cross .tec-nacionred-g a { background-color: #fd932f; } .related-cross .est-trendencias-g a { background-color: #990033; } .related-cross .est-trendenciasbelleza-g a { background-color: #927897; } .related-cross .est-trendenciashombre-g a { background-color: #184272; } .related-cross .est-directoalpaladar-g a { background-color: #bf561f; } .related-cross .est-bebesymas-g a { background-color: #896399; } .related-cross .est-pequesymas-g a { background-color: #b3df41; } .related-cross .est-vitonica-g a { background-color: #628f1a; } .related-cross .est-decoesfera-g a { background-color: #2eafda; } .related-cross .est-compradiccion-g a, .related-cross .est-trendenciasshopping-g a { background-color: #aa022b; } .related-cross .est-embelezzia-g a { background-color: #164dc5; } .related-cross .est-ambienteg-g a { background-color: #c96eab; } .related-cross .est-poprosa-g a { background-color: #df69b0; } .related-cross .est-trendenciaslifestyle-g a { background-color: #819f77; } .related-cross .oci-fueradelimites-g a { background-color: #122d02; } .related-cross .oci-vayatele-g a { background-color: #fa5c01; } .related-cross .oci-diariodelviajero-g a { background-color: #f8f3ac; color: #333; } .related-cross .oci-blogdecine-g a { background-color: #004f00; } .related-cross .oci-notasdefutbol-g a { background-color: #66b618; } .related-cross .oci-hipersonica-g a { background-color: #111111; } .related-cross .oci-papelenblanco-g a { background-color: #ab9c87; } .related-cross .oci-poprosa-g a { background-color: #df69b0; } .related-cross .eco-elblogsalmon-g a { background-color: #fdd1a2; color: #333; } .related-cross .eco-pymesyautonomos-g a { background-color: #165b8d; } .related-cross .eco-tecnologiapyme-g a { background-color: #84b7da; } .related-cross .eco-ahorrodiario-g a { background-color: #1c5baa; } .related-cross .mot-motorpasion-g a { background-color: #980000; } .related-cross .mot-motorpasionf1-g a { background-color: #491112; } .related-cross .mot-motorpasionmoto-g a { background-color: #fd7800; } .related-cross .mot-motorpasionfuturo-g a { background-color: #048fbd; } .related-cross .tec-vidaextra-g-mx { clear: left; display: inline; float: left; margin: 12px 0 0; text-align: right; } .related-cross .tec-vidaextra-g-mx a { background: url('http://1.bp.blogspot.com/-D-nwt3pF2j4/VPn7mg4U0aI/AAAAAAAAd_w/TO6aFm-i_y8/s1600/arrow-mini-left.png') no-repeat scroll 0 50% rgba(0, 0, 0, 0); padding-left: 15px; background-color: #1680C6; }</style> <div class="related-cross"> <ul> <li class="tec-xataka-g"><a href="#">رابط 1</a></li> <li class="tec-xatakamovil-g"><a href="#">رابط 2</a></li> <li class="tec-xatakafoto-g"><a href="#">رابط 3</a></li> <li class="tec-xatakandroid-g"><a href="#">رابط 4</a></li> <li class="tec-xatakahome-g"><a href="#">رابط 5</a></li> <li class="tec-xatakawindows-g"><a href="#">رابط 6</a></li> <li class="tec-xatakaciencia-g"><a href="#">رابط 7</a></li> <li class="tec-applesfera-g"><a href="#">رابط 8</a></li> <li class="tec-vidaextra-g"><a href="#">رابط 9</a></li> <li class="tec-genbeta-g"><a href="#">رابط 10</a></li> <li class="tec-genbetadev-g"><a href="#">رابط 11</a></li> </ul>
ملاحظة يمكنك وضع الكود ان مااردت بالتوفيق
|
| | | | عدد المساهمات : 13 | تاريخ التسجيل : 30/06/2015 |
|
| رد: كود اضافة قائمة روابط على شكل شجرة
كُتب : [ الأربعاء أغسطس 26, 2015 5:21 am ] |
---|
أسم العضو : Gta_amine | |
شكرا لك |
| | | | عدد المساهمات : 21 | تاريخ التسجيل : 29/08/2015 |
|
| رد: كود اضافة قائمة روابط على شكل شجرة
كُتب : [ السبت أغسطس 29, 2015 8:47 pm ] |
---|
أسم العضو : الشاعر 96 | |
شكرا لك على الشجرة مظهرها و تصميمها حلو |
| |