[1/1] Новый дизайн карты путешествий

Курсы Основы CSS
1

Для тех, кто путается воть:

CSS 
body {
  width: 550px;
  margin: 0;
  padding: 0 10px;
}

.image-map {
  display: flex;
  flex-wrap: wrap;

  width: 290px;
  height: 290px;
  margin: auto;
  background-color: navy;
  border-radius: 20px;
  padding: 5px;
}
.image-map img {
  border-radius: 50%;
  border: 5px solid;
  margin: 5px;
}
.image-map .pic-1 {
  border-color: blueviolet;
}
.image-map .pic-2 {
  border-color: coral;
}
.image-map .pic-3 {
  border-color: crimson;
}
.image-map .pic-4 {
  border-color: deepskyblue;
}
12 лайков
2

Спасибо, для начинающего задачка была не из легких. Для меня просто тупиковая.
Решив с Вашей помощью, смог проанализировать и немного разобраться.

3

Клёво, но откуда знать про solid, что это и с чем едят? Это ведь нигде не упоминалось, никаких объяснений.

8 лайков
4

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

абырвалг: лупа пупа зарплата;

то это сокращенное свойство и где-то в документации есть весь расклад, типа:

абырвалг-пяся: лупа;
абырвалг-ляся: пупа;
абырвалг-няня: зарплата;

так и тут, мы задали общее свойство border: 5px solid;
а каждой картинке лишь меняли одно и составных свойств, т.е. цвет.
сокращенное border имеет в своем составе составные свойства width, style и color.

т.е.

border: 5px solid red;

расшифровывается как

border-width: 5px;
border-style: solid;
border-color: red;
4 лайка
5

где здесь про таблицы?

Я о том, что в практике спрашивают то, о чем новичок вообще не имеет понятия. А должно быть закрепление пройденного материала. Либо в задании пояснение.

В уроке про составные свойства было только про font с пояснениями, больше ни одного примера не давали.

2 лайка
6


вот тут было, например. эта тема идет по плану обучения раньше основ css
image
image.png876×633 23.5 KB

1 лайк
7

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

8

Погодите. Ну вот я прохожу последовательно все главы и тут же практику к ним.
Курс " Знакомство с HTML и CSS", самый первый. В нем глава [Глава 5:Основы CSS]. И к ней задание с этой картой. В “Знакомстве” нет никаких таблиц, форм и прочего.

4 лайка
9

вы должны придерживаться программы обучения (вот она), если до этого никаких навыков не было

10

В таком случае, на главной странице напишите это. Или на главной перестройте курсы так, чтобы они шли в нужном порядке. Потому что ссылка “Программа обучения” малозаметна на фоне больших курсов.

7 лайков
11

Спасибо, мы учтём ваше мнение.

12

А я добавил border: 5px вместо padding: 5px, в итоге выходило 99%, благодаря вашему коду заметил это - спасибо. :slight_smile:

13

А почему нельзя указать border-radius в пикселях? То есть, указать можно, но получается, что максимум задание выполнено на 98%.

14

67.5px, для любителей идеальной кривизны =)
тогда будет 100% на пикселях

у изображения же 125 ширина, там еще рамка дважды по 5. итого 135. border-radius для элипсоида это 50% от ширины, выходит 135/2 = 67.5

пользуйтесь

3 лайка
15

Спасибо

17

Тоже долго подзависла на этой задаче. Также не видела никакой рекомендуемый план обучения.

3 лайка
18

@Hierumo, привет.
Вот у тебя в коде:

Сводка 
.image-map .pic-1 {
  border-color: blueviolet;
}
.image-map .pic-2 {
  border-color: coral;
}
.image-map .pic-3 {
  border-color: crimson;
}
.image-map .pic-4 {
  border-color: deepskyblue;
}

везде класс .image-map, зачем? Почему мы не можем задать свойство border-color обращаясь кокретно к каждому классу от pic-1 до pic-4?

19

потому что .pic-1...4 в проекте может встретиться не только в блоке .image-map
плюс, поможет избежать возможных проблем со специфичностью селектора.
привыкайте писать сразу правильно

но если вы в рф будете работать, то скорее всего вам нужно будет забыть про каскад вообще и вручную для каждого класса набирать полный код, даром что классы будут называться как то так:

.image-map__pic-1 {...}

потому что БЭМ косит российские ряды =)

1 лайк
20

БЭМ уже давно за пределами РФ.
Следовательно в задании нужно как-то обозначать этот момент. Возможные гипотетические проблемы, которые могут встретиться в проекте - не оправдание неполной формулировки задачи.

21

чочо?

вы специфичность селектора .image-map img понимаете? какой должен быть дочерний селектор от него, чтобы его специфичность была выше и каскад можно было перебить? это именно .image-map .pic-1

а если вы не блоком делаете, а тупо img, то наверное следует себе задать вопрос, а зачем тут .image-map, а не просто div