- Znaczniki
- Atrybuty
- Style
- Szablony
CSS: Responsywny układ strony
Kurs HTML + CSS
Szablon responsywny
Przykład wykorzystania responsywnego szablonu strony internetowej.
<header> <h1>Kurs HTML + CSS</h1> </header> <section class="row"> <article class="col-3 col-rl-3 menu"> <ul> <li>Znaczniki</li> <li>Atrybuty</li> <li>Style</li> <li>Szablony</li> </ul> </article> <article class="col-6 col-rl-9"> <h2>Szablon responsywny</h2> <p>Przykład wykorzystania responsywnego szablonu strony internetowej.</p> </article> <section class="col-3 col-rl-12"> <aside> <h3>Dlaczego?</h3> <p>Aby strona internetowa była czytelna na wszystkich urządzeniach.</p> <h3>Gdzie?</h3> <p>Dostosowana do urządzeń stacjonarnych, mobilnych, tabletów, telefonów...</p> <h3>Jak?</h3> <p>W zależności od wykrytej szerokości okna przeglądarki zmieniamy szerokość elementów witryny.</p> </aside> </section> </section> <footer> <p>Zmień wielkość okna przeglądarki, żeby zobaczyć jak zachowają się elementy strony.</p> </footer>
* { box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } [class*="col-"] { float: left; padding: 15px; } header { background-color: #F44336; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: #2196F3; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.32); } .menu li:hover { background-color: #4CAF50; } aside { background-color: #2196F3; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.32); } footer { background-color: #4CAF50; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* Dla telefonów komórkowych: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /* Dla tabletów: */ .col-rl-1 {width: 8.33%;} .col-rl-2 {width: 16.66%;} .col-rl-3 {width: 25%;} .col-rl-4 {width: 33.33%;} .col-rl-5 {width: 41.66%;} .col-rl-6 {width: 50%;} .col-rl-7 {width: 58.33%;} .col-rl-8 {width: 66.66%;} .col-rl-9 {width: 75%;} .col-rl-10 {width: 83.33%;} .col-rl-11 {width: 91.66%;} .col-rl-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* Dla komputerów: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }