فـوتـر جميل وانيق بتقنية الـ Css (أول موضوع لي هنآ)

السلام عليكم ورحمة الله وبركاته ،

أول موضوع لي بهالقسم ، اتمنى ان ينال على رضاكم

فوتر بتقنية الـ Css

اولا دعونا نقف قليلا ونستعرض الناتج النهائي للعمل

هذه صوره نهائيه من العمل ،




حسنا ، لآ بأس بـِه ،،

نأتي الان لطريقة التركيب بالمنتدى ،

أولا نذهب الى قالب الفوتر ، ونضع هذا الكود بنهاية القالب ،

اقتباس :

<!--Start Footer-->
<div id="footer">

<div class="pal-girl">

<h3> <img src="images/stick-footer.png" alt="myforum" /> نبذه تعريفيه</h3>

<p>فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت - الاعدادات الشامله للاستايل فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت - الاعدادات الشامله للاستايل فوتر بتقنية Css مقدم من فلسطينيه وافتخر عضوه بمعهد ترايدنت - الاعدادات الشامله للاستايل</p>

</div>
<div class="pal-girl">
<h3> <img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>

<ul>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li> </ul>
</div>


<div class="pal-girl">
<h3><img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>

<ul>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li> </ul>
</div>


<div class="pal-girl">
<h3><img src="images/link-footer.png" alt="myforum" /> الوصول السريع</h3>
<ul>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
<li><a href="#" target="_self"><img src="images/plus-li.png" /> ضع رابطك هنا</a></li>
</ul>
</div>


</div>

جميل جدا ، الى الان ما زالت الامور على ما يرام ، وكل شئ تحت السيطره

اظن ان التعديل سهل ،

حسنا ،

نأتي الان لكود Css

في الستايل المراد اضافة القالب لَه نذهب الى

Css رئيسي ،

ثــم بنهاية الصفحه نذهب الى

تعاريف CSS الإضافية/Additional CSS Definitions

اقتباس :

#footer {
width:auto;
cursor: crosshair
margin:auto;
height:220px;
color:#c3c3c3;
direction:rtl;
background-color: #dddddd;
}
img{
border:none;
}

.pal-girl{
float:right;
width:230px;
padding:10px;
border-right:1px dashed #666;
}
.pal-girl h3{
font-family:"Arial Black", Gadget, sans-serif;
font-size:16px;
color:#FFF;
font-weight:bold;
background-color:#0a95b8;
padding-right:10px;
margin-bottom:3px;
}

.pal-girl ul li {
list-style-type:none;
text-decoration: none;
padding:5px;
cursor: crosshair;
float: right;
}
.pal-girl p {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color:#696969;
text-align: justify;
}
.pal-girl ul li a {
color:#1c6b7f;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
}
.pal-girl ul li a:hover{
color:#FFF;
}
.pal-girl ul li:hover{
cursor: crosshair;
background-color: #0e83a0;
color: #FFF;
}
/*End footer style*/

ونضغط على حفظ ،

<tr> </tr>

اقتباس : يوجد بالمرفقات ايقونتين قم باضافتهم الى مجلد Images

وكذا يكون لديك قالب فوتر بتقنية الـ Css

جميل وانيق وسريَع وله فوائد كثيره وعديده

اتمنى ان يكون الموضوع حاز على رضاكم

وان شاء الله الاضافات وتعديلات القوالب النادره جدا سوف يتم اضافتها في القسم

لكم مني ارق واجمل تحيه مكلله بالورود

اختكم في الله

فلسطينيه وافتخر


السلام عليكم

الصور المرفقة






تم التجربه من قبلى شغاله ميه ميه
ارجول الرد بشكر