مرجع مقالات رسمی طراحی سایت مرجع مقالات رسمی طراحی سایت .

مرجع مقالات رسمی طراحی سایت

یادگرفتن پیشنهادی برای شما : یادگرفتن بدون نقص HTML و HTML5


در فراگیری پیشین ما به طور بی نقص با جداول و طریق استعمال از آنان آشنا شدیم. درحال حاضر درین نصیب از یادگرفتن‌های تارنما فراگیری تک قصد داریم شمارا با پیاده‌سازی لیست در یک گواهی HTML آشنا کنیم.
فکر کنید که می خواهید یک لیست خرید را در ورقه اینترنت‌تان قرار بدهید. برای اینکار می توانید یک‌سری تگ p را در یک‌سری خط گوناگون قرار داده و محتوا را بین آنان وارد فرمائید. ولی این فعالیت چندان منطقی وجود ندارد، به‌این خیال که ما ظاهری مانند یک لیست را اخذ نخواهیم کرد. برای همین زمینه ما نیاز داریم که از تگ‌های ایجاد لیست در HTML یعنی ul و ol به کارگیری کنیم.

 طراحی سایت در مشهد

یادگرفتن پیشنهادی برای شما : یادگرفتن بدون نقص HTML و HTML5

 

تفاوت تگ UL و OL
در صورتی‌که با قابل انعطاف افزاری مانند ورد یا این که لیبره آفیس عمل کرده باشید مطمئنا با لیست‌ها نیز شناخت دارید. در دنیای متن ها ما دو گونه از لیست‌ها را در دست داریم:
لیست‌های تر و تمیز یا این که Ordered List
لیست‌های نا مرتب یا این که Unordered List
تفاوت این دو شرایط بسیار بی آلایش میباشد. در لیست‌های آراسته مورد‌ها براساس یک وضعیت ترتیبی نوشته میشوند. خواسته از موقعیت ترتیبی این میباشد که المانی برای شمارش مورد‌های لیست قرار داده می‌گردد. مثلا:
۱- تخم مرغ
۲- سیب زمینی
۳- پیاز
یا این که
آ) جوراب
ب) شلوار
پ) کلاه

البته در لیست‌های شلوغ بجای استعمال از اعداد و یا این که حروف ما با تعدادی از انواع روبرو هستیم. مثلا:
تخم مرغ
سیب زمینی
پیاز

هم اکنون برای پیاده‌سازی این لیست‌ها در یک مدرک HTML نخست نگاهی به لیست‌های تر و تمیز می‌اندازیم. برای استارت فعالیت یک گواهی HTML را با المان‌های مبنا‌ای نوشته و آن‌گاه تگ پایین را به نصیب body آن طولانی تر فرمائید:


1
2
3

 

اکنون درصورتی که گواهی را ذخیره کرده و در مرورگر اکران دهید هیچ چیزی را مشاهده نخواهید کرد. به این دلیل‌که شما به یک تگ دیگر به نام li یا این که list item نیاز دارید. برای به کار گیری از این تگ نیاز میباشد که آن را فی مابین ol یا این که ul قرار دهید. به نمونه پایین اعتنا فرمائید:


1
2
3
4
5

Orange

Apple

Banana


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

میتوانید نحوه اکران لیست‌ها را از دید اعداد و کاراکترها تغییر تحول بدهید. برای این فعالیت کافی‌ست از خواص type منفعت بگیرید. به نمونه تحت دقت فرمائید:


1
2
3
4
5

Orange

Apple

Banana


مقدار خواص type میتواند A، I، ۱، a و i باشد.
در ol به طور پیشفرض مقدار type برابر با ۱ میباشد. ولی میتوانید مقدار عددی را نیز تغییر‌و تحول دهید. به عنوان مثال در صورتی‌که بخواهید از ۱۰ آغاز فرمائید میتوانید به طور ذیل کار فرمایید.


1
2
3
4
5

Orange

Apple

Banana


لیست‌های شلوغ یا این که ul
فقط تفاوت این لیست‌ها با لیست گذشته نحوه اکران آن در مرورگر میباشد. در این صورت بجای به کار گیری از اعداد، حروف و… لیست شما با استعمال از علائم و آیکون‌ها اکران داده می‌گردد. نمونه پایین را در یک مرورگر اجرا فرمایید:


1
2
3
4
5

Orange

Apple

Banana


همان گونه که مشاهده می کنید با یک دایره توپر طرف می باشید. برای اینکه بتوانید صورت آن را تغییر و تحول دهید، نیاز میباشد که از CSS استعمال کنیم. به عنوان مثال در شرایطی که بخواهیم از مربع به کارگیری کنیم به طور تحت از خواص list-style-type سود خوا‌هیم موفقیت:


1
2
3
4
5

Orange

Apple

Banana

 

لیست‌های تعریفی
با استعمال از لیست‌های تعریفی شما این امکان را پیدا خواهید کرد که برای هریک از گزینه‌ها یک تعریف‌و‌تمجید بنویسید. به نمونه ذیل دقت فرمایید:


1
2
3
4
5
6

Coffee

- black hot drink

Milk

- white cold drink


از dl تحت عنوان تگ استارت کننده لیست‌های تعریفی به کار گیری می گردد. بعد برای هر تیتر یا این که بهتر میباشد بگوییم هر مورد از یک dt سود می گیریم. برای اضافه کردن توضیحات به هر گزینه نیز از dd به کار گیری میکنیم.

لیست‌های تو در تو
بعضی وقت ها ممکن میباشد نیاز داشته باشید که گزینه‌های لیست‌تان را مدل‌بندی بکنید. مثلا به عبارتی مراحل خرید را در حیث بگیرید. می توانید خریدتان را به مواد خوراکی، پوشاک و… تقسیم کرده و آنگاه برای هرکدام مورد مربوطه را بنویسید. به عنوان مثال به کدهای پایین اعتنا نمایید:


برچسب: طراحی سایت در مشهد،
امتیاز:
 
بازدید:

+ نوشته شده: ۸ آبان ۱۳۹۸ساعت: ۱۰:۰۶:۵۸ توسط:علی پور موضوع: نظرات (0)