Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 875 сообщений
Cообщения с меткой

верстка - Самое интересное в блогах

Следующие 30  »
NetFact

HTML5 и CSS3 с нуля до профи (2016) Видеокурс » NetFact.Ru: Скачать бесплатно – Популярная Интернет Библиотека

Среда, 24 Августа 2016 г. 11:19 (ссылка)
netfact.ru/videotech/3180-h...okurs.html


HTML5 и CSS3 с нуля до профи (2016) Видеокурс




Без преувеличения на сегодняшний день это самый полный и актуальный курс в Рунете. Вдумайтесь сами: только лишь основной раздел курса (без учета бонусов) состоит из 47 подробнейших видеоуроков, образующих собой пошаговую практическую систему.

После изучения этой системы вы освоите полностью адаптивную верстку с использованием последних новшеств этих двух языков гипертекстовой разметки и каскадных таблиц стилей.

В нашем новом курсе ВСЕ макеты верстаются сразу АДАПТИВНЫМИ и КРОССБРАУЗЕРНЫМИ.

Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».

Я не просто научу вас верстать простейшие веб-страницы, мы с вами очень подробно (вплоть до малейших деталей) проработаем верстку на примере трех различных по своей сложности наиболее популярных видов веб-сайтов в современном Интернете:

• сайта-визитки

• блога и...

• интернет-магазина



Содержание курса:



ПЕРВАЯ ЧАСТЬ

Верстка макета сайта-визитки

Урок 1. Введение. Настройка страницы

Урок 2. Определение разметки для страницы

Урок 3. Описание стилей шапки сайта

Урок 4. Описание стилей основного блока сайта. Часть1

Урок 5. Описание стилей основного блока сайта. Часть2. Заключение



ВТОРАЯ ЧАСТЬ

Верстка макета блога

Урок 1. Введение. Настройка страницы

Урок 2. Определение разметки шапки сайта

Урок 3. Подключение нестандартных шрифтов

Урок 4. Описание стилей шапки сайта

Урок 5. Описание разметки основного блока сайта

Урок 6. Описание разметки блока постов

Урок 7. Назначение стилей для блока постов

Урок 8. Описание разметки боковой колонки

Урок 9. Назначение стилей для боковой колонки

Урок 10. Описание разметки постраничной навигации

Урок 11. Назначение стилей для постраничной навигации

Урок 12. Верстка footer’а сайта

Урок 13. Доработка верстки макета

Урок 14. Адаптация верстки под мобильные устройства. Часть 1

Урок 15. Адаптация верстки под мобильные устройства. Часть 2

Урок 16. Добавление эффектов CSS3 на страницу. Часть 1

Урок 17. Добавление эффектов CSS3 на страницу. Часть 2



ТРЕТЬЯ ЧАСТЬ

Верстка макета интернет-магазина

Урок 1. Введение

Урок 2. Подключение нестандартного шрифта к странице

Урок 3. Определение разметки шапки сайта

Урок 4. Описание стилей шапки сайта. Часть 1

Урок 5. Описание стилей шапки сайта. Часть 2

Урок 6. Подключение слайдера к странице

Урок 7. Назначение стилей и настройка слайдера

Урок 8. Описание разметки блока новостей

Урок 9. Назначение стилей для блока новостей

Урок 10. Описание разметки блока «Популярные продукты»

Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1

Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2

Урок 13. Улучшение блока «Популярные продукты»

Урок 14. Описание разметки блока «О магазине»

Урок 15. Назначение стилей для блока «О магазине»

Урок 16. Описание разметки блока «Подписка»

Урок 17. Назначение стилей для блока «Подписка»

Урок 18. Описание разметки для footer’a

Урок 19. Назначение стилей для блока «footer»

Урок 20. Делаем макет адаптивным. Часть 1

Урок 21. Делаем макет адаптивным. Часть 2

Урок 22. Делаем макет адаптивным. Часть 3

Урок 23. Делаем макет адаптивным. Часть 4

Урок 24. Делаем макет адаптивным. Часть 5

Урок 25. Заключение



БОНУС 1

Премиум курс. Учебник по основам HTML

Урок 1. Введение. Основы HTML

Урок 2. Структура HTML документа

Урок 3. Теги форматирования текста

Урок 4. Изображения

Урок 5. Ссылки. Ссылки-изображения

Урок 6. Списки

Урок 7. Таблицы

Урок 8. Формы



БОНУС 2

Премиум курс. Учебник по основам CSS

Урок 1. Способы подключения

Урок 2. Назначения классов и id

Урок 3. Свойства шрифта

Урок 4. Свойства текста

Урок 5. Фон

Урок 6. Ширина, высота. Тег Div и Span

Урок 7. Рамка

Урок 8. Отступы

Урок 9. Основы CSS. Float, Clear, Display

Урок 10. Основы CSS. Свойство position



БОНУС 3

Премиум курс. Верстка сайтов для начинающих

Урок 1. Определение разметки

Урок 2. Описание разметки

Урок 3. CSS шапки сайта

Урок 4. CSS области контента

Урок 5. Доработка верстки



БОНУС 4

Премиум курс. HTML 5: основы

Урок 1. Структура документа HTML 5

Урок 2. Обзор тегов header и footer

Урок 3. Тег article

Урок 4. Тег section

Урок 5. Теги nav, main и aside

Урок 6. Теги figure и figcaption

Урок 7. Кроссбраузерное оформление

HTML 5 тегов

Урок 8. Тег input. Новые типы тега в html 5.

Часть 1

Урок 9. Тег input. Новые типы тега в html 5. Часть 2

Урок 10. HTML 5 video. Вставка видео на сайт

Урок 11. HTML 5 audio. Вставка аудио на сайт

Урок 12. HTML 5 canvas. Рисование в HTML 5

Урок 13. HTML 5 geolocation. Определение местоположения в HTML 5



БОНУС 5

Премиум курс по CSS3

Урок 1. Работа с фоном в CSS3

Урок 2. Тени и закругленные углы

Урок 3. Прозрачность фона, картинки, текста и цвета в CSS

Урок 4. Линейные градиенты CSS

Урок 5. Колонки

Урок 6. Радиальные градиенты

Урок 7. Шрифт

Урок 8. Работа с текстом в css 3

Урок 9. Псевдоклассы

Урок 10. Селекторы

Урок 11. Трансформация



БОНУС 6

Анатомия прибыльного лендинг пейдж

Урок 1. Анатомия прибыльного лендинг пейдж



БОНУС 7

Создание лендинг пейдж за один вечер

Урок 1. Введение

Урок 2. Подключаем нестандартный шрифт к странице

Урок 3. Определяем разметку шапки сайта

Урок 4. Описываем стили шапки сайта

Урок 5. Определяем разметку слайдера

Урок 6. Назначаем стили для слайдера

Урок 7. Верстаем блок "Особенности"

Урок 8. Верстаем блок "Галерея"

Урок 9. Определяем разметку блока видео

Урок 10. Описываем стили блока видео

Урок 11. Верстаем блок "Скачать приложение"

Урок 12. Просматриваем макет. Устраняем недочеты

Урок 13. Определяем разметку блока контактов

Урок 14. Описываем стили блока контактов

Урок 15. Верстаем футер

Урок 16. Адаптируем слайдер

Урок 17. Заключение












Информация о курсе:

Название: HTML5 и CSS3 с нуля до профи

Год выпуска: 2016

Автор: Андрей Бернацкий

Жанр: Обучающее видео

Выпущено: Россия

Продолжительность: 25:51:27



Файл

Формат: MP4

Качество: PCRec

Видео: AVC/H.264, 1024x768, ~283 - 681 Kbps

Аудио: AAC, 2 ch, 106 Kbps

Размер: 4,11 GB



Скачать: HTML5 и CSS3 с нуля до профи (2016) Видеокурс



Скачать | Download | TurboBit.net

http://turbobit.net/ct6vrdptqrac/HTML5CSS3_s_nulya_do_profi.rar.html



Скачать | Download | HitFile.net

http://www.hitfile.net/uNFZE1J/HTML5CSS3_s_nulya_do_profi.rar.html

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
hamaris

Справочник HTML5 - Теги HTML (Рuzzleweb.ru)

Вторник, 17 Августа 2016 г. 02:46 (ссылка)

Это цитата сообщения Ваша_ТАНЯ_идущая_по_Судьбе Оригинальное сообщение

Справочник HTML5 - Теги HTML (Рuzzleweb.ru)



Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!



4026647_Spravochnik_HTML5__Tegi_HTML (650x475, 80Kb)



ЧИТАЙТЕ ДАЛЬШЕ take_example


Ваша ТАНЯ,идущая по Судьбе
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Распространенные ошибки начинающего HTML-верстальщика

Понедельник, 08 Августа 2016 г. 16:18 (ссылка)

Привет, читатель! Я верстаю сайты с 2011 года. Как и большинство верстальщиков того времени, я учился самостоятельно по видео-урокам. За это время, я не раз ошибался с выбором позиционирования блока, выбором тега для элемента и конечно, с названием классов. В этой статье я хочу поделиться своими ошибками.



Я взял один из своих проектов, в котором мы вместе с вами рассмотрим ошибки и исправим их. Все примеры я выложил на GitHub.



Верхняя панель с меню и поиском



Первым блоком на странице является тянущаяся на весь экран верхняя панель, которая содержит меню и поиск. Для начала посмотрим общую структуру блока:







Первым, что бросается в глаза, смотря на нее, это использование элемента div с классом header и элемента header с идентификатором header. Я уверен, что 100% верстальщиков, взглянув на этот код, не поймут, где же действительно шапка. Поэтому, нужно переверстать элементы следующим образом:





Далее, нам требуется определить, для чего используется идентификатор header. Для этого в CSS найдем следующие каскады:



.header{..}
#header{...}
#header .search_block{...}


Я не знаю, в каком состоянии я находился, делая CSS-каскады с использованием класса header и идентификатора header, но как говорится, "Из песни слов не выкинешь". Мало того, что в данном случае создание двух CSS-каскадов бессмысленно, так и использование id в CSS лишает вас возможности переиспользовать CSS, а это в свою очередь, ведет к его дублированию. Поэтому, мы будем использовать только класс header. Изменю наш код следующим образом:














.header{..}
.header .search_block{...}


Но, честно говоря, у меня большие сомнения, что это шапка сайта. Я больше склоняюсь к тому, что это верхняя панель. Поэтому, советую переименовать класс header в top-panel.














.top-panel{..}
.top-panel .search_block{...}


Верстка основного контейнера



Идем дальше по нашей структуре и встречаем div с классом wrapper:









И для полноты картины CSS:



.wrapper{
margin: 0 auto;
width: 940px;
padding: 0 10px;
}


Слово wrapper можно перевести как обертка. Не совсем понятно что она оборачивает? Да и этот блок вообще не обертка. Так что с этим классом я погорячился.



Этот элемент служит для центрирования и указания ширины нашего сайта. По сути, это основной блок страницы, в который помещаются все остальные. Поэтому, логично было бы его назвать main-container.









Меню



Теперь детальнее разберем меню, которое имеет следующую структуру:





И следующий CSS:



.menu_block{...}
.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}


Первым, что хочется спросить, смотря на этот код, это зачем происходит вложенность тега ul в div? Тег ul, как и тег div относятся к блочным элементам, поэтому в данном случае тег ul не требуется оборачивать тегом div.





Далее, у меня была очень вредная привычка добавлять к классам "пояснения" вроде _block, _list и т.п. Этот метод не помогает вашему коду быть прозрачнее. Это лишняя тавтология, которая бессмысленна и может легко сломаться. Поэтому, изменю код следующим образом:





.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}


Далее, посмотрим на ссылку с классом item. Данное название класса очень обобщенное. Если бы через полгода меня спросили для чего я использую этот класс, то я бы не ответил. Я бы не ответил даже тогда, когда верстал этот макет, если бы не посмотрел в HTML. Запомните, что название классов должно отражать смысл элемента.



Теперь изменим код:





.menu{...}
.menu__item{...}
.menu__link{...}
.menu__link:hover{...}


Вот теперь, если даже в 4 ночи позвонят мне и спросят зачем там класс menu__link, то я отвечу для стилизации ссылок в меню.



Поиск



Теперь рассмотрим поиск со следующей структурой:










Как видим, здесь, как и ранее, есть проявлении моей болезни тавтологии и лишней вложенности блочного элемента form в блочный div. Я надеюсь, что теперь вы знаете как решать такие проблемы, поэтому я оставлю это вам. Должны же вы потренироваться! Но если вы не хотите, ответ в следующем абзаце.



Кроме перечисленных выше ошибок, в этом фрагменте есть еще несколько. Первая, это не указан атрибут name для поля ввода.



Вторая, это название класса search_icon для кнопки поиска. Опять же, если меня спросят для чего служит этот элемент, то я снова не назову правильный ответ. Поэтому изменим класс на search__button.



Третья, использование декоративной иконки с лупой в HTML. Почему это ошибка? Потому что, все вставленные изображения на страницу при помощи тега img будут проиндексированы поисковыми роботами. Особого смысла индексировать элементы декора я не вижу, поэтому, советую в HTML оставлять только изображения, которые относятся к контенту страницы.



Теперь изменим HTML.



 





Вроде теперь все хорошо… Но, стоп! У нас теперь абсолютно пустая кнопка! Это очень плохой тон в верстке. Если у нас не загрузится CSS или пользователь будет посещать сайт с использование электронных читалок, то они просто ее не увидят или не услышат. Поэтому нам нужно добавить слово "Найти", которое мы скроем используя свойство text-indent.



 





Теперь перейдем к CSS.



.top-panel .search{...}
.top-panel .search .search_field{...}
.top-panel .search .search_field:focus{...}
.top-panel .search .search_button{...}


Как вы теперь видите, я указал всю цепочку вложенности в CSS-селекторе. Мне постоянно встречаются такие ошибки. Давайте рассмотрим подробнее эту ошибку.



Первое, мы привыкли с вами читать слева направо, и поэтому думаем, что браузер сначала найдет элемент с классом top-panel, а потом внутри него элемент с классом search. Но, на деле все наоборот! Браузеры читают CSS-селектор справа налево, поэтому, сначала он найдет элементы с классом search, а только потом у них отыщет предков с классом top-panel.



Второе, все начинающие верстальщики думают, что сверстают сайт и его больше никто не тронет. И будет он жить в таком состоянии всю свою жизнь. Но, на самом деле верстка в первозданном виде живет ровно до того момента, пока до нее не дотронуться программисты.



Но, это полбеды. Если вы верстаете мало мальски посещаемый сайт, то рано или поздно придется вносить изменения на нем. Допустим, требуется перенести блок поиска в другое место страницы. Например, в подвал. При текущей реализации потребуется изменить как HTML, так и CSS. Это все потому, что указана жесткая вложенность элементов. Вы вынуждены будете продублировать CSS-свойства.



Для решения этой проблемы нам нужно изменить CSS следующим образом:



.search{...}
.search__field{...}
.search__field:focus{...}
.search__button{...}


Все просто! Теперь мы можем перемещать поиск, поле поиска и даже кнопку куда захотим.



Позиционирование меню и поиска



Теперь перейдем к рассмотрению позиционирования меню и поиска. По дизайну отчетливо видно, что меню прижато к левой части основного контейнера, а поиск — к правой. Очевидно, что требуется использовать float-элементы. Текущая реализация выглядит так:



.top-panel{
background-color: #ededed;
min-width: 960px;
height: 40px;
}
.menu{
float: left;
}
.search{
float: right;
}


