Strona główna > Internet Explorer > IE 11 DEV–inspekcja elementów strony–cz.1

IE 11 DEV–inspekcja elementów strony–cz.1

Zaczynam od pustej strony w darmowym edytorze WebMatrix 3

image

dodaje trochę elementów szkieletu, byśmy mieli na czym pracować:

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <header>
            <h1>Cudownie fajna strona internetowa</h1>
        </header>
 
        <nav>
            <ul>
                <li>
                    <a href="index.html">Strona główna</a>
                </li>
                 <li>
                    <a href="autor.html">Autor</a>
                </li>
            </ul>
        </nav>
 
        <section>
            <article>
                <header>
                    <h3>Tytuł 1</h3>
                </header>
                <div>
                    <p>Zawartość artykułu</p>
                </div>
                <footer>
                    <p>Autor: Marcin Borecki</p>
                </footer>
            </article>
            <article>
                <header>
                    <h3>Tytuł 2</h3>
                </header>
                <div>
                    <p>Zawartość artykułu</p>
                </div>
                <footer>
                    <p>Autor: Marcin Borecki</p>
                </footer>
            </article>
        </section>
        
        <footer>
            <p>Stworzone w 2013 roku przez Marcina B.</p>
        </footer>
    </body>
</html>

uruchamiamy wybierać RUN (górna lewa strona belki z przyciskami).

image

wybieramy F12

image

zostajemy na pierwszej zakładce I wybieramy ikonkę obok napisu DOM Explorer – ikona ta włącza tryb inspekcji, który pozwala na “złapanie” dowolnego elementu strony i sprawdzeniu go w oknie kodu

image

w tym wypadku złapałem link “Strona główna”, to co możemy zaobserwować to:

  • kod automatycznie znawigował się do miejsca gdzie w kodzie zdefiniowaliśmy link
  • poniżej dostaliśmy ścieżkę do tego elementu, od html->body->nav->ul->li…
  • dostaliśmy podgląd podłączonego stylu – tutaj akurat jest pokazany jego brak

 

Wróćmy do okna kodu i zmieńmy styl tego linku:

image

po czym odpalamy

image

I widzimy po prawej stronie w podglądzie stylu, dany element ma kolor czerwony!

Dodatkowo możemy wpływać na odległości I grubości poszczególnych elementów testując przy okazji układ rzeczy na stronie – mając zaznaczony dowolny element przejdźmy na zakładkę Layout I wpiszmy wartości np: do Padding i / lub Margin i obserwujmy zmiany:

image

Zmiany są dokonywane zarówno w stylu co widać w kodzie jak też kolorem mamy jasną interpretację tego która właściwość (margin/padding) powoduje jakie rozsunięcie (kolor ramki w zakładce Layout jest tożsamy z kolorem na stronie).

  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: