Jump to content

Оцените верстку


mikoart
 Share

Recommended Posts

В целях практики сверстал макет. Прошу оценить качество вёрстки и указать на недостатки и ошибки.

Сайт   Макет

Наибольшие сомнения у меня вызывает реализация теней - замечания по этому вопросу интересуют больше всего.

P.S. без адаптивности и кросс-браузерности

Link to comment
Share on other sites

Надеюсь, что в некоторой степени это всё таки возможно. Вопрос кросс-браузерности ещё не изучал, пока ориентируюсь на последние версии Chrome и Opera и хотелось бы получить обратную связь о текущем понимании вёрстки. Наверняка есть какие-то недочёты кроме отсутствия поддержки IE.

Link to comment
Share on other sites

По-моему ты слишком увлекся списками, не очень практичный вариант. Я бы пересмотрел еще меню сайта именно в шапке сайте. И соглашусь с Крисом, оценить верстку без кроссбраузерности, это все равно что смотреть на картинку под разными углами, ведь кто в каком браузере перешел тот так и увидит(конечно, особой разницы нет, но если присмотреться то она есть).

Цитата

Вопрос кросс-браузерности ещё не изучал

И зря ты его еще не изучал, если бы начал с этого вопроса, потом не пришлось бы переделывать (править), называть можно по разному, но смысл то один и тот же.

Если нужна простая оценка, того что мы увидим, без оценки кода, а именно уникальности и оригинальности сайта, то скажу что макет заезжен и таких сайтов, даже уже готовых и написанных много. И я словами не кидаюсь на ветер, вот доказательство.

И не стоит верстать чужие сайты, если учишься, учись на своем создавай сам и экспериментируй. И используй картинки не в штмл коде, а лучше прописывай их в ксс задавая им соответствующие свойства.

Edited by MadSandwich
Забыл добавить совет в конце
  • Like 1
Link to comment
Share on other sites

1) Верхнее меню - нужно делать список ul li, без лишних классов у элементов. Плюс добавить эффект при наведении (да хотя бы сделать тот, что на первом пункте)
2) <p class="content--text-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> - вот такое вообще не должно присутствовать, особенно если в последствии верстка будет натягиваться на систему управления (имею в виду класс у p). Для таких случаев, конкретно я, использую стилизацию <strong>/<b> или на худой конец <em>/<i>. В общем суть такая, чтобы наполнять этот блок можно было только через wysiwyg редактор, не залезая в код.
3) Какой-нибудь hover-эффект хочется на кнопке "Read More". Ну хотя бы перевернутый градиент, уже будет смотреться живее.
4) В футере у последнего пункта меню по макету нет палочки на конце, у вас есть)

 

Link to comment
Share on other sites

16 часов назад, mikoart сказал:

Наибольшие сомнения у меня вызывает реализация теней - замечания по этому вопросу интересуют больше всего.

 

Почему в шапке нижняя тень вместе с картинкой вырезана?

Link to comment
Share on other sites

4 часа назад, by chris сказал:

Почему в шапке нижняя тень вместе с картинкой вырезана?

Это из-за уголков - не сразу придумал как можно на CSS сделать эти тени. Исправил, но получилось меньше сходства с макетом.

8 часов назад, Xenia Wanger сказал:

1) Верхнее меню - нужно делать список ul li, без лишних классов у элементов. Плюс добавить эффект при наведении (да хотя бы сделать тот, что на первом пункте)

Сделал в виде списка. Вы могли бы пояснить, какое преимущество списка в данном случае? И чем плохо <p class="content--text-title">?

8 часов назад, Xenia Wanger сказал:

Какой-нибудь hover-эффект хочется на кнопке "Read More".

Да, c этим ещё нужно, что-то сделать. Потому что в Opera hover-эффект есть, а почему его нет в Chrome - ещё не понял.

15 часов назад, MadSandwich сказал:

По-моему ты слишком увлекся списками, не очень практичный вариант.

В каком месте на данной странице использование списка неуместно, на ваш взгляд?

Незначительные изменения - исправлена тень в шапке, добавлен hover к элементам меню и изменена структура меню на ul>li.

Благодарю всех откликнувшихся за обратную связь!

p.s. Осталось понять, что с кнопками "read more" не так и устранить перекрытие картинкой телефонов - элементов меню, оставив при этом картинку сверху.

Link to comment
Share on other sites

Цитата

Сделал в виде списка. Вы могли бы пояснить, какое преимущество списка в данном случае? И чем плохо <p class="content--text-title">?

Чем плох - я уже объяснила выше. В контентной части должно быть как можно меньше тэгов с классами, чтобы при работе с системой управления не нужно было прибегать к написанию html-кода. Если планируете дальше развиваться в вебе, то наверняка столкнетесь с cms и поймете тогда о чем я говорю.

Что касается навигации списком, то нашла очень веселое объяснение)

Цитата

— Что мы видим в навигационном меню сайта?
— Список пунктов меню.
— Что еще раз?
— Список!
— Что такое список?
— Список — это перечень. Перечень однотипных данных.
— Пункты меню — это перечень однотипных данных?
— Да!
— Правильно — список. Итак, навигационное меню сайта — это список. Ок. Переходим к верстке. Давайте верстать список. Чем мы его будем верстать?
— . . .
— Что, никто? Никто не знает? Да,@sergealmazov, подскажи всем.
— Давайте верстать список параграфом с встроенными тегами логической разметки, в которые вставим ссылки на соответствующие страницы.
— . . . Дети, вы меня убиваете! Давайте снова. Что такое список?

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy