شامل في تعلم HTML تصميم قائمة

تم تحميل الصفحة في 1,7311275 ثانية
شامل في تعلم HTML تصميم قائمة
إنضم
10 يناير 2018
المشاركات
542
الإعجابات
509
النقاط
93
الإقامة
Morocco


تصميم قائمة

في هدا الموضووع سوف نقوم بتحويل القائمة العمودية الى قائمة أفقية متل التي نشاهد في القوالب المواقع والمدونات

سوف نرتب ما درسناه في الدرس السابق

شامل في تعلم HTML القوائم

صورة القائمة :



كود القائمة :

HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f442ad;
}

li {
  float: right;
}

li a {
  font-family: sans-serif;
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #f4a442;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">الرئسية</a></li>
  <li><a href="#news">المنتديات</a></li>
  <li><a href="#contact">إتصل بنا</a></li>
  <li><a href="#about">من نحن</a></li>
</ul>

</body>
</html>
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل