Я экспериментирую с реальным базовым веб-сайтом, который использую в качестве инструмента обучения, и пытаюсь найти правильный способ стилизации двух совершенно разных ссылок.
Для одной ссылки она оформлена следующим образом:
Код (разметка): А вторая ссылка оформлена так:
Код (разметка): По какой-то причине (кроме того, что я новичок в этом) он не хочет работать правильно. Вторая ссылка отображается точно так же, как первая, и именно здесь у меня возникла проблема.
Может ли кто-нибудь сказать мне, что я делаю неправильно, и, возможно, направить меня туда, где я смогу узнать, как правильно это сделать?
Заранее спасибо . . .
Для одной ссылки она оформлена следующим образом:
Код:
.
a.click { margin: 0 auto; margin-bottom: 1.5em; max-width: 25em; background: #CC0000; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: .75em 0 .75em 0; -webkit-box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; box-shadow: 0 0 2px 2px #CCC, 0 0 .75em 0.1em #CCC; -webkit-border-radius: .5em; border-radius: .5em;
}
a.click { max-width: 22em; color: #FFF; text-decoration: underline;
}
Код (разметка): А вторая ссылка оформлена так:
. #toppics { clear:both; padding:2em 0 1em; margin:0 2em; border-top:2px solid #400; } #toppics ul { list-style:none; padding-bottom:1em; } #toppics li { display:inline; vertical-align:top; } #toppics a { width:300px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #toppics a:active, #toppics a:focus, #toppics a:hover { background:#800; }
Код (разметка): По какой-то причине (кроме того, что я новичок в этом) он не хочет работать правильно. Вторая ссылка отображается точно так же, как первая, и именно здесь у меня возникла проблема.
Может ли кто-нибудь сказать мне, что я делаю неправильно, и, возможно, направить меня туда, где я смогу узнать, как правильно это сделать?
Заранее спасибо . . .