آموزش ساخت جعبه با css (برای پست ها یا دسته بندی ها)

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش ساخت جعبه با css (برای پست ها یا دسته بندی ها)

سلام

در این پست میخوایم یاد بگیریم که چگونه یه جعبه با css بسازیم که از اون بتونیم مثلا برای پست ها یا دسته بندی هامون استفاده کنیم .

update box for category or posts

خب بریم سراغ آموزش :

کدهای css :

<style type="text/css">
 body{
   font-family:Tahoma;
 }

 .box{
   width: 150px;
   height: 40px;
   float: left;
   border:2px solid #ccc;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   text-align: center;
   padding: 5px;
   font-size: 14px;
   font-weight: bold;
   background-color: #f0f0f0;
   color: #888;
}

p.new{
   width: 126px;
   color: white;
   background-color: #3190A5;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   padding: 1px;
   text-align: center;
   margin-top: 5px;
   margin-left: 12px;
   font-weight: 100;
   font-size: 11px;
   color: #F0F0F0;
   direction:rtl;
}
 </style>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

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>

Beporsam.ir

۳ پست جدید

</p>

</div>

مطلب پیشنهادی: آموزش هارد ریست SAMSUNG Galaxy A21s

تمام شد 🙂

در پایان سورس رو میتونید دانلود کنید .

موفق باشید .