Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (11)

Наибольший вклад в теги

Все теги (39)

Лучшие ответы пользователя

Все ответы (68)
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .header - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан
    1 комментарий
  • Как понять эту строку css?

    GoodProject
    @GoodProject
    Верстальщик
    Круто отвечать на вопросы:

    Берёшь выделяешь строку и жмешь "Искать на Google".

    Первый же сайт выдал что это размер шрифта и строки. ))
    Ответ написан
    Комментировать
  • Как практиковаться в верстке?

    GoodProject
    @GoodProject
    Верстальщик
    Те же проблемы ))

    Вроде HTML и CSS знаю, но как практиковаться хз, Видимо люди не понимают что мы просим ) А именно видео какие нибудь, с подробной версткой, для нубов, что бы было всё понятно. Или текстовые гайды, типа вот берём шаблон, вот я пишу тут в хтмл код для шапки сайта, в ксс тут же вписываю её размеры и пр, вот так, что бы было понятно, а не так как в большинстве видео тупо верстают без объяснений + видео старые, и возможно вообще это неправильный тип верстки, в одном видео чел вообще всем элементам привязывал ID, и в комментах писали что это неправильно, вот так вот потом насмотришься корявых видео и сам таким же будешь, поэтому нужен качественный материал, но за бесплатно его не так много.. раз такая проблема имеет место быть.

    Продублирую ответ Максима Фролова из моего вопроса:

    Начните с теории по верстке. Все изучаемые азы сразу же используете. Посмотрите пример верстки, как это делают другие, попробуйте написать тоже самое. Потом возьмите любой макет из сети и попробуйте сверстать его. Навык постоянно будет совершенствоваться. Главное, все сразу закреплять на практике.

    Так же от себя рекомендую сайт htmlacademy.ru , много курсов, в данный момент обучаюсь именно там, (до этого читал курc по ксс и хтмл на каком то сайте про html, css, js, там была очень хорошая подача материала, и смотрел видосы соракса и вебтеори) подкрепляю знания, потом можно будет перейти к верстке, ещё желательно узнать как делаются основные элементы типа слайдеров и пр. но это уже по части JS как я понял.. =)

    Ну и как я часто слышал, нужно именно практиковаться, я и сам это стал замечать, просто всё что ты учишь тут же нужно записывать по несколько раз, например выучил новые теги, тут же их записал, протестировал, и так понемногу рано или поздно дойдём до верстки ))
    Ответ написан
    3 комментария
  • Что значит символ & перед селектором?

    GoodProject
    @GoodProject
    Верстальщик
    Это фиша препроцессора Sass с синтаксисом SCSS.
    Например ты создаешь кнопку:
    .button {
    
    }

    И тебе нужно задать для этой кнопки свойства при наведении на неё:
    .button {
        &:hover {
    
        }
    }

    Т.е вместо знака & в данном случае подставится .button после компиляции данного кода.

    Удобная штука, попробуй обязон, тем более SCSS мало чем отличается от CSS по синтаксису, сейчас каждый уважающий себя верстальщик должен пользоваться такой штукой. Особенно нравится вложенность, не нужно постоянно в строку перечислять все классы, просто создал один класс header, и уже внутрь него добавляешь нужные классы, типа:

    header {
        h1 {
        //свойство:значение;
        //свойство:значение;
        }
        p {
        //свойство:значение;
        //свойство:значение;
        }
    }


    В CSS будет выглядеть так:

    header {
    }
    header h1 {
    }
    header p {
    }


    Т.е тебе придется 3 раза написать header, это бесит, лично меня.
    Ответ написан
    3 комментария
  • Как собрать в один массив несколько переменных из input с одинаковыми ID?

    GoodProject
    @GoodProject
    Верстальщик
    Атрибут id

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

    Для этих целей хорошо подходит class
    Ответ написан
    1 комментарий

Лучшие вопросы пользователя

Все вопросы (39)