Угадать карту с картинкой

<style>

#card {width:124px;height:168px;background-image:url("http://hosturl.co.uk/cc/cb.png");}

#card:hover {background-image:url("http://hosturl.co.uk/cc/cf.png");}

</style>

<div>

<h1>I can guess the number you are thinking of</h1>

<p>Follow the Rules and then hover the card below</p>

<ol>

<li>Think of a number below 10</li>

<li>Double the number you have</li>

<li>Add 6</li>

<li>Divide it by 2</li>

<li>Subtract the original number from your answer</li>

</ol>

<div id="card"></div>

</div>

_____________________________________________________________________________________

Before и:after

:before и :after позволяют добавить содержание с помощью стиля content до и после любого тега. При этом занимаемое тегом поле растягивается.

Дополнение историй.

p:before {content:"Once upon a time ";}

p:after {content:" and lived happily ever after.";}

</style>

<p>a princess was locked in the tower...she escaped</p>

<p>you learned to code with Codecadmey, got a good job</p>

_____________________________________________________________________________________

nth-child(odd) и nth-child(even)

Псевдокласс:nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис:

элемент:nth-child(odd | even | <число> | <выражение>) {...}

Значения

Odd

Все нечетные номера элементов.

Even

Все четные номера элементов.

Число

Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.

Дата добавления: 2015-08-17