INF.03.drill.1 – VS Code + html + css

przez
PHP JS

Pierwsze rozwiązanie, to to sugerowane przez autora zadania. Bazuje ono na dość starym mechanizmie FLOAT (bez dodatkowych div-ów dla kolumn)

WERSJA A index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fryzjerstwo</title>
    <link rel="stylesheet" href="stylA.css">
</head>
<body>
    <div>
        <section id="lewy1" class="lewy">
            <h1><a href="index.html">SALON FRYZJERSKI</a></h1>
        </section>
        <section id="prawy1" class="prawy">
            <h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
            <table>
                <tr><th>Długość włosów</th><th>Cena</th></tr>
                <tr><td>Krótkie</td><td>25</td></tr>
                <tr><td>Średnie</td><td>30</td></tr>
                <tr><td>Półdługie</td><td>40</td></tr>
                <tr><td>Długie</td><td>50</td></tr>
            </table>
        </section>
        <section id="lewy2" class="lewy">
            <img src="obraz2.jpg" alt="Strzyżenie">
        </section>
        <section id="prawy2" class="prawy">
            <img src="obraz1.jpg" alt="Fryzjerka">
        </section>
        <section id="lewy3" class="lewy">
            <p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
            <h4>Kontakt: 444 555 666</h4>
        </section>
        <section id="stopka">
            <p>Autor:1234567890</p>
        </section>
    </div>
</body>
</html>

stylA.css

*{
    font-family: Garamond;
    text-align: center;
}
.lewy{
    width: 72%;
    float: left; /* przesuwa element maksymalnie w lewo, */
                 /* a kolejne elementy będą się ustawiać obok niego (jeśli jest miejsce).*/
                 /* ELEMENTY NIE USTAWIĄ SIĘ POPRAWNIE PRZY ZŁEJ KOLEJNOŚCI W HTML */
}
.prawy{
    background-color: #BCAAA4;
    color: #795548;
    height: 400px;
    width: 28%;
    float: right; /* przesuwa element maksymalnie w prawo, */
                  /* a kolejne elementy będą się ustawiać obok niego (jeśli jest miejsce).*/
                  /* ELEMENTY NIE USTAWIĄ SIĘ POPRAWNIE PRZY ZŁEJ KOLEJNOŚCI W HTML */
}
#lewy1{
    background-color: #795548;
    font-size: 170%;
}
#lewy2{
    height:400px;
}
#stopka{
    background-color: #795548;
    color: white;
    padding: 20px;
    clear: both; /* element z float zostaje „wyjęty” z normalnego przepływu dokumentu*/
                 /* bez clear stopka weszłaby pod elementy z float right i left*/
                 /* bo ich nie ma w normalnym przepływie */
}
table{
    margin:auto;
    width:80%;
    border: solid 1px #795548;
}
tr:hover{
    background-color: Sienna;
    color: White;
}
/* tu brakuje jeszcze kilku mniej ważnych styli z zadania */

WERSJA B index.html

To trochę inna wersja również bazująca na FLOAT, ale dodająca divy dla każdej z kolumn.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fryzjerstwo</title>
    <link rel="stylesheet" href="stylB.css">
</head>
<body>
    <div>
        <div id="kolumna_szeroka">
            <section id="lewy1" >
                <h1><a href="index.html">SALON FRYZJERSKI</a></h1>
            </section>
            <section id="lewy2" >
                <img src="obraz2.jpg" alt="Strzyżenie">
            </section>
            <section id="lewy3" >
                <p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
                <h4>Kontakt: 444 555 666</h4>
            </section>
        </div>
        <div id="kolumna_waska">
            <section id="prawy1" class="prawy">
                <h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
                <table>
                    <tr><th>Długość włosów</th><th>Cena</th></tr>
                    <tr><td>Krótkie</td><td>25</td></tr>
                    <tr><td>Średnie</td><td>30</td></tr>
                    <tr><td>Półdługie</td><td>40</td></tr>
                    <tr><td>Długie</td><td>50</td></tr>
                </table>
            </section>
            <section id="prawy2" class="prawy">
                <img src="obraz1.jpg" alt="Fryzjerka">
            </section>
        </div>
        <section id="stopka">
            <p>Autor:1234567890</p>
        </section>
    </div>
