Report
-
Обсуждения
-
Вы отучились на бухгалтера или программиста? Почему спрашиваю. Я финансист, бухгалтер. Естественно, в свое время отучился на курсах 1С, но как экономист. Поэтому могу помочь с развитием именно в этом направлении, так как опыт огромный. -
Всем привет.Не так давно начал изучать верстку.И кароче захотел создать слайдер на основе html css без js. Застрял булеты работают и стрелки также но только стрелки становяться видимы когда первый раз нажал на булет.До этого их никак немогу настроить. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .wrapper{ width: 700px; height: 400px; margin:0 auto; border:5px solid green; border-radius: 20px; overflow: hidden; position: relative; } .container{ width: 600px; height: 300px; border: 5px solid green; border-radius: 20px; margin: 20px auto; } .slider__items{ display: none; } .bullets{ display: flex; position: absolute; left:100px; bottom:30px; } .bullets__items{ width: 50px; height: 15px; border:2px solid green; border-radius: 20px; background-color: lightgreen; margin: 0 20px; } .images{ display: flex; } .images__items{ width: 600px; height: 300px; border-radius: 20px; margin-right: 55px; } .arrows__prev{ background-image: url(./img/next.png); background-size: contain; width: 40px; height: 40px; position: absolute; top:150px; left: 2px; } #slide1:checked ~ .images .image1{ margin-left: 0; } #slide2:checked ~ .images .image2{ margin-left: -655px; } #slide3:checked ~ .images .image3{ margin-left: -1310px; } #slide4:checked ~ .images .image4{ margin-left: -1965px; } #slide5:checked ~ .images .image5{ margin-left: -2620px; } #slide1:checked ~ .arrow__next .img2, #slide2:checked ~ .arrow__next .img3, #slide3:checked ~ .arrow__next .img4, #slide4:checked ~ .arrow__next .img5, #slide5:checked ~ .arrow__next .img1{ display: block; background-image: url(./img/next.png); background-size: contain; width: 40px; height: 40px; position: absolute; top:150px; right: 2px; } #slide1:checked ~ .arrow__prev .img5, #slide2:checked ~ .arrow__prev .img1, #slide3:checked ~ .arrow__prev .img2, #slide4:checked ~ .arrow__prev .img3, #slide5:checked ~ .arrow__prev .img4 { display: block; background-image: url(./img/prev.png); background-size: contain; width: 40px; height: 40px; position: absolute; top:150px; left: 2px; } </style> </head> <body> <div class="wrapper"> <div class="container"> <div class="slider"> <input type="radio" name="slider" class="slider__items" id="slide1"> <input type="radio" name="slider" class="slider__items" id="slide2"> <input type="radio" name="slider" class="slider__items" id="slide3"> <input type="radio" name="slider" class="slider__items" id="slide4"> <input type="radio" name="slider" class="slider__items" id="slide5"> <div class="bullets"> <label for="slide1" class="bullets__items"></label> <label for="slide2" class="bullets__items"></label> <label for="slide3" class="bullets__items"></label> <label for="slide4" class="bullets__items"></label> <label for="slide5" class="bullets__items"></label> </div> <div class="arrow__next"> <label for="slide1" class="arrows__item img1"></label> <label for="slide2" class="arrows__item img2"></label> <label for="slide3" class="arrows__item img3"></label> <label for="slide4" class="arrows__item img4"></label> <label for="slide5" class="arrows__item img5"></label> </div> <div class="arrow__prev"> <label for="slide1" class="arrows__item img1"></label> <label for="slide2" class="arrows__item img2"></label> <label for="slide3" class="arrows__item img3"></label> <label for="slide4" class="arrows__item img4"></label> <label for="slide5" class="arrows__item img5"></label> </div> <div class="images"> <img src="./img/1.jpg" alt="" class="images__items image1"> <img src="./img/2.jpg" alt="" class="images__items image2"> <img src="./img/3.jpg" alt="" class="images__items image3"> <img src="./img/4.jpg" alt="" class="images__items image4"> <img src="./img/5.jpg" alt="" class="images__items image5"> </div> </div> </div> </div> </body> </html> -
Актуально, до сих пор актуально. Много кричали, что SEO умирает и умерло. Ничего подобного, СЕО живее всех живых и по-прежнему работает.
-
Мне нужен такой результат : Не понимаю почему background не применяется вокруг иконок: Сам код: Html: css: Html: <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section> Css: .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо! Уже решил, спасибо! У меня CSS селектор вида:.finish .finish_wrapper .finish_item .finish_roundА должен быть:.finish .finish_wrapper finish_item .finish_roundТ.е. без точки перед finish_item, так как это не класс, а элемент -
Есть вопрос по макету. (psd) Макет более 80мб. На форуме не выложишь. Где лучче залить файл и выложить ссылку на него? (Гугл диск подойдет?) Может у кого, знающего найдется 10 минут, чтоб ответить на вопрос по верстке?
-