دورة HTML5 للمبتدئين

10 : دورة إحتراف HTML5 بمنهجية أكاديمية (تطبيق الدروس وتصميم قائمة )

في هذا الدرس سوف نقوم بتحويل الدروس إلى عمل على أرض الواقع وذلك بتصميم أول قائمة لك، مثل التي نشاهد في قوالب المواقع والمدونات وبنفس الطريقة. بمعنى سوف نرتب ما درسناه في الدروس السابقة لكل نصل إلى النتيجة المرجوة.

الدروس السابقة

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

كود القائمة :

<!DOCTYPE html>
<html>
<head>
	<title>WWW.SHAFRAH.TECH</title>
<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: #2c79f5;
}
 
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: #0b2042;
}
</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>

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

السابق
9 : دورة إحتراف HTML5 بمنهجية أكاديمية ( القوائم أو Lists )
التالي
10 : البرمجة بلغة بايثون – المزيد حول أنواع البيانات

شاركنا برأيك