Leaderboard
Popular Content
Showing content with the highest reputation on 05/02/2015 in Posts
-
Друзья, представляю вам новый проект - webreference.ru, доступен также по короткому адресу http://webref.ru Сайт пока не закончен в том виде каком мне это хотелось бы, поэтому это не официальный анонс, а бета-версия для получения советов и выявления ошибок. webref.ru - это сайт, на котором будут справочники и руководства по темам, не обязательно связанным с вёрсткой, как сейчас на htmlbook. К тому же работать над ним будет не один человек, а несколько. С htmlbook же постепенно уберу справочники и переделаю сайт. Как, ещё не знаю, речь не об этом. Итак, что хотелось бы услышать. - найденные баги, ошибки в отображении материалов; - общее впечатление; - удобство использования; - что убрать, что добавить. Ещё мне нужна небольшая помощь по вёрстке под мобильные версии. Есть небольшие проблемы с отображением на мобильных устройствах. Надо спрятать меню на маленьких экранах. Кто готов помочь, за деньги или бесплатно, пишите в личку.1 point
-
http://allnet.16mb.com/nerds/index.html http://allnet.16mb.com/nerds/catalog.html Файлы JPG http://i60.fastpic.ru/big/2015/0502/86/b2210f370d121d629eb33528e2e1fa86.jpg http://i59.fastpic.ru/big/2015/0502/67/314419a37b5011dca34e7c692f48ea67.jpg Стайлгайды http://i57.fastpic.ru/big/2015/0502/d0/5bc7b491b8057d8a35a9e58725a2fdd0.jpg Требования Разметка: Б1. Выполнена HTML-разметка всех страниц и всех элементов на страницах.Б2. К страницам подключён один стилевой файл (с учётом normalize.css или reset.css к каждой странице могут быть подключены два файла).Б3. Стилевой файл подключён внутри <head>.Б4. Грубые ошибки в разметке отсутствуют. Например:Грубые ошибки:Ссылки сделаны не тегом <a>, а другими тегами;Использование строчных элементов для создания крупных (сеточных) блоков;Абзацы сделаны не тегами <p>, а <br><br>.Не грубые ошибки:Отсутствие семантических тегов <header>, <footer>, <section> и других;Ошибки касающиеся SEO-оптимизации.Б5. Документ проходит проверку на валидность.Стилизация Б6. Вся собственная стилизация выполнена в одном стилевом файле.Б7. Раскладка блоков на странице сделана не с помощью таблиц или позиционирования.Б8. В CSS отсутствует !important. Допускается использование !important при обосновании его необходимости в комментарии.Б9. Подключены правильные шрифты, их размеры и толщина соответствуют размерам в макетах и ТЗ.Б10. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.Б11. При наполнении контентом (как в макете) элементы каждой страницы соответствуют макету, но допускаются:Различия в 5 пикселей по высоте (при расстояниях более 30 пикселей) и 2 пикселя по ширине;Отсутствие стилизации кастомных элементов форм;Различия в отображении шрифтов, связанные со сглаживанием на различных платформах.Тестирование Б12. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+.Б13. Сайт нормально смотрится на минимальном для макета разрешении 880pxПри большем размере экрана макет должен оставаться по центру и не иметь горизонтального скролла. На разрешениях экрана меньше ширины контейнера вёрстка не должна менять свою структуру.Разное Б14. В корне документа имеются папки css, img, js или аналогичные. Главная страница имеет названиеindex.html. В названиях и расширениях файлов нет заглавных букв и пробелов, использованы только латинские символы.Б15. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.Б16. Выбран подходящий формат изображений, например:JPEG для фотографий;PNG для всех прочих.Дополнительные критерии Разметка Д1. У всех изображений в теге <img> прописан размер.Д2. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).Д3. Все скрипты подключены непосредственно перед </body>.Д4. Названия полей форм привязаны к своим полям с помощью <label>.Стилизация Д5. Использованы normalize.css или reset.css (но не оба сразу).Д6. Для стилизации не использованы #id.Д7. Нет вложенности селекторов больше двух.Д8. Явно указано подходящее vertical-align для потоковых блоков с display: inline-block.Д9. Для CSS-свойств с префиксом указан его вариант без префикса и это указание идёт последним.Д10. Для блока у которого есть фоновое изображение прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).Д11. Все состояния элементов (смотрите styleguide.psd) прописаны в стилевом файле.Д12. Файл стилей представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный.JavaScript Д13. JavaScript-файл представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный.Д14. С помощью JavaScript реализовано открытие/закрытие окна с формой (без вспомогательных библиотек).Д15. С помощью JavaScript добавлена анимация формы (без вспомогательных библиотек).Д16. Добавлена интерактивная карта (допускается подключение с помощью iframe).Тестирование Д17. Вёрстка проходит тест на переполнение контентом:Не ломается при добавлении в элементы большего количества текста;Не ломается при использовании картинок с неподходящими размерами;Не ломается при изменении количества потоковых блоков;Текст не выпадает из блоков, нижерасположенные блоки не скрываются, смещение блоков в потоке сохраняет логику потока (не приводит к нарушению сетки).Д18. Критический функционал сайта работоспособен без JavaScript (использовано прогрессивное улучшение), например:Все формы являются работоспособными без JavaScript;Элементы, вызывающие появление попапов, являются ссылками, ведущими на отдельные страницы;Интерактивная карта без JavaScript показывает статичную картинку с картой.Разное Д19. Отсутствует транслит в названиях классов, атрибутах и так далее.Д20. При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения (если иное не прописано в ТЗ или slyleguide.psd).Д21. Проведена базовая оптимизация: минифицированы стили и скрипты, использованы спрайты и/или иконочный шрифт (смотрите ТЗ).1 point
-
1 point
This leaderboard is set to Kiev/GMT+02:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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 } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-