Задаем имена областям css сетки в grid | CSS для Профи

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 พ.ย. 2024

ความคิดเห็น • 32

  • @versti8996
    @versti8996 3 ปีที่แล้ว +6

    ВАУ!! на 11 минуте кокнуло) очень интересно и понятно!

  • @Skilling27
    @Skilling27 4 ปีที่แล้ว +5

    Спасибо огромное за ваш труд, Андрей! :)

  • @ta_ti
    @ta_ti 4 ปีที่แล้ว +2

    уже с самого начала хотела написать коммент, что этот видеоурок очень интересный. На 10:46 пишу "ВАУ"!!!))) Очень классные и мегаполезные уроки! Андрею огромный респект за них!

  • @tea_and_teapot
    @tea_and_teapot 4 ปีที่แล้ว +2

    Spasibo Andrey .Chetko objyasnyaete, Ya sleju za vashey lentoi, stavly laiki :)

  • @ta_ti
    @ta_ti 4 ปีที่แล้ว

    в домашке поместила среднюю часть в отдельный контейнер и пришлось помучаться. Вопрос решен, спасибо за знания ^-^

  • @Art-M
    @Art-M 3 ปีที่แล้ว

    Супер, дякую!

  • @skywatcher6
    @skywatcher6 2 ปีที่แล้ว

    Супер!

  • @ruslanvybornov1237
    @ruslanvybornov1237 4 ปีที่แล้ว +2

    Спасибо огромное за уроки
    ДЗ
    HTML





    Dz-Grid2


    Header
    Main content
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5


    PR and eth

    Copyright

    CSS
    body{
    display: grid;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    font-style: italic;
    grid-template-areas: "header header header"
    "aside1 article aside2"
    "aside1 article aside2"
    "aside1 article aside2"
    "aside1 article aside2"
    "aside1 article aside2"
    "footer footer footer"
    }
    header, article, .aside1, .aside2, footer{
    border: 1px solid green;
    }
    header{
    grid-area: header;
    }
    article{
    grid-area: article;
    }
    .aside1{
    grid-area: aside1;
    }
    .aside2{
    grid-area: aside2;
    }
    footer{
    grid-area: footer;
    }

    • @ОлегСирош-ъ4ъ
      @ОлегСирош-ъ4ъ 4 ปีที่แล้ว

      aside1 и aside2 должны быть в два раза меньше чем article

  • @k..
    @k.. 5 ปีที่แล้ว +2

    Лайк

  • @dieselpower1252
    @dieselpower1252 4 ปีที่แล้ว

    В данном видеоуроке на 6:55 в файле css в 7 и 8 строках опечатки, если я правильно понимаю. Так как у нас нет в коде html тегов "aside1" и "aside2", то в 7 и 8 строках файла css правильнее было бы указать теги "aside" или их классы ".as1" и ".as2"? Или разницы нет?

  • @SYL1982
    @SYL1982 4 ปีที่แล้ว

    Спасибо!

  • @sergeyshevirev1642
    @sergeyshevirev1642 4 ปีที่แล้ว

    Спасибо

  • @SuperBerence
    @SuperBerence 5 ปีที่แล้ว

    мега полезные уроки по книжке

    • @andrievskii
      @andrievskii  5 ปีที่แล้ว +1

      Для тех, кто даже книжку осилить не может

    • @SuperBerence
      @SuperBerence 5 ปีที่แล้ว

      @@andrievskii ну зачем ты так? Я ее один раз прочитал и теперь мне интересно посмотреть ее в таком формате

    • @BilliK1000
      @BilliK1000 5 ปีที่แล้ว

      где книжку найти? спс

    • @SuperBerence
      @SuperBerence 5 ปีที่แล้ว

      @@BilliK1000 купить или скачать

    • @BilliK1000
      @BilliK1000 5 ปีที่แล้ว

      Link please )))

  • @evgeniy3465
    @evgeniy3465 4 ปีที่แล้ว

    Спасибо за урок.
    Домашка.
    Только учусь.
    Код кривоватый.
    Скижете, что нужно исправить, чтобы сделать код меньше?
    HTML:


    Д/З


    Шапка сайта(логотип и все такое)


    Ссылка 1
    Ссылка 2
    Ссылка 3
    Ссылка 4
    Ссылка 5


    Основное содержание


    Реклама и
    все такое


    Блок копирайта


    CSS:
    .container {
    display: grid;
    background: #fcfccf;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 60px;
    text-align: center;
    color: black;
    font-size: 2em;
    height: 666px;
    font-weight: bold;
    font-style: sans-serif;
    grid-template-areas: "header header header header"
    "aside1 article article aside2"
    "aside1 article article aside2"
    "footer footer footer footer";
    }
    header, nav, article, .as1,.as2, footer {
    border: 1px solid black;
    }
    header {
    grid-area: header;
    }
    header > p{
    margin-top: 45px;
    }
    article{
    grid-area: article;
    }
    article > p{
    margin-top: 160px;
    }
    .as1 {
    grid-area: aside1;
    position: relative;
    }
    .as1 > p {
    margin-top: 40px;
    }
    .as2 {
    grid-area: aside2;
    }
    .as2 > p {
    margin-top: 140px;
    }
    footer {
    grid-area: footer;
    }
    footer > p {
    margin-top: 30px;
    }

  • @НикитаКовалец-ю1щ
    @НикитаКовалец-ю1щ 4 ปีที่แล้ว +2

    Здравствуйте, гриды больше нравятся чем флексы) уроки отличные спасибо за них) надеюсь кто нибудь проверит у меня ДЗ)


    grids


    header




    drota
    drota1
    drota2



    reklama


    footer


    CSS


    grids


    header




    drota
    drota1
    drota2



    reklama


    footer

  • @misiraskerov525
    @misiraskerov525 5 ปีที่แล้ว

    как сделать соотношение article к aside 2/1?

    • @andrievskii
      @andrievskii  5 ปีที่แล้ว +2

      Создать три колонки и двум задать артикле, а эсайду одну. А вообще я все это в 10 видео этого плейлиста показывал

  • @Professor_Ro
    @Professor_Ro 4 ปีที่แล้ว

    так в этих блоках остается название этих тегов, как их убрать потом и заполнить своим контентом?

    • @_Fantom_.
      @_Fantom_. 3 ปีที่แล้ว

      Просто убираешь и заполняешь своим контентом )

  • @siroshserg
    @siroshserg 4 ปีที่แล้ว +1

    Я не могу понять, зачем писать grid-area aside1; grid-area aside2; если при их отсутствии ничего не меняется?

  • @miksa8875
    @miksa8875 3 ปีที่แล้ว +1

    0 дизлайков)

    • @andrievskii
      @andrievskii  3 ปีที่แล้ว

      Ну так старался