В чем же здесь ошибка? Из-за того что у элемента с классом top-panel задана высота в 40 пикселей, блоки выглядят как надо. Но, если мы проинспектируем элемент с классом main-container при помощи веб-инспектора, то увидим, что его высота равняется нулю. Это побочный эффект при использовании float-элементов. Что можно сделать с этим? По логике начинающего верстальщика, надо просто задать высоту. И таким образом появится что-то вроде этого:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.top-panel .main-container{
height: 40px;
}


Основная проблема заключается даже не во вложенности каскада, а в том, что указано фиксированное значение для высоты элемента с классом main-container. В верстке высота блока должна подстраивается под контент элемента. Поэтому ее нельзя фиксировать.



Хорошо, нельзя задавать высоту, но как же исправить эту ситуацию? Есть очень простой и надежный способ. Это добавить элемент со свойством clear и значением both за float-элементами или в конец родительского блока, как в нашем случае.



Для добавления такого элемента воспользуемся псевдоэлементом :after.



.clearfix:after{
content: "";
display: block;
clear: both;
}


И HTML примет следующий вид:














CSS изменится следующим образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.menu{
float: left;
}
.search{
float: right;
}


А теперь, подумаем над следующим вопросом. Мы уже говорили, что при правильной верстке блоки можно свободно перемещать по странице. Но, при текущей реализации мы не добьемся такой универсальности из-за свойства float. Как же быть? Мы точно знаем, что в верхней панели меню находится слева, а поиск — справа. Поэтому можно создать дополнительные классы, в которых и пропишем float:














CSS изменится следующим образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.top-panel__menu{
float: left;
}
.top-panel__search{
float: right;
}


Стилизация меню



Для стилизации блока я использую следующий CSS:



.top-panel__menu{
float: left;
}
.menu{
width: 620px;
padding: 12px 0;
list-style: none;
}
.menu__item{
display: inline-block;
}
.menu__link{
color: #353743;
font-size: 14px;
margin-right: 15px;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}


Какие ошибки я здесь вижу.



Во-первых, у menu задан padding сверху и снизу равные в 12 пикселей. Это нужно для того, чтобы сделать отступы от края блока. Вроде все хорошо. Но, если мы посмотрим на верхнюю панель в целом, то увидим, что у поиска тоже есть отступ сверху. Поэтому, общий отступ лучше задавать родительскому блоку. Например, .top-panel. А у меню добавить не хватающие значения, используя уже margin, т.к это уже будет внешний отступ:



.top-panel{
background-color: #ededed;
min-width: 960px;
padding-top: 7px;
padding-bottom: 7px;
}
.top-panel__menu{
float: left;
}
.menu{
width: 620px;
margin-top: 5px;
margin-bottom: 5px;
list-style: none;
}


Во-вторых, в данном случае у меню не нужно указывать ширину. Вы же помните, что верстка в своем начальном состоянии живет недолго? На живом сайте может быть больше пунктов меню, поэтому оно должно свободно увеличиваться.



В-третьих, отступы между пунктами меню почему-то заданы у ссылок, хотя логичнее сделать это у элементов li. Вроде мелочь? Но в верстке мелочей не бывает!



Измененный CSS меню теперь выглядит таким образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
padding-top: 7px;
padding-bottom: 7px;
}
.top-panel__menu{
float: left;
}
.menu{
margin-top: 5px;
margin-bottom: 5px;
list-style: none;
}
.menu__item{
display: inline-block;
margin-right: 15px;
}
.menu__link{
color: #353743;
font-size: 14px;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}


Стилизация поиска



Для стилизации блока я использую следующий CSS:



.top-panel__search{
float: right;
}
.search{
padding: 5px 0;
}
.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;
padding: 0 10px;

font-size: 12px;
transition: width 0.9s 0s;
vertical-align: middle;
}
.search__field:focus{
width: 200px;
outline: none;
}
.search_button{
position: relative;
right: 4px;
top: 1px;

background: none;
vertical-align: middle;
}


Из-за того, что я добавил padding к элементу с классом top-panel, у нас увеличилось расстояние от верхнего края панели до поиска. Поэтому, я удалю его из класса search.



Также, ранее, мы изменили верстку кнопки поиска, поэтому, на данном этапе она отличается от дизайна. Нам нужно задать размеры кнопки и добавить иконку лупы, используя свойство backgorund. Также требуется установить text-indent для скрытия текста:



.search_button{
width: 25px;
height: 25px;

position: relative;
right: 4px;
top: 1px;

text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


Теперь разберем ошибки. Первым, что бросается в глаза — это использование position в кнопке. Если мы отключим position: relative в веб-инспекторе, то увидим расстояние между полем ввода и кнопкой. Оно появилось, потому что и поле ввода, и кнопка являются строчно-блочными элементами.



Для решения это проблемы, я просто задам им свойство float со значением left и уберу position у кнопки:



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
vertical-align: middle;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


Далее, добавлю ранее созданный класс clearfix к элементу с классом search:



 





И вроде как работает. Но! У нас сейчас есть одна из моих любимейших ошибок, которую я встречаю даже у опытных верстальщиков. Давайте посмотри вновь на CSS поля ввода и кнопки:



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
vertical-align: middle;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


В обоих классах есть свойство vertical-align, с помощью которого можно выровнять строчно-блочные элементы по вертикальной оси. Но! Сейчас у нас уже блочные элементы! Свойство float влияет на поток элементов и делает их блочными. Это нужно помнить всегда. Поэтому я удалю vertical-align у элементов.



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
}


Заключение



Когда я начал писать статью, я не думал, что описание своих ошибок будет занимать такой объем текста. Поэтому, если вы хотите продолжить разбор ошибок следующий блоков, то напишите мне об этом в комментариях.


Original source: habrahabr.ru.

https://habrahabr.ru/post/307210/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
rss_rss_hh_new

Распространенные ошибки начинающего HTML-верстальщика

Понедельник, 08 Августа 2016 г. 16:18 (ссылка)

Привет, читатель! Я верстаю сайты с 2011 года. Как и большинство верстальщиков того времени, я учился самостоятельно по видео-урокам. За это время, я не раз ошибался с выбором позиционирования блока, выбором тега для элемента и конечно, с названием классов. В этой статье я хочу поделиться своими ошибками.



Я взял один из своих проектов, в котором мы вместе с вами рассмотрим ошибки и исправим их. Все примеры я выложил на GitHub.



Верхняя панель с меню и поиском



Первым блоком на странице является тянущаяся на весь экран верхняя панель, которая содержит меню и поиск. Для начала посмотрим общую структуру блока:







Первым, что бросается в глаза, смотря на нее, это использование элемента div с классом header и элемента header с идентификатор header. Я уверен, что 100% верстальщиков, взглянув на этот код, не поймут, где же действительно шапка. Поэтому, нужно переверстать элементы следующим образом:





Далее, нам требуется определить, для чего используется идентификатор header. Для этого в CSS найдем следующие каскады:



.header{..}
#header{...}
#header .search_block{...}


Я не знаю, в каком состоянии я находился, делая CSS-каскады с использованием класса header и идентификатора header, но как говорится, "Из песни слов не выкинешь". Мало того, что в данном случае создание двух CSS-каскадов бессмысленно, так и использование id в CSS лишает вас возможности переиспользовать CSS, а это в свою очередь, ведет к его дублированию. Поэтому, мы будем использовать только класс header. Изменю наш код следующим образом:














.header{..}
.header .search_block{...}


Но, честно говоря, у меня большие сомнения, что это шапка сайта. Я больше склоняюсь к тому, что это верхняя панель. Поэтому, советую переименовать класс header в top-panel.














.top-panel{..}
.top-panel .search_block{...}


Верстка основного контейнера



Идем дальше по нашей структуре и встречаем div с классом wrapper:









И для полноты картины CSS:



.wrapper{
margin: 0 auto;
width: 940px;
padding: 0 10px;
}


Слово wrapper можно перевести как обертка. Не совсем понятно что она оборачивает? Да и этот блок вообще не обертка. Так что с этим классом я погорячился.



Этот элемент служит для центрирования и указания ширины нашего сайта. По сути, это основной блок страницы, в который помещаются все остальные. Поэтому, логично было бы его назвать main-container.









Меню



Теперь детальнее разберем меню, которое имеет следующую структуру:





И следующий CSS:



.menu_block{...}
.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}


Первым, что хочется спросить, смотря на этот код, это зачем происходит вложенность тега ul в div? Тег ul, как и тег div относятся к блочным элементам, поэтому в данном случае тег ul не требуется оборачивать тегом div.





Далее, у меня была очень вредная привычка добавлять к классам "пояснения" вроде _block, _list и т.п. Этот метод не помогает вашему коду быть прозрачнее. Это лишняя тавтология, которая бессмысленна и может легко сломаться. Поэтому, изменю код следующим образом:





.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}


Далее, посмотрим на ссылку с классом item. Данное название класса очень обобщенное. Если бы через полгода меня спросили для чего я использую этот класс, то я бы не ответил. Я бы не ответил даже тогда, когда верстал этот макет, если бы не посмотрел в HTML. Запомните, что название классов должно отражать смысл элемента.



Теперь изменим код:





.menu{...}
.menu__item{...}
.menu__link{...}
.menu__link:hover{...}


Вот теперь, если даже в 4 ночи позвонят мне и спросят зачем там класс menu__link, то я отвечу для стилизации ссылок в меню.



Поиск



Теперь рассмотрим поиск со следующей структурой:










Как видим, здесь, как и ранее, есть проявлении моей болезни тавтологии и лишней вложенности блочного элемента form в блочный div. Я надеюсь, что теперь вы знаете как решать такие проблемы, поэтому я оставлю это вам. Должны же вы потренироваться! Но если вы не хотите, ответ в следующем абзаце.



Кроме перечисленных выше ошибок, в этом фрагменте есть еще несколько. Первая, это не указан атрибут name для поля ввода.



Вторая, это название класса search_icon для кнопки поиска. Опять же, если меня спросят для чего служит этот элемент, то я снова не назову правильный ответ. Поэтому изменим класс на search__button.



Третья, использование декоративной иконки с лупой в HTML. Почему это ошибка? Потому что, все вставленные изображения на страницу при помощи тега img будут проиндексированы поисковыми роботами. Особого смысла индексировать элементы декора я не вижу, поэтому, советую в HTML оставлять только изображения, которые относятся к контенту страницы.



