لیستها بخش مهمی از هر وبسایت هستند و برای نمایش منوها، نکات و مطالب مختلف استفاده میشوند. HTML سه نوع اصلی لیست شامل لیست نامرتب (unordered list)، لیست مرتب (ordered list) و لیست توضیحی (description list) را پشتیبانی میکند. در این مقاله، به آموزش نحوه طراحی و استایلدهی ساده برای لیستهای HTML با استفاده از CSS میپردازیم و نکات کاربردی برای ایجاد لیستهای زیبا و جذاب را بررسی خواهیم کرد.
سه نوع اصلی لیست در HTML وجود دارد:
لیست نامرتب (< ul >): موارد لیست بدون ترتیب و با نقطه نمایش داده میشوند.
لیست مرتب (< ol >): موارد لیست با ترتیب و با اعداد نمایش داده میشوند.
لیست توضیحی (< dl >): یک نوع لیست خاص که شامل تعریفات و توضیحات است.
مثال ساختار هر سه نوع لیست:
HTML
< h3 > لیست نامرتب < / h3 >
< ul >
< li > آیتم 1 < / li >
< li > آیتم 2 < / li >
< li > آیتم 3 < / li >
< / ul >
< h3 > لیست مرتب < / h3 >
< ol >
< li > آیتم 1 < / li >
< li > آیتم 2 < / li >
< li > آیتم 3 < / li >
< / ol >
< h3 > لیست توضیحی < / h3 >
< dl >
< dt > اصطلاح 1 < / dt >
< dd > تعریف اصطلاح 1 < / dd >
< dt > اصطلاح 2 < / dt >
< dd > تعریف اصطلاح 2 < / dd >
< / dl >
با استفاده از CSS میتوان ظاهر لیستها را تغییر داد و از ظاهر اولیه HTML فاصله گرفت.
برای حذف علامتهای پیشفرض لیست، از ویژگی list-style-type با مقدار none استفاده کنید.
Css
ul {
list-style-type : none ;
}
ol {
list-style-type : none ;
}
این کد علامتهای نقطه و اعداد را از لیستهای ul و ol حذف میکند.
میتوانید نوع علامتها را با استفاده از ویژگی list-style-type تغییر دهید:
Css
ul {
list-style-type : square ;
}
ol {
list-style-type : upper-roman ;
}
square: علامت مربع برای لیست نامرتب
upper-roman: شمارهگذاری با اعداد رومی بزرگ برای لیست مرتب
به جای علامتهای پیشفرض، میتوانید از تصاویر سفارشی به عنوان علامت لیست استفاده کنید.
Css
ul {
list-style-image : url('icon.png') ;
}
در اینجا، تصویر icon.png به عنوان علامت برای موارد لیست نامرتب استفاده میشود.
فاصلهگذاری مناسب میتواند لیست را خواناتر کند. میتوانید از padding و margin برای تنظیم فاصله بین آیتمهای لیست و حاشیه لیست استفاده کنید.
Css
ul {
list-style-type : none ;
padding : 0 ;
margin : 0 ;
}
ul li {
padding : 10px 0 ;
margin : 5px 0 ;
}
در اینجا:
padding: 0 و margin: 0 فاصله پیشفرض از کنارهها را حذف میکنند.
padding: 10px 0 و margin: 5px 0 فاصله بین آیتمهای لیست را تنظیم میکنند.
برای استایلدهی لیست به شکل دکمه یا منو، میتوان از ویژگیهایی مانند background-color، border-radius و hover استفاده کرد.
Css
ul.nav-menu {
list-style-type : none ;
padding : 0 ;
margin : 0 ;
display : flex ;
}
ul.nav-menu li {
padding : 10px 20px ;
background-color : #3498db ;
color : white ;
margin-right : 10px ;
border-radius : 5px ;
transition : background-color 0.3s ;
}
ul.nav-menu li : hover {
background-color : #2980b9 ;
}
در اینجا:
لیست به عنوان یک منو با پسزمینه آبی و گوشههای گرد نمایش داده میشود.
حالت hover رنگ پسزمینه را تغییر میدهد و جلوه تعاملی ایجاد میکند.
display: flex آیتمهای لیست را به صورت افقی کنار هم قرار میدهد.
میتوانید اعداد لیستهای مرتب را با استفاده از کلاسها و شبهعناصر استایلدهی کنید.
Css
ol.styled-list {
list-style-type : none ;
counter-reset : list-counter ; /* ایجاد شمارشگر */
}
ol.styled-list li {
counter-increment : list-counter ; /* افزایش شمارشگر */
position : relative ;
padding-left : 30px ;
}
ol.styled-list li : : before {
content : counter(list-counter) ". " ;
position : absolute ;
left : 0 ;
color : #3498db ;
font-weight : bold ;
}
در اینجا:
counter-reset یک شمارشگر ایجاد میکند.
counter-increment شمارشگر را برای هر آیتم افزایش میدهد.
::before برای هر آیتم، عدد را نمایش میدهد و رنگ و استایل آن را تغییر میدهد.
لیستهای توضیحی برای نمایش تعریفات به کار میروند و میتوان با CSS به آنها ظاهر منظمتری داد.
Css
dl {
margin : 0 ;
}
dt {
font-weight : bold ;
color : #3498db ;
}
dd {
margin-left : 20px ;
color : #555 ;
}
در اینجا:
dt که حاوی عنوان توضیح است، به صورت پررنگ و رنگی استایلدهی شده است.
dd که حاوی توضیح است، با فاصلهای به سمت راست (margin-left) قرار گرفته و رنگ آن تغییر داده شده است.
برای ایجاد ظاهری زیبا، میتوانید از آیکونهای سفارشی یا فونتهای آیکون مانند Font Awesome در کنار آیتمهای لیست استفاده کنید.
مثال:
HTML
< ul class="icon-list" >
< li > < i class="fa fa-check" > < / i > آیتم 1 < / li >
< li > < i class="fa fa-check" > < / i > آیتم 2 < / li >
< li > < i class="fa fa-check" > < / i > آیتم 3 < / li >
< / ul >
Css
.icon-list {
list-style-type : none ;
padding : 0 ;
}
.icon-list li {
padding-left : 25px ;
position : relative ;
}
.icon-list li i {
position : absolute ;
left : 0 ;
color : #3498db ;
}
در اینجا:
Font Awesome برای نمایش آیکونهای سفارشی در کنار آیتمهای لیست استفاده شده است.
position: relative و position: absolute آیکون را در کنار آیتم قرار میدهند.
انتخاب نوع مناسب لیست: از لیست نامرتب برای موارد بدون ترتیب و از لیست مرتب برای موارد دارای ترتیب استفاده کنید.
ایجاد فاصله مناسب: با استفاده از padding و margin، فاصلههای مناسب بین آیتمها و اطراف لیست ایجاد کنید.
استفاده از آیکونها: افزودن آیکونهای سفارشی یا تصاویر کوچک به آیتمها میتواند ظاهر لیست را جذابتر کند.
تنظیم رنگ و اندازه مناسب: رنگها و اندازهها را به گونهای انتخاب کنید که خوانایی و ظاهر لیستها بهینه شود.
CSS ابزارهای متنوعی برای استایلدهی و طراحی لیستها در اختیار شما قرار میدهد. با استفاده از ویژگیهایی مانند list-style-type، list-style-image و تنظیمات فاصله و رنگ، میتوانید لیستهایی زیبا و خوانا ایجاد کنید که توجه کاربران را جلب کرده و تجربه کاربری بهتری را فراهم میکند. با تمرین و پیادهسازی این نکات، میتوانید ظاهر لیستهای وبسایت خود را بهبود بخشید و طراحی حرفهایتری ارائه دهید.
نظری یافت نشد
آموزش استفاده از تگهای تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب
29م مرداد 1402
مطالعه بیشتر
آموزش تگهای زمان و مکان در HTML: استفاده از time و location در صفحات وب
29م مرداد 1402
مطالعه بیشتر
آموزش ارتباط با سرور و ارسال درخواستهای HTTP با Fetch API در جاوا اسکریپت: راهنمای جامع با مثالها
1م آبان 1403
مطالعه بیشتر
آموزش ساخت یک Todo List با استفاده از DOM و جاوا اسکریپت: راهنمای گام به گام
3م آبان 1403
مطالعه بیشتر
آموزش طراحی و استایلدهی فرمها با CSS: ایجاد فرمهای کاربرپسند و واکنشگرا
18م شهریور 1402
مطالعه بیشتر
استفاده از visibility و opacity در CSS برای مخفیسازی عناصر: راهنمای کامل و کاربردی
11م آبان 1403
مطالعه بیشتر
نصب Node.js و Create React App: شروع پروژههای React.js بهصورت آسان
28م شهریور 1402
مطالعه بیشتر
الگوهای رایج برنامهنویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثالها
1م آبان 1403
مطالعه بیشتر
آموزش ترانزیشنها و انیمیشنهای نرم با CSS: ایجاد افکتهای پویا و واکنشگرا
10م شهریور 1402
مطالعه بیشتر
آموزش تغییر المانهای DOM: ویرایش متن، سبکها و کلاسها در جاوا اسکریپت - راهنمای کامل با مثالها
2م آبان 1403
مطالعه بیشتر
ایجاد Layoutهای واکنشگرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع
11م آبان 1403
مطالعه بیشتر
آموزش تکنیکهای پیشرفته CSS Grid: طراحی ساختارهای پیچیده و واکنشگرا
18م شهریور 1402
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد