2010-11-16

Графики посредством html

2010-11-17_0259    Не прибегая к помощи графических редакторов, стандартных программ типа Microsoft Word и Excel, а также без специальных программ, можно делать простые графики посредством возможностей html. Для этого при помощи тега <div>, создаются горизонтальные графики.
Код графика:
..
<div style="float: left; width:45%; height:16px; background-color:#;40699C">&nbsp;</div> <div style="float: none;">&nbsp;&nbsp;45% – HTML</div>
<div style="float: left; width:35%; height:16px; background-color:#4F81BD;">&nbsp;</div><div style="float: none;">&nbsp;&nbsp;35% – сайты</div>
<div style="float: left; width:20%; height:16px; background-color:#AABAD7;">&nbsp;</div><div style="float: none;">&nbsp;&nbsp;20% – программы</div>
    где   float – обтекание графика текстом (или подпись графика), если график слева, то указывается значение left, а если справа – right
             width – ширина полос графика (равна показателям графика в %),
             height – высота графика в пикселях (px), указывайте произвольное число, в зависимости от того, какие по ширине полосы хотите видеть.
            background-color – цвет полосы, может указываться, как в кодах, так и в буквенном написании (см. Таблица цвета)
            &nbsp;&nbsp; – отступ, для того, чтобы график не сливался с подписями,
            45% – HTML, 35% – сайты  - соответственно сами подписи, у вас будут свои.
            Каждая строка начинается с <div style до описания парамтров полоски и заканчивается </div> после ее подписи. это наглядно видно на примере кода.
            Вот что  получилось:                                  
Азбука блоггера
  45% – HTML
  35% – сайты
  20% – программы

Комментариев нет :

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности