Оцените пожалуйста мою верстку!
Архив с кодом и psd
https://yadi.sk/d/mcoJfei1xL95Y
Спасибо.
План действий:
- Пишешь в google “бесплатный хостинг”
- Регистрируешься, разбираешься что и как, закидываешь туда вёрстку
- Кидаешь ссылку здесь
- Получаешь оценку
Удачи в этой нелёгкой задаче. )
Сразу оговорюсь, что соответствие макету не проверяю, это слишком долго. Смотрю только саму верстку.
Первое, что бросается в глаза - это горизонтальный скролл… Вы задали фиксированную ширину для слайдера, а для body не прописывали. И на моем экране (который наверное меньше, чем ваш) получилась неприятность.
Правило на 75 строке CSS-кода лишнее, так как свойство display: inline-block; наследуется из правила на строке 37.
В правилах на строках 82 и 88 содержатся одинаковые свойства. Поскольку оба класса применяются к одному и тому же элементу, то во втором правиле можно оставить только свойство background.
Создание блока .top_hr ради горизонтальной линии не целесообразно. Вполне можно было добавить рамку снизу для блока .top_head.
Для создания меню вы не пользовались списками. Хотелось бы узнать вашу точку зрения по этому поводу.
Для каждого пункта меню прописали ширину. Нельзя ли было как-то подобрать отступы вместо этого?
Слайдер не сделали. Даже разметки нет.
В блоке с тремя колонками для ссылки, в которой находится изображение было бы неплохо прописать display: block; а сами изображения выровнять по вертикали.
Для декоративных горизонтальных линий у заголовка popular products лучше было бы использовать псевдоэлементы, а не дополнительные пустые div-ы в разметке.
Не совсем понятно использование инлайновых стилей для звездочек рейтинга. Ширину можно и в css прописать. Или нет?
В правиле на 343 строке line-height меньше размера шрифта. Проверьте этот момент.
Высота блока .block_top_foot_descr меньше высоты текста внутри этого блока. Не ограничивайте высоту блоков. Лучше пишите min-height.
Не оправдано деление надписи Biruang Free PSD на два заголовка. Это может быть один заголовок, в котором вторая часть другого цвета обернута в span с классом.
В правиле на 417 строке line-height снова меньше размера шрифта.
Зачем ссылки внутри .top_foot_p дополнительно обернуты в параграфы? Разве не проще сделать саму ссылку блочной?
Каждому дочернему элементу внутри блока .subscrition_block прописан внешний отступ сверху. В данном случае можно обойтись записью внутреннего отступа сверху непосредственно у .subscrition_block.
В блоке .our_stores_block снова высота строки меньше размера шрифта.
Обертка ссылки в span кажется странной. Почему это не заголовок?
В правиле на строке 552 для параграфа есть объявление display: block;
А ведь тег p является блочным по умолчанию.
В целом работа очень неплохая. Из достоинств можно отметить подключенный normalize.css, правильную общую структуру блоков, использованный центровщик.
Было бы хорошо, если бы вы в своей разметке использовали семантические теги html5.
У меня беда с margin-left у div class=“home” у div есть не понятный отступ с права 1-3px я его не задавал https://gyazo.com/8e6d1c13f57ca0823dba0de893654ac2
Я сам не знаю что это потому обернул как думал.(Хотя заголовок тоже норм)
И я пытаюсь сделать идеально с помощью line-height http://pastexen.com/i/slAJPc0tzX.png
И вот тут видно http://pastexen.com/i/ibNxM7MYLu.png
Куда то пропал псевдо-элемент http://pastexen.com/i/GOHC6vh7sN.png
Спасибо вам что что гляну ли мою верстку.
Исправил что мог:https://yadi.sk/d/mcoJfei1xL95Y
Читал что его делают именно так типа не удобно с помощью cms переделывать css для создание количества звездочек
Никаких исправлений я не увидела. Читайте внимательно по порядку все замечаний и пытайтесь разобраться, что имеется в виду.