ایجاد نمودار با Css

در این قسمت از آموزش css ومقالات طراحی سایت می خواهیم ایجاد یک نمودار برای محتوای پویا را با استفاده از css توضیح دهیم.

توجه داشته باشید که کدهای پایین را در قسمت head از صفحه html خود وارد کنید.(یا اینکه این کدها رو به فایل css خود وارد کنید.) برای ایجاد این نوع نموادرها در طراحی سایت می توانید از دستورات زیر استفاده کنید:

<style>

.container{
width:300px;
font-family: Arial;
}

.record{
float: left;
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: transparent url(gradient.png) repeat-x top left;
float: left;
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: right;
color: #6D8591;
clear: right;
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><br><br>

توجه داشته باشید که در ابتدا ما یک container ایجاد میکنیم که نمودار و تمام رکوردهای ما را نگه خواهد داشت.عرض اون میتواند با توجه به نیاز شما تغییر کند.در اینجا ما عرض رکوردها رو به درصد تعیین کرده ایم.شما میتونید از این نمودار زیبا در محتوای پویا استفاده کنید.(در پیشرفت پروژه, میزان فعالیت ها در سایت,…, هر آنچه که در یک سایت نیاز به نمودار دارد.)

کدهای html که توضیح داده شد و باید در فایل 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>

منبع: sitedesign-co.com