ایجاد لیست با CSS
ارسال شده: پنجشنبه ۸ اسفند ۱۳۹۲, ۱:۰۲ ب.ظ
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]تنظیم لیست با دستور ul و li و
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ایجاد لیست ها با html و css بسیار مهم است زیرا منو هایی که بعدا ایجاد خواهیم کرد با همین دستورات ul و li ایجاد می
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ایجاد لیست های شمارشی با ol و لیست غیر شمارشی با ul صورت می
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ما با دستورات ol و ul اعلام می کنیم که قصد ایجاد چه نوع لیستی را داریم سپس با li المان های مربوطه را می
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ul.a
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: circle}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ul.
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: square}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ol.c
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: upper-roman}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ol.
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: lower-alpha}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];list-style-type:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];padding:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];margin:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ul
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]background-image: url(sqpurple.gif) برای انداختن تصویر دلخواه کنار اعضای
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];background-repeat:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];background-position: 0px
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]padding-left:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]در کد html فقط کافی است که کلاس های مربوطه را به ul و li و ol اختصاص
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ul class="a>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ul/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ul class="b>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ul/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<p>مثالی از لیست های شمارشی و ترتیبی</p>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ul class="c>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ol/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ol class="d>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ol/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]برای اجرا و دیدن خروجی کار می توانید تمامی دستورات را در یک فایل html بنویسید و اجرا کنید.
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]منبع :[External Link Removed for Guests]
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ایجاد لیست ها با html و css بسیار مهم است زیرا منو هایی که بعدا ایجاد خواهیم کرد با همین دستورات ul و li ایجاد می
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ایجاد لیست های شمارشی با ol و لیست غیر شمارشی با ul صورت می
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ما با دستورات ol و ul اعلام می کنیم که قصد ایجاد چه نوع لیستی را داریم سپس با li المان های مربوطه را می
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ul.a
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: circle}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ul.
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: square}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ol.c
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: upper-roman}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ol.
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{;list-style-type: lower-alpha}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];list-style-type:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];padding:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];margin:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]ul
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]}
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]background-image: url(sqpurple.gif) برای انداختن تصویر دلخواه کنار اعضای
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];background-repeat:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef];background-position: 0px
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]padding-left:
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]{
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]در کد html فقط کافی است که کلاس های مربوطه را به ul و li و ol اختصاص
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ul class="a>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ul/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ul class="b>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ul/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<p>مثالی از لیست های شمارشی و ترتیبی</p>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ul class="c>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ol/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<"ol class="d>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coffee</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Tea</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef] <li>Coca Cola</li>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]<ol/>
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]برای اجرا و دیدن خروجی کار می توانید تمامی دستورات را در یک فایل html بنویسید و اجرا کنید.
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]
[FONT=BYekan, Verdana, Arial, sans-serif] [HIGHLIGHT=#efefef]منبع :[External Link Removed for Guests]