 |
Autorius: |
ifreal.com |
Data: |
2005-03-28 13:21:56 |
| Lygis: |
 |
Pamatė: |
3428 |
| Versija: |
- |
|
|
Šitoje pamokoje išmoksime, kaip CSS pagalba nupiešti vieną ar
kitą paveiksliuką. Norint tai padaryti, turite pasisemti kantrybės ir
kruopštumo.
Pasirinkome paprastą GIF veiduką, kad galima būtų nesunkiai
jį atkartoti. Paveiksliuke yra 22 eilutės ir 21 stulpelis. Vadinas, kad nupiešti paveiksliuką, turėsime sukurti 462 taškus. Originalas:
Pradžiai, turime aprašyti paveiksliuko ir taško dydžius
(rėmus). Juos įrašykime tarp <head> ir </head>.
<style type="text/css">
div.pix
{
float: left;
height: 2px;
width: 2px;
margin: 0px;
padding: 0px;
font-size: 0px;
line-height: 0px;
}
div.box
{
width: 42px;
height: 44px;
}
</style>
Tarp <body> ir </body> žymenų, sukuriame paveiksliuko
rėmus, tarp kurių ir rašysime spalvotus taškus:
<div class=box> </div>
Kaip jau supratote, taškams naudosime DIV žymenis. Kad juos nuspalvint
viena ar kita spalva naudosime atributą style="". Pvz.:
<div style="background: #FFFFFF" class="pix"></div>
Taigi, nupieškime įvairių spalvų eilutę:
<div style="background: #EE0000" class="pix"></div>
<div style="background: #000000" class="pix"></div>
<div style="background: #CCCCCC" class="pix"></div>
<div style="background: #00EE00" class="pix"></div>
<div style="background: #0000EE" class="pix"></div>
Demo:
Toliau tęskite darbą, aprašydami kiekvieną paveiksliuko px. Mes gavome štai
tokį nikštuką:
Paveiksliuko kodą, galite pamatyti
čia.
Piešiam su CSS