Vezha

Спасибо, буду знать

Действительно, правила применяются и без него, хтмл становится ещё меньше http://jsfiddle.net/4kTp9/9/

 

в CSS тоже можно убрать body

@Vezha, задачу про IE7 принимать не буду.

Хорошо

@terorama, мне кажется, что многие из твоих задач далеки то практики вёрстки. Выдумщик однако.
И кстати - куча постов как-то не очень смотрится, может сгрупируешь ?

Резиновые "ok" и "del" в рамочке на CSS3

Задача:

• написать css для отображения вот таких кнопочек
• использовать приведённый ниже html шаблон
• независимость кода от размеров в css(.ok, .del{width:20px;height:20px;} или .ok, .del{width:300px;height:300px;})

HTML-код:

<a href="/" class="ok">	<i class="ok1"></i>	<i class="ok2"></i></a><a href="/" class="del">	<i class="del1"></i>	<i class="del2"></i></a>

Решение:

http://jsfiddle.net/Vezha/nP7kK/

 

Весёлая таблица

Дано:

Таблица:

HTML-код:

В коде есть подсказки:
<!-- +2 column --> так обозначены строки дублируя которые модно увеличить число столбцов в таблице

<!-- +2 row --> <!-- +2 row end--> дублируя эту часть можно увеличить число строк

<table><tr><td rowspan="2">Vezha<br />#ddd</td><td rowspan="4"></td><td colspan="2">1   #ddd</td>		<td rowspan="2"></td><td colspan="2">2</td><td rowspan="4"></td><td colspan="2">3</td><!-- +2 column --><td rowspan="2"></td><td colspan="2">9   #eee</td><td rowspan="4"></td></tr><tr><td>1a</td><td>1b</td>		<td>2a</td><td>2b</td><td>3a</td><td>3b</td><!-- +2 column --><td>9a</td><td>9b</td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td><!-- +2 column --></tr><tr><td>A   #999</td><td>A1</td><td>A1</td>		<td rowspan="3"></td><td>A2</td><td>A2</td><td>A3</td><td>A3</td><!-- +2 column --><td rowspan="3"></td><td>A9</td><td>#aaa</td></tr>    		<!-- +2 row --><tr><td colspan="4"></td>		<td colspan="5"></td><!-- +2 column --><td colspan="3"></td></tr><tr><td>B</td><td rowspan="3"></td><td>B1</td><td>B1</td>		<td>B2</td><td>B2</td><td rowspan="3"></td><td>B3</td><td>B3</td><!-- +2 column --><td>B9</td><td>B9</td><td rowspan="3"></td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td><!-- +2 column --></tr><tr><td>C</td><td>C1</td><td>C1</td>		<td rowspan="3"></td><td>C2</td><td>C2</td><td>C3</td><td>C3</td><!-- +2 column --><td rowspan="3"></td><td>C9</td><td>C9</td></tr>    		<!-- +2 row end-->    <tr><td colspan="4"></td>		<td colspan="5"></td><!-- +2 column --><td colspan="3"></td></tr><tr><td>Z   #ccc</td><td rowspan="2"></td><td>Z1</td><td>Z1</td>		<td>Z2</td><td>Z2</td><td rowspan="2"></td><td>Z3</td><td>Z3</td><!-- +2 column --><td>Z9</td><td>#ddd</td><td rowspan="2"></td></tr><tr><td></td><td colspan="5"></td>		<td colspan="5"></td><!-- +2 column --></tr></table>

Задача:

 

9 - это чётная колонка в данном примене

Детали задачи:

Стилизировать таблицу следующим образом:
#efe горизонтальная разделительная линия

#eef вертикальная разделительная линия

#999 не чётная строка не чётная колонка

#aaa не чётная строка чётная колонка

#bbb рамка (border)

#ccc чётная строка не чётная колонка

#ddd чётная строка чётная колонка и заглавие не чётной колонки

#eee заглавие чётной колонки

 

 

Решение:

http://jsfiddle.net/Vezha/nP7kK/