آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

لیست ها در HTML

3-9

فصل سوم ( معرفی ساختار  HTML4 )

جلسه نهم ( لیست ها در HTML )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

دوستان امروز راجع به لیست ها در html صحبت می کنیم . ما سه نوع لیست داریم :

–         لیست های مرتب

–         لیست های نامرتب

–         لیست های توضیحی

 لیست های مرتب

لیست های مرتب یا ordered list ، لیست هایی هستند که موارد به همراه شماره و یا حروف به ترتیب نمایش داده میشوند .برای ایجاد این لیست ها از عناصر ol و li استفاده می کنیم .

ساختار کلی :

 شمارشگر کنار هر عنوان رو میتونید از موارد زیر انتخاب کنید و در خاصیت type برای عنصر ol قرار دهید  :

۱-     اعداد

۲-     حروف انگلیسی بزرگ A

۳-     حروف انگلیسی کوچکa

۴-     حروف رومی بزرگ I

۵-     حروف رومی کوچک i

 به کدهای زیر دقت کنید ، به ترتیب برای هر مورد یک مثال میزنم :

 نتیجه ی کد بالا :

1

لیست های نامرتب

لیست های نامرتب یا Unordered list ، لیست هایی هستند که موارد به همراه bullet نمایش داده میشوند . برای ایجاد این لیست ها از عناصر ul و li استفاده می کنیم .

ساختار کلی :

 با استفاده از list-style-type  میتونید نوع bullet کنار عناوین رو تعیین کنید ، ۳ نوع bullet در زیر میبینید که میتونید یکی از این bullet هارو برای لیستتون انتخاب کنید :

–  Disc

–  Circle

–  Square

برای استفاده از bullet ها به کد زیر دقت کنید :

 نتیجه ی کد بالا :

2

اگر bullet های بالارو برای لیستتون نپسندیدید میتونید خودتون هر شکلی که میخواین به لیستتون اضافه کنید . برای اینکار باید برای هر li یک background تعیین کنید . به مثال زیر توجه کنید :

 نتیجه ی کد بالا :

bullet

تو کد بالا اگه دقت کرده باشید ، ما اومدیم bullet پیشفرض ul رو برابر با none قرار دادیم که خودمون یک bullet زیبا برای li هامون قرار بدیم . با این استایل دهی در بخش css بطور کامل آشنا خواهید شد .

لیست های توضیحی

لیست های توضیحی یا description list ، لیست هایی هستند که برای هر عنوان یک توضیح مختصر داده میشه .  برای این لیست ها از عناصر dl و dd و dt استفاده می کنیم .

ساختار کلی :

 نتیجه کد بالا :

4

خوب اطلاعات لازم در رابطه با لیست هارو در اختیار شما دوستان گرامی قرار دادم ، امیدوارم مفید واقع شده باشه .

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