ایجاد نمودار با 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
سایر مقالات مرتبط :
- برد هوشمند چیست؟ + نحوه استفاده از وایت برد هوشمند
- راهنمای خرید عمده لوازم جانبی کامپیوتر
- افزایش سرعت سایت های شلوغ
- معرفی دستگاه ماینر واتس ماینر Whatsminer M32 68Th
- وب سرور چیست؛ هر آنچه باید از وب سرور بدانید!
- روش کار با php unit test
- برنامه نویسی اندروید و همه چیز درباره آن
- بهترین مدل مانتو شلوار اداری برای مصاحبه شغلی
- آفر ویژه تورتایلند 7شب را در لحظه آخر ببینید
- آشنایی با بهترین نرم افزار CRM
- بررسی بروکرهای کارگزاریهای آلپاری فارکس و فیبوگروپ
- نکات کاربردی در مورد طراحی ویلا