فى هذا الدرس الهام سنتعلم عمل قوائم من الصفر بلغة اتش تى ام ال
تابع الشرح التفصيلى فى الفيديو
والاكواد موجودة كلها باسفل
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:
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>
<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>
==========
0 تعليق على موضوع : 020 html lists and menus عمل قوائم افقية وراسية رائعة من الصفر
الأبتساماتأخفاء الأبتسامات