


Курс
Верстка адаптивной CSS галереи
В этом курсе мы разберем как сверстать адаптивную css галерею. Также познакомимся с Flexbox.
Верстка адаптивной CSS галереи с элементами разной высоты
В этом уроке мы рассмотрим еще одно тестовое задание на смекалку молодого верстальщика/front-end разработчика, а именно сверстаем адаптивную галерею с элементами разной высоты.
r
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Галерея на CSS</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <section id="photo-wall"> <ul> <li> <a href=""> <img src="img/1.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/2.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/3.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/4.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/5.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/6.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/7.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/8.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/9.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> <li> <a href=""> <img src="img/10.jpg" alt="картинка"> <h3>Описание</h3> <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p> </a> </li> </ul> </section> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
.container { width: 80%; margin: 30px auto; overflow: hidden; } .container ul li { list-style:none; float: left; font: 10px/1.5 Verdana, Helvetica, Sans-serif; width: 16%; margin: 2% 2% 40px 2%; } .container ul li a { color: #5d5f5d; } .container ul li a img { max-width: 100%; } /* 100% - (5 * 4%) = 80% */ /* 80%/5 = 16% */ /* 100% - (4 * 4%) = 84% */ /* 80%/4 = 21% */ /* Media Queries */ @media only screen and (min-width : 941px) { .container ul li:nth-child(5n+1){ clear:left; } } @media only screen and (min-width: 721px ) and (max-width : 941px) { .container ul li { width: 21%; } .container ul li:nth-child(4n+1){ clear:left; } } /* 100% - (3 * 4%) = 88% */ /* 88%/3 = 29.33333% */ @media only screen and (min-width: 531px ) and (max-width : 721px) { .container ul li { width: 29.33333% } .container ul li:nth-child(3n+1){ clear:left; } } /* 100% - (2 * 4%) = 92% */ /* 92%/2 = 46% */ @media only screen and (min-width: 320px ) and (max-width : 531px) { .container ul li { width: 46% } .container ul li:nth-child(2n+1){ clear:left; } } /* 100% - 4% = 96% */ /* 96% */ @media only screen and (max-width : 320px) { .container ul li { width: 96% } } |
Оставь комментарий!
2 thoughts on “Верстка адаптивной CSS галереи с элементами разной высоты”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Рекомендуемые курсы
Ще один цікавий урок.
интересная заморочка! так это как понял я, самое главное знать, где у тебя в написанном расположено то, что ты хочешь видоизменить… улётно то как)