html,
body {
margin: 0;
padding: 0;
}
body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: “Arial”, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url(“grid.png”);
background-repeat: repeat;
background-position: -80px -80px;
}
input[type=“text”] {
box-sizing: border-box;
padding-left: 10px;
height: 38px;
font-size: 18px;
font-family: inherit;
border: 2px solid #cccccc;
border-radius: 5px;
}
.block {
background-color: rgba(0, 255, 255, 0.2);
}
.block1 {
display: block;
width: 516px;
height: 114px;
border: 2px solid white;
}
.block2 {
display: block;
width: 440px;
margin-left: 18px;
margin-top: 18px;
border: 20px solid rgba(0, 255, 255, 0);
Может кто подскажет поменьше кода?
Вот, держит.
.block {
background-color: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block2 {
margin: 18px;
border: none;
padding: 20px;
}
В добавок к этому, дописываешь в селектор input[type=“text”]
- box-sizing: border-box;
- padding: 10px;
[Icrithack] класс .block изменять нельзя (в задании это указано)
Заметил, что у многих вызывает трудности эта задача, наверное, потому что не совсем понятно, как получить разные цвета.
Основа разгадки кроется в строчке .block { background-color: rgba(0, 255, 255, 0.2); }. Она означает, что к фону будет применен полупрозрачный слой белого цвета. Класс .block встречается в обоих div-ах. После первого применения (у div1) фон становится чуть светлее. После второго применения (div1 + div2) фон становится светло-синим. Поэтому основная задача - так расположить div1 и div2, чтобы можно было увидеть сначала границу div1, потом фон div1, потом фон div2, потом input. В самом начале мешает input, который закрывает фон просто белым цветом, мешая понять, что происходит.
Правильный ответ будет такой :
/* Базовые стили, изменять не нужно*/
.block {
background-color: rgba(0, 255, 255, 0.2);
}
/* Пользовательские стили */
/* добавляем белую границу для div 1 */
.block-1 {
border: 20px solid;
}
/* margin для div2 позволяет увидеть background div1, который чуть светлее основного фона.
padding для div2 позволяет увидеть background div2, который еще светлее */
.block-2 {
padding: 20px;
margin: 20px;
}
/* решаем проблему смещенного падингом и width=100% инпута (см предыдущий урок 15 ) */
.text-input {
box-sizing: border-box;
}