آموزش foundation-پنل ها
پنل ها
یک پنل، درواقع یک جعبه است که پس زمینه ی آن خاکستری است و دارای مقداری padding به دور محتوای خود می باشد و به وسیله ی کلاس panel. ایجاد می شود:
پنل های رنگی
کلاس callout. رنگ پنل را به آبی روشن تغییر می دهد:
مثال
<div class="panel callout">
<h3>Heading</h3>
<p>Some text..</p>
</div>
<h3>Heading</h3>
<p>Some text..</p>
</div>
نتیجه:
پنل ها با گوشه های گرد شده
کلاس radius. گوشه های گرد شده را برای پنل به ارمغان می آورد:
مثال
<div class="panel radius">
<h3>Heading</h3>
<p>Some text..</p>
</div>
<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>
.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>
نتیجه:
- نوشته شده توسط احسان عباسی
- بازدید: 3307
