بلوكين متجاورين بتصميم خاص

[كود CODE] بلوكين متجاورين بتصميم خاص

  • بادئ الموضوع بادئ الموضوع AnGeL
  • تاريخ البدء تاريخ البدء
  • الردود الردود 0
  • المشاهدات المشاهدات 58

النشر في الصفحات
نعم

AnGeL

صاحب الامتياز

Reputation: 50%
2024-03-23
483
مرحبا ..
معنا كود اليوم تم برمجته لاستخدامه في منتديات عراق ماستر هنا في الصفحة الرئيسية
في الكود تفاصيل كل نمط من انماط الستايل، وهو متجاوب مع جميع المتصفحات والشاشات
صورة الكود الافتراضية بعد التطبيق DS1

DS1-1.webp



وهنا صورة الكود بعد التعديل على تنسيقاته ليناسب العرض في المنتدى هنا DS1-1

DS1-1.webp


الاكواد:

الكود الاول - DS1

CSS:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بلوك متجاوب</title>
<style>
  /* أساسيات الأنماط */
  .custom-responsive-block {
    display: flex;
    width: calc(100% - 10px); /* تقليل العرض لتوفير مساحة للمارجن */
    padding: 5px; /* تقليل البادينغ لتقليل المسافة الداخلية */
    box-sizing: border-box;
    margin: 5px; /* تقليل المارجن الخارجي */
    border: 0; /* لا يوجد حدود */
  }

  .block-section {
    flex: 1;  /* تأكيد على أخذ كل قسم لنصف البلوك */
    padding: 10px;
    box-sizing: border-box;
    text-align: justify; /* توزيع النص بنمط Justify */
    margin: 5px; /* تقليل المارجن الداخلي */
    background-color: #fff; /* لون خلفية للتمييز */
  }

  .block-section .block-container {
    border: 2px solid blue; /* حدود زرقاء */
    padding: 20px; /* بادينغ إضافي */
  }

  footer {
    text-align: center; /* توسيط النص في التذييل */
    margin-top: 20px; /* هامش علوي للتذييل */
  }

  /* تجاوب مع الشاشات الصغيرة */
  @media (max-width: 768px) {
    .custom-responsive-block {
      flex-direction: column;
      width: calc(100% - 10px); /* ضبط العرض في الشاشات الصغيرة */
    }
    .block-section {
      flex: none; /* تجاهل الفلكس للتكيف مع الشاشات الصغيرة */
      width: 100%; /* يأخذ العرض الكامل */
    }
  }
</style>
</head>
<body>
<div class="custom-responsive-block">
  <div class="block-section">
    <div class="block-container">
      <h1>قسم 1 داخلي</h1>
    <p>محتوى القسم الثاني هنا. النص هنا أيضًا موزع بنفس الطريقة ليوفر تناسق في الشكل والمظهر بين الأقسام المختلفة في البلوك.</p>
    </div>
  </div>
  <div class="block-section">
      <div class="block-container">
      <h1>قسم 2 داخلي</h1>
    <p>محتوى القسم الثاني هنا. النص هنا أيضًا موزع بنفس الطريقة ليوفر تناسق في الشكل والمظهر بين الأقسام المختلفة في البلوك.</p>
  </div>
</div>
    </div>
<footer>
  جميع الحقوق محفوظة لـ <a href="https://www.iraqmaster.net">منتديات عراق ماستر</a>
</footer>
</body>
</html>

الكود الثاني - DS1-1

CSS:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بلوك متجاوب</title>
<style>
  /* أساسيات الأنماط */
  .custom-responsive-block {
    display: flex;
    width: calc(100% - 10px); /* تقليل العرض لتوفير مساحة للمارجن */
    padding: 5px; /* تقليل البادينغ لتقليل المسافة الداخلية */
    box-sizing: border-box;
    margin: 5px; /* تقليل المارجن الخارجي */
    border: 0; /* لا يوجد حدود */
  }

  .block-section {
    flex: 1;  /* تأكيد على أخذ كل قسم لنصف البلوك */
    padding: 3px;
    box-sizing: border-box;
    text-align: justify; /* توزيع النص بنمط Justify */
    margin: 3px; /* تقليل المارجن الداخلي */
    background-color: hsl(var(--xf-contentBg));; /* لون خلفية للتمييز */
  }

  .block-section .block-container {
    border: 0px solid blue; /* حدود زرقاء */
    padding: 3px; /* بادينغ إضافي */
  }

  footer {
    text-align: center; /* توسيط النص في التذييل */
    margin-top: 3px; /* هامش علوي للتذييل */
  }

  /* تجاوب مع الشاشات الصغيرة */
  @media (max-width: 768px) {
    .custom-responsive-block {
      flex-direction: column;
      width: calc(100% - 10px); /* ضبط العرض في الشاشات الصغيرة */
    }
    .block-section {
      flex: none; /* تجاهل الفلكس للتكيف مع الشاشات الصغيرة */
      width: 100%; /* يأخذ العرض الكامل */
    }
  }
</style>
</head>
<body>
<div class="custom-responsive-block">
  <div class="block-section">
    <div class="block-container">
<xf:widget key="Specificsnode_Hitech" />    </div>
  </div>
  <div class="block-section">
                <div class="block-container">
<xf:widget key="Specificsnode_Ai" />  </div>
</div>
     </div>
<footer>
  جميع الحقوق محفوظة لـ <a href="https://www.iraqmaster.net">منتديات عراق ماستر</a>
</footer>
</body>
</html>

انتهى
 
Similar threads Most view عرض المزيد


أكتب ردك...

المواضيع المشابهة

كود بلوكات متجاورة، تم تصميمه مسبقا لمنتديات شباب الرافدين صورة التصميم: كود التصميم بالكامل في المرفقات
الردود
0
المشاهدات
73
AnGeL
السلام عليكم ورحمة الله وبركاته، معنا اليوم كود جديد عبارة عن نافذة اعلانية جذابة وبسيطة يمكن التعديل عليها بسهولة واستخدامها في صفحة او موقع. الكود ينشئ نافذة منبثقة جذابة مصممة لجلب انتباه...
الردود
0
المشاهدات
64
AnGeL
عودة
أعلى أسفل