Теперь изменим HTML.



 





Вроде теперь все хорошо… Но, стоп! У нас теперь абсолютно пустая кнопка! Это очень плохой тон в верстке. Если у нас не загрузится CSS или пользователь будет посещать сайт с использование электронных читалок, то они просто ее не увидят или не услышат. Поэтому нам нужно добавить слово "Найти", которое мы скроем используя свойство text-indent.



 





Теперь перейдем к CSS.



.top-panel .search{...}
.top-panel .search .search_field{...}
.top-panel .search .search_field:focus{...}
.top-panel .search .search_button{...}


Как вы теперь видите, я указал всю цепочку вложенности в CSS-селекторе. Мне постоянно встречаются такие ошибки. Давайте рассмотрим подробнее эту ошибку.



Первое, мы привыкли с вами читать слева направо, и поэтому думаем, что браузер сначала найдет элемент с классом top-panel, а потом внутри него элемент с классом search. Но, на деле все наоборот! Браузеры читают CSS-селектор справа налево, поэтому, сначала он найдет элементы с классом search, а только потом у них отыщет предков с классом top-panel.



Второе, все начинающие верстальщики думают, что сверстают сайт и его больше никто не тронет. И будет он жить в таком состоянии всю свою жизнь. Но, на самом деле верстка в первозданном виде живет ровно до того момента, пока до нее не дотронуться программисты.



Но, это полбеды. Если вы верстаете мало мальски посещаемый сайт, то рано или поздно придется вносить изменения на нем. Допустим, требуется перенести блок поиска в другое место страницы. Например, в подвал. При текущей реализации потребуется изменить как HTML, так и CSS. Это все потому, что указана жесткая вложенность элементов. Вы вынуждены будете продублировать CSS-свойства.



Для решения этой проблемы нам нужно изменить CSS следующим образом:



.search{...}
.search__field{...}
.search__field:focus{...}
.search__button{...}


Все просто! Теперь мы можем перемещать поиск, поле поиска и даже кнопку куда захотим.



Позиционирование меню и поиска



Теперь перейдем к рассмотрению позиционирования меню и поиска. По дизайну отчетливо видно, что меню прижато к левой части основного контейнера, а поиск — к правой. Очевидно, что требуется использовать float-элементы. Текущая реализация выглядит так:



.top-panel{
background-color: #ededed;
min-width: 960px;
height: 40px;
}
.menu{
float: left;
}
.search{
float: right;
}


В чем же здесь ошибка? Из-за того что у элемента с классом top-panel задана высота в 40 пикселей, блоки выглядят как надо. Но, если мы проинспектируем элемент с классом main-container при помощи веб-инспектора, то увидим, что его высота равняется нулю. Это побочный эффект при использовании float-элементов. Что можно сделать с этим? По логике начинающего верстальщика, надо просто задать высоту. И таким образом появится что-то вроде этого:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.top-panel .main-container{
height: 40px;
}


Основная проблема заключается даже не во вложенности каскада, а в том, что указано фиксированное значение для высоты элемента с классом main-container. В верстке высота блока должна подстраивается под контент элемента. Поэтому ее нельзя фиксировать.



Хорошо, нельзя задавать высоту, но как же исправить эту ситуацию? Есть очень простой и надежный способ. Это добавить элемент со свойством clear и значением both за float-элементами или в конец родительского блока, как в нашем случае.



Для добавления такого элемента воспользуемся псевдоэлементом :after.



.clearfix:after{
content: "";
display: block;
clear: both;
}


И HTML примет следующий вид:














CSS изменится следующим образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.menu{
float: left;
}
.search{
float: right;
}


А теперь, подумаем над следующим вопросом. Мы уже говорили, что при правильной верстке блоки можно свободно перемещать по странице. Но, при текущей реализации мы не добьемся такой универсальности из-за свойства float. Как же быть? Мы точно знаем, что в верхней панели меню находится слева, а поиск — справа. Поэтому можно создать дополнительные классы, в которых и пропишем float:














CSS изменится следующим образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
}
.top-panel__menu{
float: left;
}
.top-panel__search{
float: right;
}


Стилизация меню



Для стилизации блока я использую следующий CSS:



.top-panel__menu{
float: left;
}
.menu{
width: 620px;
padding: 12px 0;
list-style: none;
}
.menu__item{
display: inline-block;
}
.menu__link{
color: #353743;
font-size: 14px;
margin-right: 15px;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}


Какие ошибки я здесь вижу.



Во-первых, у menu задан padding сверху и снизу равные в 12 пикселей. Это нужно для того, чтобы сделать отступы от края блока. Вроде все хорошо. Но, если мы посмотрим на верхнюю панель в целом, то увидим, что у поиска тоже есть отступ сверху. Поэтому, общий отступ лучше задавать родительскому блоку. Например, .top-panel. А у меню добавить не хватающие значения, используя уже margin, т.к это уже будет внешний отступ:



.top-panel{
background-color: #ededed;
min-width: 960px;
padding-top: 7px;
padding-bottom: 7px;
}
.top-panel__menu{
float: left;
}
.menu{
width: 620px;
margin-top: 5px;
margin-bottom: 5px;
list-style: none;
}


