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


#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;
}

#2

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


#3

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


#4

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

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

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

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

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

т.е.

border: 5px solid red;

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

border-width: 5px;
border-style: solid;
border-color: red;

#5

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

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

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


#6


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


#7

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


#8

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


#9

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


#10

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


#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

пользуйтесь