</body>
</html>

stylB.css

*{
    font-family: Garamond;
    text-align: center;
}
#kolumna_szeroka{       /* dodatkowe pudełka kolumn porządkują układ */
    width: 72%;
    float: left; 
}
#kolumna_waska{
    width: 28%;
    float: right; 
}
.prawy{
    height: 400px;
    background-color: #BCAAA4;
    color: #795548;
    padding: 1px;       /*to rozwiązuje problem nie wypełniania całego diva tłem*/
}
#lewy1{
    background-color: #795548;
    font-size: 170%;
    padding:1px;       /*to rozwiązuje problem nie wypełniania całego diva tłem*/
}
#lewy2{
    height:400px;
}
#stopka{
    background-color: #795548;
    color: white;
    padding: 20px;
    clear: both;
}
table{
    margin:auto;
    width:80%;
    border: solid 1px #795548;
}
tr:hover{
    background-color: Sienna;
    color: White;
}
/* tu brakuje jeszcze kilku mniej ważnych styli z zadania */

WERSJA C index.html

To wersja bazująca na FLEX, nowocześniejsza z responsywnością gratis.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fryzjerstwo</title>
    <link rel="stylesheet" href="stylC.css">
</head>
<body>
    <div id="kolumna_szeroka">
        <section id="lewy1" >
            <h1><a href="index.html">SALON FRYZJERSKI</a></h1>
        </section>
        <section id="lewy2" >
            <img src="obraz2.jpg" alt="Strzyżenie">
        </section>
        <section id="lewy3" >
            <p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
            <h4>Kontakt: 444 555 666</h4>
        </section>
    </div>
    <div id="kolumna_waska">
        <section id="prawy1" class="prawy">
            <h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
            <table>
                <tr><th>Długość włosów</th><th>Cena</th></tr>
                <tr><td>Krótkie</td><td>25</td></tr>
                <tr><td>Średnie</td><td>30</td></tr>
                <tr><td>Półdługie</td><td>40</td></tr>
                <tr><td>Długie</td><td>50</td></tr>
            </table>
        </section>
        <section id="prawy2" class="prawy">
            <img src="obraz1.jpg" alt="Fryzjerka">
        </section>
    </div>
    <section id="stopka">
        <p>Autor:1234567890</p>
    </section>
</body>
</html>

stylC.css

*{
    font-family: Garamond;
    text-align: center;
}
body{
    display: flex;    /* zmienia body w kontener flex */
    flex-wrap: wrap;  /* pozwala elementom zawijać się do nowego wiersza, jeśli brakuje miejsca */
                      /* tutaj flex-direction: row; jest zbędny bo to domyślna wartość */
}
#kolumna_szeroka{
    flex: 1 0 72%;  /* 72% - szer. bazowa, 1 - może być większy, 0 - nie może być mniejszy */
    display: flex;  /* zawartość tego diva też poukładamy za pomoca flex */
    flex-direction: column; /* ale tym razem zamiast row będzie column */
}
#kolumna_waska{
    flex: 1 0 28%;
    display: flex;
    flex-direction: column;
}
.prawy{
    background-color: #BCAAA4;
    color: #795548;
    height: 400px;
}
#lewy1{
    background-color: #795548;
    font-size: 170%;
}
#lewy2{
    height:400px;
}
#stopka{
    background-color: #795548;
    color: white;
    padding: 20px;
    width:100%;
}
table{
    margin:auto;
    width:80%;
    border: solid 1px #795548;
}
tr:hover{
    background-color: Sienna;
    color: White;
}
/* tu brakuje jeszcze kilku mniej ważnych styli z zadania */

Dotychczas na egzamin wystarczał ten pierwszy wariant z FLOAT.
Do współczesnych zastosowań łatwiej używać FLEX.

Strony: 1 2

Twój komentarz

Zapisz moje dane, adres e-mail i witrynę w przeglądarce aby wypełnić dane podczas pisania kolejnych komentarzy.