Hitskin.comهذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداك • الرجوع الى صفحة بيانات التصميم
انشاء منتدى مجانيكود الأقسام الفرعية بشكل جديد
صفحة 1 من اصل 1
كود الأقسام الفرعية بشكل جديد
من طرف صياد اليمام الجمعة 22 نوفمبر 2024 - 20:41
السلام عليكم ورحمة الله وبركاته,
كود الأقسام الفرعية بشكل جديد
صورة للكود
____________________________________________________
الان ناتى للشرح
لوحة الادارة/مظهر المنتدي/الهيكل و التراتب : مستوى الضغط في فهرس الصفحة الرئيسية ِ متوسط
ثم ننزل الي الاسفل ونعمل هذه الاعدادات
إظهار الروابط المباشرة الى الأقسام الداخلية :لا
بعد ما تم إنشاء الاقسام الفرعية بالشرح اعلاه
نذهب الي :
لوحة الادارة/إدارة عامة/المنتديات والفئات
نضغط علي زر تعديل
للمنتدي الذي به الاقسام الفرعية
كما واضح امامنا في الصورة
ثم ننزل الي الوصف ونضع الكود التالي
لوحة الادارة/مظهر المنتدي/الهيكل و التراتب : مستوى الضغط في فهرس الصفحة الرئيسية ِ متوسط
ثم ننزل الي الاسفل ونعمل هذه الاعدادات
إظهار الروابط المباشرة الى الأقسام الداخلية :لا
بعد ما تم إنشاء الاقسام الفرعية بالشرح اعلاه
نذهب الي :
لوحة الادارة/إدارة عامة/المنتديات والفئات
نضغط علي زر تعديل
للمنتدي الذي به الاقسام الفرعيةكما واضح امامنا في الصورة
ثم ننزل الي الوصف ونضع الكود التالي
- كود الوصف:
- الكود:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<div class="categories-container">
<div class="category">
<a href="رابط_الفئة1.html"> <em class="fas fa-users"></em> <span>اسم الفئة 1</span> </a>
</div>
<div class="category">
<a href="رابط_الفئة2.html"> <em class="fas fa-cogs"></em> <span>اسم الفئة 2</span> </a>
</div>
<div class="category">
<a href="رابط_الفئة3.html"> <em class="fas fa-clipboard-list"></em> <span>اسم الفئة 3</span> </a>
</div>
<div class="category">
<a href="رابط_الفئة4.html"> <em class="fas fa-chart-line"></em> <span>اسم الفئة 4</span> </a>
</div>
<div class="category">
<a href="رابط_الفئة5.html"> <em class="fas fa-lightbulb"></em> <span>اسم الفئة 5</span> </a>
</div>
<div class="category">
<a href="رابط_الفئة6.html"> <em class="fas fa-bell"></em> <span>اسم الفئة 6</span> </a>
</div>
</div>
لوحة الادارة >>> الصور والألوان >>> ألوان & ورقة CSS >>> ورقم ال CSS >>> ضع الكود ثم اضغط قدم
الكود
- كود CSS:
- الكود:
.categories-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px;
}
.category {
background-color: #0000FF;
color: white;
font-size: 15px;
font-weight: bold;
padding: 7px 10px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
}
.category a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.category i {
font-size: 20px;
color: #000000;
margin-right: 10px;
}
.category span {
text-align: center;
flex-grow: 1;
}
.category:hover {
background-color: #45a049;
}
_________________________________________________
تم كتابة الكود من قبل ---- صياد اليمام ----
صياد اليمام- احلى مساعد
-
عدد المساهمات : 130
معدل النشاط : 211
السُمعة : 2 -
ابوعلي البلقاوي و كونان2000 يعجبهم هذا الموضوع
مواضيع مماثلةصفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى