Два вида верстки боксов для товаров инет-магазина

Два вида верстки боксов для товаров инет-магазина.

2 разных способа верстки боксов для инет магазина. Пару часов назад “шлялся” по Интернету в поисках “пищи” для себя и своего блога. Наткнулся на одну из статей моего читателя, тоже верстальщика. У него тоже молодой блог и он постоянно пишет интересные статьи на тему html-layout. В своей статье он предложил метод как с помощью списка и блоков можно сверстать боксы для товаров Интернет магазина. Как я написал ему в комментариях, у него сильно замудрено там и пообещал ему, что вскоре попробую сделать то же самое, но немного легче. Сравнивайте, что вышло у меня и у него. Возможно, вы отдадите предпочтение его варианту, может моему. Для этого я и пишу эту статью. Замете, я не в коме случае не хочу сказать, что он плохой верстальщик. Просто у каждого свои методы =)

Сначала, как обычно, идем в файл html и создаем структуру. У меня вышло так:

<div id="cont">

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>

</div>

Дальше идем в наш “магический” файл css и творим чудеса: html, body{ padding:0px; margin:0p; height:100%; width:100%;}

#cont{ position:relative; width:800px; margin:0 auto; margin-bottom:15px; border:1px solid #CCCCCC; overflow:hidden;

}

#cont div{ position:relative; width:220px; height:220px; float:left; margin:20px 0 40px 35px; text-align:center; color:#FF0000; font-family:tahoma; font-size:14px;

}

#cont img{border:1px solid #CCCCCC;}

#cont span{color:#0099FF;float:left;}

#cont a{ color:#0099CC;float:right;}

Итак смотрим. У него вышло один идентификатор, пять классов и два или три псевдокласса. Ну соответственно большая структура списка, дивов и так далее.

У меня смотрим. Вышел один идентификатор и четыре псевдокласса. Весь код поместился 11-ти строчках.


Карта сайта


Информационный сайт Webavtocat.ru