X
انجمن برنامه نویسی آموزش CSS

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

ایجاد نمودار با 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>

توجه داشته باشید که در ابتدا ما یک 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>

Print
نظرات بسته شده است.
دی ان ان