اهلا وسهلا بك فى دنياالعرب.
أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.
 


الرئيسيةالمنشوراتأحدث الصوربحـثالأعضاءالتسجيلدخول



1

 

  اكواد استايل تومبيلات جاهزة للاستخدام

اذهب الى الأسفل 
كاتب الموضوعرسالة
admin
الاداره العامه
admin

افضل كاتب


لونى المفضل : green
العمر : 42
عدد المشاركات : 129
الجنس : انثى
مزاج : 19
sms : فى كل عام

 اكواد استايل تومبيلات جاهزة للاستخدام Empty
مُساهمةموضوع: اكواد استايل تومبيلات جاهزة للاستخدام    اكواد استايل تومبيلات جاهزة للاستخدام Empty06.06.22 12:59

اقدم لكم في هذا الموضوع اكواد html&css جاهزة لتصميم استايل رباعي وتقطعيه واستخدامه مباشرة مع الاكواد
ويكون الاستايل بالهيدر صورتان يمين ويسار وتمدد بالمنتصف 
بالفوتر يمين ويسار وتمدد بالمنتصف
وعلى يمين ويسار الموقع يوجد تمدد يربط بين الهيدر والفوتر
مثال


 اكواد استايل تومبيلات جاهزة للاستخدام 7013

ومثال على التقطيعه التي تم الاعتماد عليها
 اكواد استايل تومبيلات جاهزة للاستخدام 6912




شرح استخدام الاكواد
نتوجه نحو لوحة الادارة - مظهر المنتدى - التومبيلات والقوالب - ادارة عامة 
نفتح قالب overall_header ونبحث عن {JAVASCRIPT} ونضيف الكود التالي اسفله 
الكود:
اقتباس :
<div id="centent">
<div class="h1">
<div class="habari-b">
<div class="habari-r"></div>
<div class="habari-l"></div>
</div>
<div class="asp-r">
<div class="asp-l">

ومن ثم نفتح قالب overall_footer_end ونضيف في اخر القالب الكود التالي : الكود:
اقتباس :
<div id="foter" style="width: 100%; height: 136px">
<div class="f-r"></div>
<div class="f-l">
<a class="u4" href="#" title="DES:HABARI88  ," target="_blank" style="left: 21px; bottom: 5px; height: 126px"></a>
</div>
<div class="f-bg">
</div>
</div>

ومن ثم نتوجه الى 
لوحة الادارة - مظهر المنتدى - الوان - ورقة css
واضف الاكواد التالية مع التعديلات المشروحة بالكود نفسه

الكود:
اقتباس :
.habari-b {

    background-image:url('تمدد هيدر');
   background-repeat: repeat-x;
 height: 450px;
}
 
.habari-r{
 background-image: url('هيدر يمين');
 width: 501px;
 height: 450px;
 background-repeat: no-repeat;
 float: right;
 position: relative;
}

.habari-l{
 background-image: url('هيدر يسار');
 height:450px;
 width:237px;
 float:left;
 position:relative
}

.asp-r {

    background: url('تمدد يمين') repeat-y scroll right center transparent;    
}


.asp-l {

    background: url('تمدد يسار') repeat-y scroll left center transparent;
    padding: 58px;
 }
 

.f-bg {
 background-image:url('تمدد فوتر');
 height:136px;
 background-repeat:repeat;
}
.f-r {
 background-image:url('فوتر يمين');
 height:136px;
 width:224px;
 background-repeat:no-repeat;
 float:right;
}
 .f-l{
  background-image:url('فوتر يسار');
  height:136px; width:237px; float:left; background-repeat:no-repeat;position:relative;
 }
طبعا يجب تغيير ارتفاع وعرض الصور بكود الـcss بحسب الصور اللي انت بتستخدمها
وبعد التركيب رح ييجي الاستايل عندك كامل وفي حال كان فيه فراغ باطراف الاستايل فقط قم باضافة الكود التالي في ورقة css
الكود:
اقتباس :
body {
margin: 0;
}

وهيك كل شي جاهز

تم الشرح بواسطتي : Mc Nabulsy
جميع الحقوق محفوظة لدليل الاشهار العربي
بالتوفيق للجميع
والسلام ختام




منقول

الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
اكواد استايل تومبيلات جاهزة للاستخدام
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» كود تغير استايل المنتدى
» بعض اكواد html

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
دنياالعرب :: منتدى الاكواد والتطوير  :: اكواد التومبيلات-
انتقل الى: