- 2024-03-23
- 469
مرحبا ..
معنا كود اليوم تم برمجته لاستخدامه في منتديات عراق ماستر هنا في الصفحة الرئيسية
في الكود تفاصيل كل نمط من انماط الستايل، وهو متجاوب مع جميع المتصفحات والشاشات
صورة الكود الافتراضية بعد التطبيق DS1
وهنا صورة الكود بعد التعديل على تنسيقاته ليناسب العرض في المنتدى هنا DS1-1
الاكواد:
الكود الاول - DS1
الكود الثاني - DS1-1
انتهى
معنا كود اليوم تم برمجته لاستخدامه في منتديات عراق ماستر هنا في الصفحة الرئيسية
في الكود تفاصيل كل نمط من انماط الستايل، وهو متجاوب مع جميع المتصفحات والشاشات
صورة الكود الافتراضية بعد التطبيق DS1
وهنا صورة الكود بعد التعديل على تنسيقاته ليناسب العرض في المنتدى هنا DS1-1
الاكواد:
الكود الاول - 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>انتهى