آموزش ساخت جعبه با css (برای پست ها یا دسته بندی ها)
سلام
در این پست میخوایم یاد بگیریم که چگونه یه جعبه با css بسازیم که از اون بتونیم مثلا برای پست ها یا دسته بندی هامون استفاده کنیم .
خب بریم سراغ آموزش :
- کدهای css :
|
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ |
<style type="text/css"> body{ font-family:Tahoma; } .box{ width: ۱۵۰px; height: ۴۰px; float: left; border:۲px solid #ccc; -moz-border-radius: ۶px; -webkit-border-radius: ۶px; text-align: center; padding: ۵px; font-size: ۱۴px; font-weight: bold; background-color: #f0f0f0; color: #۸۸۸; } p.new{ width: ۱۲۶px; color: white; background-color: #۳۱۹۰A5; -moz-border-radius: ۶px; -webkit-border-radius: ۶px; padding: ۱px; text-align: center; margin-top: ۵px; margin-left: ۱۲px; font-weight: ۱۰۰; font-size: ۱۱px; color: #F0F0F0; direction:rtl; } </style> |
- کد HTML :
|
۱ ۲ ۳ ۴ ۵ ۶ |
<div class="box"> Beporsam.ir <p class="new"> ۳ پست جدید </p> </div> |
تمام شد 🙂
در پایان سورس رو میتونید دانلود کنید .
موفق باشید .
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید