آموزش ساخت نمودار درصد پیشرفت با CSS

سلام

در این مطلب ، آموزش ساده و در عین حال کاربردی رو با هم میخوایم یاد بگیریم که چگونه یه نمودار ساده پیشرفت با کدهای HTML و CSS طراحی کنیم .

• کدهای CSS :

<style type="text/css">

.container{
 width:300px;
 font-family: Tahoma;
 float:right;
 }

.record{
 float: right;
 width: 100%;
 border: 1px solid #ccc;
 background-color: #f0f0f0;
 margin-bottom: 2px;
 -moz-border-radius: 0px 10px 10px 0px;
 -moz-border-radius: 0px 10px 10px 0px;
 }

.bar {
 background-color: blue;
 float: right;
 clear: left;
 height: 30px;
 }

.bar span{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 float: left;
 margin-left: 5px;
 margin-top: 7px;
 }

.p {
padding-top: 3px;
float: left;
color: #6D8591;
clear: left;
font-size: 12px;
font-weight: bold;
height: 25px;
}

.p span{
 font-size: 12px;
 font-weight: bold;
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 }

</style>

• کدهای HTML :

<div class="container">
 <div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
 <div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
 <div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
 <div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>

تمام شد 🙂

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

موفق باشید .