Испытание: Дуэль...задание 18

bigbang20 · 10.Декабрь.2015 19:21:20

кто прошел это задание отпишите…есть вопросы…не могу ваще разобраться что куда…

PravedniK · 11.Декабрь.2015 04:55:05

Прошел. Что за вопросы?

ergo.pilzner · 11.Декабрь.2015 14:34:00

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

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

.miss+li+li+li{
    margin-right: 0;
}

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

.lever+li+li+li+li{
    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);
}

.miss+li+li+li+li{
    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);
}

 .miss+{
    display: none;
}

.{
    display: none;
}

  .{
    display: none;
}

 .{
    display: none;
}

Ineska · 11.Декабрь.2015 14:47:25

Учитесь пользоваться поиском по форуму.
Например, здесь человек очень понятно всё объяснил.

PravedniK · 11.Декабрь.2015 18:28:41

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:last-child {
    margin-right: 0;
}

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

.lever {
    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);
}

i {
    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);
}

.miss .lever {
    display: none;
}

.shooter-2 li:first-child .lever {
    display: none;
}

.shooter-2 li:nth-child(4) .lever {
    display: none;
}

.shooter-2 li:last-child .lever {
    display: none;
}

ergo.pilzner · 14.Декабрь.2015 14:17:44

спасибо

Valentina101078 · 21.Март.2016 07:33:35

Спасибо, что помогли разобраться!!!

Tverdislav · 07.Апрель.2016 08:19:21

Здравствуйте! Я это испытание прошел на 99%. Посмотрев ваш вариант решения понял что у меня получилось через чур громоздко. Кроме того пришлось внести изменение в CSS-код, но это для палочек смещение на 2px (выделил разделителем). И теперь у меня возникает вопрос, что мне делать с “selector { display: none;}” мне то теперь нет смысла что-то убирать? И еще один вопрос: почему 99%?
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:nth-child(5) {
margin-right: 0;
}

.shooter-1 li:nth-child(2) .lever,
.shooter-1 li:nth-child(3) .lever,
.shooter-1 li:nth-child(5) .lever,
.shooter-2 li:nth-child(1) .lever,
.shooter-2 li:nth-child(4) .lever,
.shooter-2 li:nth-child(5) .lever{
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.shooter-1 li:nth-child(4) .hitbox,
.shooter-1 li:nth-child(1) .hitbox,
.shooter-2 li:nth-child(2) .hitbox,
.shooter-2 li:nth-child(3) .hitbox{
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 li:nth-child(4) i,
.shooter-1 li:nth-child(1) i,
.shooter-2 li:nth-child(2) i,
.shooter-2 li:nth-child(3) i{
position: absolute;

***top: 11px;***
***left: 9px;***

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

Ineska · 07.Апрель.2016 08:32:04

Нет, последние 4 селектора вам уже не нужны. А 99% потому что палочки чуть-чуть не на месте.
Поправьте координату top на 10px.

Tverdislav · 07.Апрель.2016 10:25:51

Спасибо! Получилось! Только получается что CSS-код все-таки надо было менять? Ведь первоначально top: 11px, left:12px.

Ineska · 07.Апрель.2016 10:39:50

Можно не менять. Тогда селекторы поменять только.
.shooter-1 li:nth-child(2) .hitbox,
.shooter-1 li:nth-child(3) .hitbox,
.shooter-1 li:nth-child(5) .hitbox,
.shooter-2 li:nth-child(1) .hitbox,
.shooter-2 li:nth-child(4) .hitbox,
.shooter-2 li:nth-child(5) .hitbox{
width: 10px;
height: 10px;
margin: 6px auto;
border-radius: 50%;
background: #999999;
}
.shooter-1 li:nth-child(4) .lever,
.shooter-1 li:nth-child(1) .lever,
.shooter-2 li:nth-child(2) .lever,
.shooter-2 li:nth-child(3) .lever{
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);
}

Alexander_Himchynsky · 11.Май.2016 21:12:29

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 4px 10px 20px;
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: 16px;
border: 1px solid black;
border-radius: 50%;
background: #333333;
font-size: 0;
}

selector {
margin-right: 0;
}

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

.shooter-1>.target>li:nth-child(1)>.hitbox,
.shooter-1>.target>li:nth-child(4)>.hitbox,
.shooter-2>.target>li:nth-child(2)>.hitbox,
.shooter-2>.target>li:nth-child(3)>.hitbox{
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:nth-child(1)>.lever,
.shooter-1>.target>li:nth-child(4)>.lever,
.shooter-2>.target>li:nth-child(2)>.lever,
.shooter-2>.target>li:nth-child(3)>.lever{
position: absolute;
top: 1px;
left: 9px;
width: 5px;
height: 40px;
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;
}

vadim15 · 31.Март.2017 12:55:28

Вот вариант на 100%:

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:last-child {
margin-right: 0;
}

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

.lever {
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);
}

.lever span {
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);
}

.miss .lever {
display: none;
}

.shooter-2 li:first-child .lever {
display: none;
}

.shooter-2 li:nth-child(4) .lever {
display: none;
}

.shooter-2 li:last-child .lever {
display: none;
}