Инструменты пользователя

Инструменты сайта


вёрстка

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия
Предыдущая версия
вёрстка [2009/08/19 13:50] samdarkвёрстка [2017/01/08 10:46] (текущий) – [Боремся с IE] samdark
Строка 1: Строка 1:
 ====== Вёрстка ====== ====== Вёрстка ======
  
 +===== HTML5 =====
 +
 +  * [[http://diveinto.html5doctor.com/|Dive Into HTML5]]
 +
 +
 +===== CSS3 =====
 +  * http://css3please.com/
 +  * http://paulirish.com/2012/box-sizing-border-box-ftw/
 ===== Софт ===== ===== Софт =====
   * [[http://rmcreative.ru/blog/post/nabor-dlja-testirovanija-vjorstki|Идеальный набор для тестирования вёрстки]]: IE6, IE7, IE8, Firefox, Safari, Opera, Chrome. Все виртуализированы и могут работать параллельно.   * [[http://rmcreative.ru/blog/post/nabor-dlja-testirovanija-vjorstki|Идеальный набор для тестирования вёрстки]]: IE6, IE7, IE8, Firefox, Safari, Opera, Chrome. Все виртуализированы и могут работать параллельно.
Строка 13: Строка 21:
  
 ===== Полезные онлайн-инструменты ===== ===== Полезные онлайн-инструменты =====
-  * [[http://csstool.ru/|CSS Layout Generator (Dimox)]]+  * [[http://csstemplater.com/|CSS Layout Generator (Dimox)]] 
 +  * [[http://www.nealgrosskopf.com/tech/resources/80/|Nth-Child Visual Calculator]] 
 +===== Фреймворки ==== 
 +  * [[http://css-framework.ru/|css-framework]] 
 +  * [[http://www.designinfluences.com/fluid960gs/|Fluid 960 Grid System]] 
 +  * [[http://www.1kbgrid.com/|The 1KB CSS Grid]]  
  
 ===== Полезные знания ===== ===== Полезные знания =====
   * [[http://cssing.org.ua/2005/06/09/css-selectors-weight/|Вес селекторов в CSS]]   * [[http://cssing.org.ua/2005/06/09/css-selectors-weight/|Вес селекторов в CSS]]
-  * [[http://www.webdevout.net/]] +
-  * [[http://haslayout.net/]]+
  
 ===== Приёмы ===== ===== Приёмы =====
 +  * [[http://vitaly.harisov.name/article/independent-blocks.html|Вёрстка независимыми блоками]]
   * [[http://rmcreative.ru/blog/post/podkljuchenie-stilja-tolko-dlja-safari|Отдельные файлы для Opera, Safari при помощи @media]]   * [[http://rmcreative.ru/blog/post/podkljuchenie-stilja-tolko-dlja-safari|Отдельные файлы для Opera, Safari при помощи @media]]
-  * Элементы с float лезут за пределы блока — overflow: hidden; zoom: 1+  * Отдельный файл для Opera можно подключить как type="opera/css"
 +  * Элементы с float лезут за пределы блока — overflow: hidden; zoom: 1 и [[http://rotorweb.ru/mysli-vslux/saying-goodbye-overflow-hidden.html|более человечные методы]]
   * [[http://www.webmagazine.biz/articles/krossplatformennyj-sposob-perenosa-teksta-code-pre.html|Кроссбраузерный способ переноса строк в code и pre]]   * [[http://www.webmagazine.biz/articles/krossplatformennyj-sposob-perenosa-teksta-code-pre.html|Кроссбраузерный способ переноса строк в code и pre]]
   * [[http://rmcreative.ru/blog/post/displayinline-block-dlja-vsekh-brauzerov|display:inline-block для всех браузеров]]   * [[http://rmcreative.ru/blog/post/displayinline-block-dlja-vsekh-brauzerov|display:inline-block для всех браузеров]]
  
-  * [[http://www.cssstickyfooter.com/|Прилепленный к низу футер]]+  * [[http://www.cssstickyfooter.com/|Прилепленный к низу футер]] и [[http://habrahabr.ru/blogs/css/67493/|ещё один]]
   * [[http://habrahabr.ru/blogs/webdev/60665/|Заменяем стандартный элемент input file]]   * [[http://habrahabr.ru/blogs/webdev/60665/|Заменяем стандартный элемент input file]]
 +  * [[http://sreznikov.blogspot.com/2009/08/1px-rounded-corners.html|Однопиксельные прозрачные уголки]]
 +
 +  * [[http://blog.sribna.com/ukrashaem-input-s-pomoschyu-css-prodolzhenie.htm|Украшаем input с помощью CSS]]
  
 ===== Боремся с IE ===== ===== Боремся с IE =====
   * [[http://www.quirksmode.org/css/condcom.html|Условные комментарии]]   * [[http://www.quirksmode.org/css/condcom.html|Условные комментарии]]
-  * [[http://rmcreative.ru/blog/tag/PNG/|PNG]], лучший из фиксов пока [[http://rmcreative.ru/blog/post/dd_belatedpng|DD_belatedPNG]] 
   * [[http://rmcreative.ru/blog/post/whateverhover-v3|hover]]   * [[http://rmcreative.ru/blog/post/whateverhover-v3|hover]]
-  * IE6 дублирует margin для элементов с float — применяем к ним display: inline. 
-  * Ненулевая высота для элемента с height: 0 — line-height: 0 
-  * [[http://rmcreative.ru/blog/post/perekryvaem-select-v-ie6|Перекрываем select в IE6]] 
  
-===== Вёрстка писем ===== 
-  * [[http://habrahabr.ru/blogs/webdev/60420/|10 рекомендаций по html-верстке электронных писем]] 
  
 ===== Покажите это дизайнеру ===== ===== Покажите это дизайнеру =====
вёрстка.1250689812.txt.gz · Последнее изменение: 2013/08/01 20:27 (внешнее изменение)