Во-вторых, в данном случае у меню не нужно указывать ширину. Вы же помните, что верстка в своем начальном состоянии живет недолго? На живом сайте может быть больше пунктов меню, поэтому оно должно свободно увеличиваться.



В-третьих, отступы между пунктами меню почему-то заданы у ссылок, хотя логичнее сделать это у элементов li. Вроде мелочь? Но в верстке мелочей не бывает!



Измененный CSS меню теперь выглядит таким образом:



.top-panel{
background-color: #ededed;
min-width: 960px;
padding-top: 7px;
padding-bottom: 7px;
}
.top-panel__menu{
float: left;
}
.menu{
margin-top: 5px;
margin-bottom: 5px;
list-style: none;
}
.menu__item{
display: inline-block;
margin-right: 15px;
}
.menu__link{
color: #353743;
font-size: 14px;
text-decoration: none;
}
.menu__link:hover{
text-decoration: underline;
}


Стилизация поиска



Для стилизации блока я использую следующий CSS:



.top-panel__search{
float: right;
}
.search{
padding: 5px 0;
}
.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;
padding: 0 10px;

font-size: 12px;
transition: width 0.9s 0s;
vertical-align: middle;
}
.search__field:focus{
width: 200px;
outline: none;
}
.search_button{
position: relative;
right: 4px;
top: 1px;

background: none;
vertical-align: middle;
}


Из-за того, что я добавил padding к элементу с классом top-panel, у нас увеличилось расстояние от верхнего края панели до поиска. Поэтому, я удалю его из класса search.



Также, ранее, мы изменили верстку кнопки поиска, поэтому, на данном этапе она отличается от дизайна. Нам нужно задать размеры кнопки и добавить иконку лупы, используя свойство backgorund. Также требуется установить text-indent для скрытия текста:



.search_button{
width: 25px;
height: 25px;

position: relative;
right: 4px;
top: 1px;

text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


Теперь разберем ошибки. Первым, что бросается в глаза — это использование position в кнопке. Если мы отключим position: relative в веб-инспекторе, то увидим расстояние между полем ввода и кнопкой. Оно появилось, потому что и поле ввода, и кнопка являются строчно-блочными элементами.



Для решения это проблемы, я просто задам им свойство float со значением left и уберу position у кнопки:



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
vertical-align: middle;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


Далее, добавлю ранее созданный класс clearfix к элементу с классом search:



 





И вроде как работает. Но! У нас сейчас есть одна из моих любимейших ошибок, которую я встречаю даже у опытных верстальщиков. Давайте посмотри вновь на CSS поля ввода и кнопки:



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
vertical-align: middle;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
vertical-align: middle;
}


В обоих классах есть свойство vertical-align, с помощью которого можно выровнять строчно-блочные элементы по вертикальной оси. Но! Сейчас у нас уже блочные элементы! Свойство float влияет на поток элементов и делает их блочными. Это нужно помнить всегда. Поэтому я удалю vertical-align у элементов.



.search__field{
width: 135px;
height: 25px;
background-color: #D2D2D2;

padding-right: 10px;
padding-left: 10px;

font-size: 12px;
transition: width 0.9s 0s;
float: left;
}
.search_button{
width: 25px;
height: 25px;

float: left;
text-indent: -9999px;
background: url("../images/search_icon.png") no-repeat 0 0;
}


Заключение



Когда я начал писать статью, я не думал, что описание своих ошибок будет занимать такой объем текста. Поэтому, если вы хотите продолжить разбор ошибок следующий блоков, то напишите мне об этом в комментариях.


Original source: habrahabr.ru (comments, light).

https://habrahabr.ru/post/307210/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
MilediFox

110 САЙТОВ ДЛЯ ХУДОЖНИКОВ, ДИЗАЙНЕРОВ И ПРОСТО ТВОРЧЕСКИХ ЛЮДЕЙ

Суббота, 30 Июля 2016 г. 14:20 (ссылка)


1. abduzeedo.com

Отличный сайт про логотипы и дизайн вообще (причем с подробными объяснениями).



2.
freelanceswitch.com

Сообщество всех внештатных дизайнеров (фрилансеров, если хотите) для работы за рубежом.



3.
free-lance.ru

Подобное сообщество внештатных дизайнеров в русском варианте. Предложение появляются практически каждый час, так что ушки на макушки и вперед!



4.
computerarts.co.uk

Международный интернет-журнал о компьютерном искусстве.



5.
everycreative.com

Сайт, в котором собраны по кусочкам практически все сферы дизайна, с многочисленными вдохновляющими примерами.



6.
davidairey.com

Сайт дизайнера Дэвида Эрейа David Airey). Здесь он делится своим опытом в сфере графического и лого дизайна.



7.
behance.net

Сайт, собравший в себе портфолио художников, дизайнеров и людей искусства со всего мира. Честно говоря, по-настоящему вдохновляющий сайт.

Читать далее...
Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Pyromania

Мать честная...

Вторник, 19 Июля 2016 г. 09:12 (ссылка)


Добрался таки до реконструкции балкона. Оторвал изнутри кусок фассада. Надо сказать, максимум, что я там расчитывал найти из утеплителя - это ничего. Но результат превзошел.



Уверен, так запихать туда "пенку" не сможет даже клинический гуманитарий, это делал явно психически нездоровый человек.



983089_DSC_3587 (466x700, 118Kb)



Попробуем подобраться к ним поближеТМ. Видим некий концепт.



983089_DSC_3589 (466x700, 90Kb)



Общий план. Вишенкой на торте служит кусок подоконника (да, это кусок подоконника), который я оттуда извлек.



983089_DSC_3590 (466x700, 116Kb)

Метки:   Комментарии (2)КомментироватьВ цитатник или сообщество
NetFact

Создание сайта под ключ на заказ (2016) Видеокурс » NetFact.Ru: Скачать бесплатно – Популярная Интернет Библиотека

Вторник, 12 Июля 2016 г. 13:44 (ссылка)
netfact.ru/videotech/3102-s...okurs.html


Создание сайта под ключ на заказ (2016) Видеокурс




Из данного курса вы узнаете, как на заказ создавать сайт с нуля и до 100%-го результата. Самое главное в этом курсе то, что показан весь процесс – от момента, когда дизайн есть только в виде картинки, и до момента, когда сайт полностью готов. В качестве основной CMS для разработки сайта используется «MODx Revolution».



Содержание:

Урок 01. Техническое задание и разработка прототипа

Доп. урок: Быстрое создание скетча в wireframe.cc

Урок 02. Эскиз. Рисуем прототип секций (часть 1)

Урок 03. Эскиз. Рисуем прототип секций (часть 2)

Урок 04. Дизайн шапки

Урок 05. Дизайн первой секции

Урок 06. Дизайн второй секции

Урок 07. Дизайн третьей секции

Урок 08. Дизайн четвертой секции

Урок 09. Дизайн шестой и седьмой секций

Урок 10. Дизайн секций Отзывы, Контакты и подвала

Урок 11. Подготовка Front-End окружения. Начинаем верстать макет

Доп. урок: Стартовый шаблон для верстки сайтов _optimized_gulp_sass (запуск, решение проблем, описание)

Урок 12. Начинаем верстать шапку

Урок 13. Верстка шапки

Урок 14. Верстка. Адаптивная шапка + адаптивное меню

Урок 15. Верстка. Полоса преимуществ

Урок 16. Верстка. Секция Наш профиль

Урок 17. Верстка. Плавная pop-up галерея (Magnific-Popup)

Урок 18. Верстка. animateNumber + верстка секции Направления

Урок 19. Верстка. Секция Наши работы + Pop-up

Урок 20. Верстка. Секция Поставляемое оборудование. Карусель

Урок 21. Верстка. Секции Скидки и Менеджеры

Урок 22. Верстка. Карусель брендов

Урок 23. Верстка. Отзывы

Урок 24. Верстка. Контакты

Урок 25. Обновление Front-End рабочего "Gulp" окружения и установка "Browsersync"







Создание сайта под ключ на заказ (2016) Видеокурс



Создание сайта под ключ на заказ (2016) Видеокурс



Создание сайта под ключ на заказ (2016) Видеокурс






Информация о видеокурсе

Название: Создание сайта под ключ на заказ

Автор: Климанов Алексей

Год выхода: 2016

Жанр: Видеокурс

Язык: Русский



Выпущено: Россия

Продолжительность: 18:31:21



Файл

Формат: MP4 (+ доп. материалы)

Видео: AVC, 1280x720, ~593 Kbps

Аудио: AAC, 192 Kbps, 48.0 KHz

Размер: 7.61 Gb



Скачать: Создание сайта под ключ на заказ (2016) Видеокурс



Скачать | Download | TurboBit.net

http://turbobit.net/d5kkzsg0k6yv/Sozdanie_sayta_pod_klyuch.rar.html



Скачать | Download | HitFile.net

http://www.hitfile.net/w8aYecz/Sozdanie_sayta_pod_klyuch.rar.html



Скачать | Download | Файлообменник.рф

http://файлообменник.рф/qcicic3wnbc3/Sozdanie_sayta_pod_klyuch.rar.html

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
Pyromania

Серебряный портсигар

Вторник, 05 Июля 2016 г. 07:36 (ссылка)


Каждому нужно что-то вещественное и реальное, за что можно ухватиться.



Nikon d700 + Tamron 28-75/2,8 ТЧК



Странно, банально, но почему-то иногда только вновь обретя утраченное, понимаешь, как много оно для тебя значит, и почему ты долгое время жил как бы наполовину.

Метки:   Комментарии (2)КомментироватьВ цитатник или сообщество
Pyromania

Кровать. Или "немного прибрался" )))

Воскресенье, 04 Июля 2016 г. 01:02 (ссылка)


Кровать - это не только место для секса и отдыха, но оказывается еще и охренительный склад аж на 2 куба.



Хлядите, чего у меня получилось. Без гусениц, к сожалению, но тож неплохо:



983089_bed (535x700, 294Kb)



Как вспомню, что недавно это все торчало из всех шкафов, прочих мест, валялось под ногами и заполняло все горизонтальные поверхности в доме, так вздрогну.



Жаль, внешняя отделка временно откладывается. В конечном итоге выйдет (уже рисовал) примерно вот такая пепяка:





Хотя и сейчас, если посмотреть в сложенном состоянии, вполне ничо. И да, это в 100500 раз круче, чем все диваны вместе взятые.

Метки:   Комментарии (3)КомментироватьВ цитатник или сообщество

Следующие 30  »

<верстка - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda