سبد خرید (0)

تبلیغات

آموزش foundation-پنل ها

پنل ها

یک پنل، درواقع یک جعبه است که پس زمینه ی آن خاکستری است و دارای مقداری padding به دور محتوای خود می باشد و به وسیله ی کلاس panel. ایجاد می شود:

مثال

<div class="panel">
  <h3>Heading</h3>
  <p>Some text..</p>
</div>

نتیجه:

خودتان امتحان کنید »

پنل های رنگی

کلاس callout. رنگ پنل را به آبی روشن تغییر می دهد: 

مثال

<div class="panel callout">
  <h3>Heading</h3>
  <p>Some text..</p>
</div>

نتیجه:

خودتان امتحان کنید »

پنل ها با گوشه های گرد شده

کلاس radius. گوشه های گرد شده را برای پنل به ارمغان می آورد: 

مثال

<div class="panel radius">
  <h3>Heading</h3>
  <p>Some text..</p>
</div>

نتیجه:

خودتان امتحان کنید »

پنل های شخصی سازی شده

برای شخصی سازی کردن پنل های خود از CSS استفاده کنید. در این مثال ما تلاش کرده ایم تا پنل را به شکل یک کارت در بیاوریم: 

مثال

<style>
.panel {
    padding: 0;
    border: none;
    width: 50%;
}
div.container {
    text-align: center;
    padding: 15px;
    margin-top: 20px;
}
img {
    width: 100%;
}
</style>

<div class="panel">
  <img src="paris.jpg" alt="Cinque Terre"> 
  <div class="container">
    <h4>Paris</h4>
    <p>Je t'aime tout le temps</p>
  </div>
</div>

نتیجه:

خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی