سلام .
مثلا فرض کنید منوی کنار سایت را به صورت لیست ساخته باشیم که کدهای آن به صورت زیر است :
همان طور که مشاهده می کنید برای لیست یک class با نام sidebar2_menu تعریف کرده ایم . حالا توی کدهای CSS باید اینگونه به این class ارجاع بدهیم :
کدها رو کامل نوشتم اگه بخشی رو لازم ندارید می تونید حذفش کنید . حالا بخش های مهم رو توضیح میدم :
کد list-style:none برای این است که در کنار لیست ، عدد یا شکلی نمایش داده نشود .
کد text-decoration:none برای این است که زیر لینک ها ، خط نمایش داده نشود .
کد border-style
olid ابتدا نوع کادر را تعیین کرده که به صورت خط پیوسته است .
کد border-width:1px میزان ضخامت خط کادر را تعیین کرده است .
کد border-radius:7px 7px 7px 7px میزان انحنای گوشه های کادر را تعیین کرده که همانی است که شما لازم دارید . دقت کنید که 4 عدد برای 4 گوشه کادر نوشته شده است .
قسمت هایی که برای sidebar2_menu a:hover نوشته شده است برای نحوه تغییر ، هنگام قرار گرفتن موس بر روی قسمت های مختلف لیست می باشد . مثلا اگر موس روی یک قسمت از لیست قرار بگیرد آنگاه رنگ پس زمینه آن تغییر کند .
اگر بخشی از کدها را متوجه نشدید بپرسید تا توضیح بدم .
با توجه به مثال بالا ، اگه خواستید دور یک پاراگراف کادر با گوشه های گرد بسازید ، برای آن class بسازید و آنگاه از border-style ، border-width و border-radius مطابق میلتان استفاده کنید .
مثلا فرض کنید منوی کنار سایت را به صورت لیست ساخته باشیم که کدهای آن به صورت زیر است :
کد:
<ul class="sidebar2_menu">
<li><a href="matlab/index.php">آموزش متلب</a></li>
<li><a href="html/index.php">آموزش html</a></li>
</ul>همان طور که مشاهده می کنید برای لیست یک class با نام sidebar2_menu تعریف کرده ایم . حالا توی کدهای CSS باید اینگونه به این class ارجاع بدهیم :
کد:
ul.sidebar2_menu {
list-style:none;
}
ul.sidebar2_menu li a {
text-decoration:none;
display:inline-block;
width:190px;
background-color:#0FF;
padding:2px;
padding-right:4px;
border-style:solid;
border-width:1px;
border-radius:7px 7px 7px 7px;
}
ul.sidebar2_menu li {
padding-left:0px;
padding-right:0px;
padding-top:3px;
}
.sidebar2_menu a:hover {
background-color:#0F6;
border-radius:7px 7px 7px 7px;
}کدها رو کامل نوشتم اگه بخشی رو لازم ندارید می تونید حذفش کنید . حالا بخش های مهم رو توضیح میدم :
کد list-style:none برای این است که در کنار لیست ، عدد یا شکلی نمایش داده نشود .
کد text-decoration:none برای این است که زیر لینک ها ، خط نمایش داده نشود .
کد border-style
olid ابتدا نوع کادر را تعیین کرده که به صورت خط پیوسته است .کد border-width:1px میزان ضخامت خط کادر را تعیین کرده است .
کد border-radius:7px 7px 7px 7px میزان انحنای گوشه های کادر را تعیین کرده که همانی است که شما لازم دارید . دقت کنید که 4 عدد برای 4 گوشه کادر نوشته شده است .
قسمت هایی که برای sidebar2_menu a:hover نوشته شده است برای نحوه تغییر ، هنگام قرار گرفتن موس بر روی قسمت های مختلف لیست می باشد . مثلا اگر موس روی یک قسمت از لیست قرار بگیرد آنگاه رنگ پس زمینه آن تغییر کند .
اگر بخشی از کدها را متوجه نشدید بپرسید تا توضیح بدم .
با توجه به مثال بالا ، اگه خواستید دور یک پاراگراف کادر با گوشه های گرد بسازید ، برای آن class بسازید و آنگاه از border-style ، border-width و border-radius مطابق میلتان استفاده کنید .
لطفا برای درج کد، از دکمه مخصوص درج کد در ادیتور انجمن استفاده کنید.
در مورد برنامه نویسی، مدیران تنها راهنمایی می کنند و نوشتن برنامه نهایی، به عهده کاربران می باشد (اینجا محلی برای یادگیری است، نه سفارش کدنویسی).
کاربران باید ابتدا خود به خطایابی برنامه بپردازند، نه اینکه به محض دیدن خطا، کدها را در انجمن، copy و paste کرده و از مدیران انتظار بررسی داشته باشند.
