Ocena użytkowników: 5 / 5

Gwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywna
 

Dzięki prostemu przykładowi dowiemy się jak umieścić logo Facebooka na stronie internetowej. Skorzystamy w przykładzie z pliku facebook-icon.png, pobranego ze strony internetowej http://www.iconarchive.com. Końcowy rezultat przykładu (Listing 1, Listing 2), został przedstawiony na rysunku 1.

 

Listing 1. Zawartość pliku index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Facebook na strone html</title>
<link href="/style.css" media="all" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="facebook-box">
    <a href="#" title="Facebook na strone html" target="_blank">
        <img alt="Facebook na strone html" src="/facebook-icon.png" />
    </a>
</div>
</body>
</html>

 

Listing 2. Fragment pliku style.css

...
div#facebook-box {
    /* Tło ustawione na biały kolor. */
    background-color: #FFFFFF;
    /* Wysoka liczba, aby inne warstwy zawsze były niżej. */
    z-index: 1982;
    /* Wysokość pliku PNG. */
    height: 48px;
    /* Szerokość pliku PNG. */
    width: 48px;
    /* Plik zawsze będzie widoczny na stronie 100 pikseli od góry, */
    /* nawet podczas przewijania strony. */
    position: absolute;
    /* Logo umieszczone przy lewej krawędzi przeglądarki, 0 pikseli. */
    left: 0px;
    /* Logo umieszczone 100 pikseli od góry w oknie przeglądarki. */
    top: 100px;
    /* Margines wewnętrzny usunięty. */
    padding:0;
    /* Margines zewnętrzny usunięty. */
    margin:0;
    /* Zaokrąglenie rogów obramowania zgodnie z plikiem PNG. */
    border-top-right-radius: 12px;
    border-bottom-right-radius:12px;
    /* Kolor pobrany z pliku PNG. */
    border:1px solid #2489DB;
}

 

Logo Facebook na stronie internetowej Rys. 1. Logo Facebook na stronie internetowej

 

Materiały do artykułu można znaleźć w pliku logo-facebook-na-stronie.zip – kodowanie plików tekstowych UTF-8, znaki końca linii (Unix). Plik PNG nie został umieszczony w pliku zip, należy go pobrać ze strony http://www.iconarchive.com/.

 

Wybrane książki: 

Książki Helion

Promocja dnia

REKLAMA

Tagi - Popularne