Schamil74

Это так кажется. Зато clearfix не нужен при flexbox.  Ещё можно сетку создать на grid layout, наверное за этим будущее

Изучаю JS, решаю задачки.

C первым справился, а вот со вторым ступор + вопрос про запись ключей

Можно и через инлайн-блок.

Я бы сделал через флекс. Уж очень мне они нравятся.

Все зависит от ситуации: где-то нужно, где-то не нужно оборачивать.

Показал в том же примере. Пофиксите сами, что нужно...

Типо этого? Только у меня ментовская стрелка получилась))))

5 часов назад, Coder-vasya сказал:

В идеале был бы очень признателен за полный код этой таблицы.

А как же вы планируете дальше создавать таблицы? Тяжело в учении, ..... ! Как говорится.

https://htmlacademy.ru/courses/39

andrey7287, хорошо советует.

В "доставке" тоже можно попробовать сократить длину строки, переформулировать название

Попробуй поколдуй с этим http://javascript.ru/String/substr

Вряд ли поможет, конечно)))

В твоем случае, как я тебя понял, нужен перенос строки в option, но это невозможно. 

Решение: эмулировать select.

Удачи! 

Не парься по этому поводу.

Вот пользуйся:

Вариант 1

Вариант 2

Статья - полезно!

Это да:) Без JS ширину option не задать

http://materializecss.com/grid.html

Можно использовать же. Читай ниже. Там про сетку все расписано.

Представь, что ты вожатый в детском лагере.

И у тебя под крылом 10 спиногрызов (тег div)

Все дети одной высоты 100px (div { min-height: 100px; })

Мальчики - зеленые (.boy { color: green }), девочки - розовые (.girl { color: pink; }).

Все мальчики в шортах разного цвета, а девочки в юбках тоже разного цвета.

Один мальчик - длинномер. А одна девочка - карлик.

А лучше изучай какие селекторы бывают

http://htmlbook.ru/css/selector

Хотелось бы посмотреть на PSD,

если у вас сама 'звезда' в SVG, то можно сделать так и гибко стилизовать (наведите на мой svg)

Еще маргины можно вынести в общий класс

Плохая практика стилизовать по #

http://forum.academy/t/pochemu-chashhe-class-chem-id/5014

Покажите эту самую цветную картинку и для каких целей вы ее конвертируете в вектор? Тогда все станет ясно. 

Но мне кажется, что я уже знаю ответ.

В 10/10/2014 в 09:24, Volt сказал:

Аналог codeacademy.com

http://htmlacademy.ru/ на русском

Начинай отсюда

нарисовать в SVG? и залить картинкой или цветом? Так теоритически.

Типо этого:

Покажите проблему codeopen.io

Всем привет!

Оцените учебную верстку. Исходник PSD был отрисован только под десктоп.  Пришлось делать адаптивность как есть desktop first.

C SVG - анимацией сталкиваюсь первый раз. Вообще много с чем сталкиваюст первый раз на этом макете. Верстка выполнена на основе сетки бутстрап4.

https://schamil74.github.io/Daisy

Вам лучше исходники посмотреть, на сайте CSS компилиться через gulp-csso, mqpucker. Это сложно для понимания

Я именую классы по БЭМ и все. Мне кажется верстать на float новые сайты не нужно. Крайне мало, очень мало людей пользуются старыми браузерами. Может float нужно знать только для поддержки старых сайтов.

Пора бы взять на вооружение gulp или grunt, ну или хотя prepros (https://prepros.io) и препроц SCSS - синтаксис как у CSS. 

Таким образом можно стилизовать radio и checkbox

44 минуты назад, Svetlana_P сказал:

Имеются ввиду фреймворки, основанные на флексбоксах?

За ссылку спасибо, ознакомлюсь

Вообще, сетку определяет не просто один класс. В бутстрап несколько основных классов .container(.container-fluid) > .row > .col +  классы для разных устройств (.col-xs-12 .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12). Бутстрап 3 работает на float. Бутсрап 4 на флексах.

В материал дизайн лайт - .mdl-grid .container > mdl-cell + классы для разных устройств (.mdl-cell--3-col. mdl-cell--2-col-tablet. mdl-cell--4-phone). MDL на флексах.

Как в других устроено я пока не изучал (информации очень много). 

Вы какими инструментами пользуетесь? Редактор? Сборщик? Препроцессор? И т.д?

Вот последняя верстка https://schamil74.github.io/Daisy/

При просмотре сайта выключить adblocker

Скоро ее выложу, она выполнена с помощью сетки бутстрап 4

Приветствую!

Спасибо за критику.  

Пишу с телефона, будет кратко.

Скажу заранее, что каждый учебный макет это эксперимент))))

1. Полосу вообще убрал)))

2. Вроде теперь скролла нет

3. Так и должно быть

4. Наверное вы правы, но не критично.

5. Согласен с img. Исправил высоту, но нужно для мобильной версии выровнять полосу по центру (забыл)

6. Немного пофиксил.

7. Увеличим картинки. Касательно col and row. Дело в том, что когда для row задаём display: flex, то элементы по дефолту выстраиваются в строку, отсюда и название))) Про картинки см. выше.

8. Можно подробнее

9. На клик действия нет, вы правы. 

10. Анимация стала лучше. Посмотрите фреймворки, может там найдете ответ на свой вопрос, я даже не думал об container. Можно wrapper. 

Да, все на флексах.  Но есть вещь покруче https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout

Сам задаю вопросы, сам отвечаю)))

Нашел решение, но бесит, что transition влияет теперь на translate и scale((((

Лучше погуглить сначала, чем сразу писать сюда