html css trikovi kako da stilizujete bulite


Besplatni online kurs web dizajna

Nastavna jedinica: Kako da stilizujete Bulite


Nazad


Kako da stilizujete Bullit-e


Bullit-i kao oznake kod nabrajanja u HTML imaju izgled tačke. Medjutim, uz dodatnu stilizaciju preko stilova odnosno klasa kao dodatni vizuelni efekat možete da podesite da oznake pored nabrjanja budu drugačijeg oblika. Unutar HEAD sekcije se definišu dve klase koje imaju svojtva trougla ili kvadrata (odredjene boje, pozicije itd) i te klase se pozivaju preko SPAN taga koji počinje i zatvara se pre teksta nabrajanja. Drugim rečima, SPAN div tag u se sebi dizajnira oblik (trougao ili pravougaonik) tako da se u Browser-u te iste forme renderuju ispred teksta. Podešavanjem paramtera stilova mogu se pdoesiti boja Bullit-a, dimenzija, položaj u odnosu na tekst itd

Head


<style type="text/css">
.triangle_bullet {   
    content: "";  
    border-color: transparent #EF2625;  
    border-style: solid;  
    border-width: 0.35em 0 0.35em 0.45em;  
    display: block;  
    height: 0;  
    width: 0;  
    left: -1em;  
    top: 1em;  
    position: relative;  
}
.rectangle_bullet {   
    content: "";
 background-color:#0066CC;  
    display: block;  
    height: 5px;  
    width: 5px;  
    left: -1em;  
    top: 0.9em;  
    position: relative;  
} 
</style>

Body


<ul>
    <span class="triangle_bullet"></span> Proizvod 1<br>
    <span class="triangle_bullet"></span> Proizvod 2<br>
    <span class="triangle_bullet"></span> Proizvod 3<br>
</ul>
<ul>
    <span class="rectangle_bullet"></span> Proizvod 4<br>
    <span class="rectangle_bullet"></span> Proizvod 5<br>
    <span class="rectangle_bullet"></span> Proizvod 6<br>
</ul>

Prikaz u Browser-u


    Proizvod 1
    Proizvod 2
    Proizvod 3
    Proizvod 4
    Proizvod 5
    Proizvod 6

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke