020 html lists and menus عمل قوائم افقية وراسية رائعة من الصفر

مرسلة بواسطة Yuio مايو 04, 2015

020 html lists and menus عمل قوائم افقية وراسية رائعة من الصفر

فى هذا الدرس الهام سنتعلم عمل قوائم من الصفر بلغة اتش تى ام ال

تابع الشرح التفصيلى فى الفيديو

والاكواد موجودة كلها باسفل

HTML Lists
Unordered List with Default Bullets
HTML can have Unordered lists, Ordered lists, or Description lists:
Unordered List

Nested HTML Lists
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to display horizontally:

With a little extra style, you can make it look like a menu:

========

<h2>Unordered List with Default Bullets</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

===========

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<p>Try it Yourself »</p>
<p> </p>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p> </p>
<p> </p>

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p> </p>
<p> </p>
==============

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

=============
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
========
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

=====
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

====
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>====

HTML Description Lists====== </p>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<p> </p>
<p>===========</p>
<p> </p>
<p> </p>
<p> </p>

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>
<p> </p>

======

<!DOCTYPE html>
<html>

<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>

</body>
</html>

========== القوائم ======

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    margin-bottom: 20px;
/* display: inline; */
    /*float:right; */
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 5px   30px;

    margin-bottom: auto;

    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

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

<h2>Horizontal List</h2>

<ul id="menu">
<li><a href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></li>
<li><a href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></li>
</ul>
<p> </p>
<p> </p>
<h2>Chapter Summary</h2>
<ul>
<li>Use the HTML <strong><ul></strong> element to define an unordered list</li>
<li>Use the HTML <strong>style</strong> attribute to define the bullet style</li>
<li>Use the HTML <strong><ol></strong> element to define an ordered list</li>
<li>Use the HTML <strong>type</strong> attribute to define the numbering type</li>
<li>Use the HTML <strong><li></strong> element to define a list item</li>
<li>Use the HTML <strong><dl></strong> element to define a description list</li>
<li>Use the HTML <strong><dt></strong> element to define the description term</li>
<li>Use the HTML <strong><dd></strong> element to define the description data</li>
<li>Lists can be nested inside lists</li>
<li>List items can contain other HTML elements</li>
<li>Use the CSS property <strong>display:inline</strong> to display a list horizontally</li>
</ul>
<br>
<p> </p>

</body>
</html>

==========

بحث هذه المدونة الإلكترونية

معنا wz-us

020 html lists and menus عمل قوائم افقية وراسية رائعة من الصفر

المشاركات الشائعة

رسوم تجديد رخصة القيادة الخاصة 2023 حدث معى فى شهر 10 -2023

تعلم طباعة المستندات الكبيرة فى اكسيل بسهولة