انتظرونا قريبا التجديد الكامل للمجتمع .. ورفع احدث نسخ الويندوز مع البرامج المفعلة بروابط تورنت

Foto

تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب



  • Por favor, inicie sesiَn para responder

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل  رسالة [صفحة 1 من اصل 1]

#1
Fuera de lيnea
في الأحد مارس 05, 2017 2:31 pm


avatar

عضو مبدع

عضو مبدع
تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب
الكود هو عبارة عن شكل جديد لاقسام الفرعية في المنتدى

صوره كمثال


نتوجه الى:



لوحة الاداره >> ادارة عامة >> منتدى >> المنتديات والفائات>>
وندخل الى اى قسم ونضغط على ايقونة تعديل ,
مثال؟



الكود:
      <table>
                                           
              <tbody>
                  <tr>
                                             
                    <td>
                                                       
                        <div class="desc10">
                                                               
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                             
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                       
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                       
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                           
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                             
                        </div>
                                                     
                    </td>
                                             
                    <td>
                                                       
                        <div class="desc9">
                                                               
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                           
                          <div class="class1">
                                                    <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                 
                          </div>
                                                         
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                       
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                           
                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>
                                                             
                        </div>
                                                     
                    </td>
                                           
                  </tr>
                                         
              </tbody>
            </table


ثم نضع الكود التالى اذا ارت ذيادة عدد الاقسام يمكنك تزويده بهذا الكود


الكود:

                          <div class="class1">
                                                      <a href="رابط القسم"><span style="color: #FFFFFF;
            font-weight: bold;"> اسم القسم </span></a><br />                   
                          </div>

لأن نتوجه الى:

 ورقة تصميم css
لوحة الاداره >> مظهر المنتدى >> الصور والألوان >> ألوان >> ورقة تصميم css
تعطيل كود ال CSS الأصلي: لا
تفعيل نظام تحسين مردودية ال CSS المشخص: نعم
ثم اضف هذا الكود الى ورقة تصميم css
   

الكود:
    /**تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب**/
              .class1 {
              opacity: 0.8;
              width: 120px;
              margin-bottom: 2px;
              -webkit-transition: all 0.4s linear;
              background-color: #096EA1;
              font-family: bold;
              font-size: 10.5px;
              padding: 2px 0px 2px 10px;
              line-height: 120%;
              border-right: 15px solid #454C1F;
              border-radius: 30px 30px 30px 30px;
              list-style-type: none;
              text-align: right;
            }
                .class1:hover{
                opacity:1;
                border-left:30px solid #454C1F7;/*لون جنب اليسار*/
                background-color:#075A96;/*لون خلفية عند مرور الماوس على اسم القسم */
                border-radius:30px 30px 30px 30px;
                color: #000;
                }
                .desc9 {
              width: 140px;
              height: 80px;
              /* margin-top: -25px; */
              padding: 20px display: block;
              margin-left: 15px;
            }
                .desc10 {
                width: 140px;
                height:54px;
                margin-top: -25px;
                padding: 20px;
                display: block;
                }
                /**تقنية جديدة تجعل الاقسام الفرعية بشكل جذاب**/

تم الشرح بواسطة
وهبة الساحر

منقووول

معاينة صفحة البيانات الشخصي للعضو http://inkor.ibda3.info

رسالة [صفحة 1 من اصل 1]