[Помогите] Нужна помощь по CSS

CrDan · 3 окт 2019

Мужики, помогаю девушке решать тест по веб программированию (для универа)
встал колом на последнем вопросе, идеи кончились, я не программист ни разу если что
Вопрос, как эту белую круглую и палочную срань сделать 1 и 4 в первом блоке и 2 и 3 во втором??
И что делать с отступами, тк margin-right: 16px; если изменить хоть на 1, то пятый круг улетает куда то вниз, а так как есть не совпадает с тем что требуется (всё ушло слегка в сторону) по сравнению с образцом
Прилагаю весь HTML редактор которого заблокирован (фото образца и результата ниже)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание. Дуэль</title>
</head>
<body>
<div class="shooter-1">
<ul class="target">
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li class="miss">
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li class="miss">
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li class="miss">
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
</ul>
</div>
<div class="shooter-2">
<ul class="target">
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
<li>
<div class="hitbox"></div>
<div class="lever"><i></i></div>
</li>
</ul>
</div>
</body>
</html>

И текст CSS того что получилось:
body { width: 280px;
margin: 0;
padding: 0;}
.shooter-1 {padding: 55px 0 55px 0;
border-bottom: 1px dashed #cccccc;
background: #fcf8e3;}
.shooter-2 {padding: 55px 0 55px 0;
background: #d9edf7;}
.target {width: 200px;
height: 25px;
margin: 0 auto;
padding: 10px 15px 10px 15px;
border-radius: 2px;
background: white;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
overflow: hidden;
list-style: none;}
li
{
position: relative;
float: left;
width: 22px;
height: 22px;
margin-right: 20px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;}

li
{
margin-right: 16px;
}

.hitbox {width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;}

.
{
position: absolute;
top: -2px;
left: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f5f5f5;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.shooter-1 > .target > li:first-child .lever
{
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}

.shooter-1 > .target > li + li + li + li .lever
{
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}

.shooter-2 > .target > li + li .lever
{
position: absolute;
top: 12px;
left: 11px;
width: 5px;
height: 25px;
background: #f5f5f5;
box-shadow:
-1px 15px 2px rgba(0, 0,0 , 0.3),
1px 15px 2px rgba(0, 0, 0, 0.3);
}
selector {
display: none;
}

Всё что есть в теории:

"В финальном испытании снова вернёмся к биатлону.
Это необычное испытание, так как вам не надо менять HTML-код. Также все CSS-правила уже содержат правильные стили.
Но есть загвоздка: у CSS-правил потерялись селекторы. Вам нужно всего лишь подобрать нужные селекторы для каждого CSS-правила.
Подсказка: начните с перебора классов."

Снизу образец, добавил полосы что бы было видно насколько уехал результат

Народ, выручайте, я уже всио

$iD · 3 окт 2019

Прочитайте пожалуйста https://wmasteru.org/threads/Правила-раздела.27418/

Dotrox · 4 окт 2019

CrDan сказал(а): ↑

И что делать с отступами, тк margin-right: 16px; если изменить хоть на 1, то пятый круг улетает куда то вниз,
Нажмите, чтобы раскрыть...

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

Войти или зарегистрироваться

[Помогите] Нужна помощь по CSS

CrDan

$iD Команда форума

Dotrox Команда форума