HTML и CSS практика
Страницы: 1
HTML и CSS практика
Всем привет! Никак не могу нормально сверстать psd шаблон самостоятельно. Понимаю как создать структуру html документа, понимаю, что делают те или иные css свойства. Но блин, как начну верстать, сразу появляется куча косяков. То отступы непонятные появляются, то элементы не могу поставить в нужное место! Вот не очень хорошо понимаю позиционирование. А как быстро вы научились верстать шаблоны? И еще кто-нибудь создает лэндинги на чистом html и css? На фриланс сайтах пишут, что требуется html верстка LP так вот, что в эту вертску входит? Там ведь нужно настроить всякие всплывающие окна, отправку форм, а это уже php.
Цитата
Alex пишет:
То отступы непонятные появляются
Сначала обнуляете все значения по умолчанию - сброс стилей, например:

_http://coderhs.com/archive/drop_default_css
Для html5 _http://coderhs.com/archive/css_normalize

Потом пишете свое.
Лендинг верстается обычным порядком, а функционал подвязывается на php и js. В верстку может входить js - по договоренности.

Посмотрите по верстке еще здесь _https://webref.ru/
Изменено: Coder - 13 Февраля 2016 21:49
Цитата
Alex пишет:
Но блин, как начну верстать, сразу появляется куча косяков. То отступы непонятные появляются, то элементы не могу поставить в нужное место!
у 99% начинающих верстальщиков такая проблема есть, все мы через это проходили. Могу посоветовать несколько тупой, но очень наглядный способ: закрашивайте background div'ов своих и смотрите, что там где с padding, margin, как оно ложится в блок-родитель. И ещё: не пренебрегайте просмотром кода элемента в браузере: там и визуально всё понятно, и размеры на лету покажет, да и поменять можно стили (да даже html-код) на лету и посмотреть результат.
Мы не можем похвастаться мудростью глаз
И умелыми жестами рук,
Нам не нужно все это, чтобы друг друга понять.
Сигареты в руках, чай на столе - так замыкается круг,
И вдруг нам становится страшно что-то менять.
Я через просмотр кода в браузере вообще не могу работать
Изменено: Alex - 13 Февраля 2016 22:36
Цитата
Alex пишет:
Я через просмотр кода в браузере вообще не могу работать
не просмотр кода! Просмотр кода элемента! Попробуйте! наводите на мышку на свои элементы - он визуализирует margin, padding, покажет реальный размер, там же свойства примененные (по родословной). Вам понравится, я знаю smile:)
Я про это и говорю) Не понимаю эти отступы
смотрите: вот блок, непонятно почему себя ведет он как-то странно - смотрите код элемента: подсвечиваются отступы, справа или снизу (в зависимости от браузера) виден css элемента, пробуем менять значения - смотрим результат, приходит осознание постепенно. Самая частая ошибка: устанавливаются такие отступы и минимальная ширина блока, которые в сумме тупо меньше ширины блока-родителя, отсюда "странное поведение" и "непонятные отступы" и "неправильное выравнивание". Можно и чисто теорией баловаться - но такой подход крайне не эффективен, практика - наше всё! А код элемента - в разы (если не на порядок) убыстряет эксперименты при полной наглядности. Пробуйте. Или читайте, если лень делать "по-русски" smile:)
А бутстрап верстка, стоит ли начинать сразу с нее или лучше верстать LP дивами?
Цитата
Alex пишет:
А бутстрап верстка, стоит ли начинать сразу с нее или лучше верстать LP дивами?
ясно-понятно... Начинайте с дивов. Забудьте слово bootstrap на некоторое время. На то время, пока ответ для Вас не станет очевиден, а сам вопрос выше сформулированный не покажется нелепостью. Иначе - никак (лишь симуляция).
Изменено: Дивергент - 14 Февраля 2016 02:37
Дивергент, не совсем вас понял
Цитата
Alex пишет:
Дивергент, не совсем вас понял
Разберитесь с div'ами сначала, отдельно, без надстроек любых. Начинать с бутстрап - это как приступать к изучению тригонометрии без знания таблицы умножения. Образно, конечно, и утрируя, но суть, думаю, ясна.
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
08:50 AntiBot Cloud - бесплатный скрипт и сервис защиты сайтов 
08:32 Где узнать статистику о количестве пользователях интернета по регионам России? 
03:50 Teasermedia.net 
03:13 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения? 
02:04 Нужна помощь советом! 
01:59 Стоит ли добавлять сайт в Rambler топ 100? 
01:51 Индексация страниц 
04:06 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 
18:00 Обменник криптовалюты OnlyCrypto 
17:25 SpaceSwap.cc - Быстрый и надежный обменник криптовалют 
16:04 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 
06:29 Продам готовые лиды по маркетингу, разработке, дизайну, CRM и другие в DIGITAL услугах. ГЕО - Россия 
22:19 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 
15:26 CactusPay.PRO | Умная платёжная система с выводом в USDT TRC-20 
08:30 150+ хакерских поисковых систем и инструментов 
03:00 Накрутка поисковых подсказок 
01:10 Точные прогнозы на футбол 
17:41 Стряхнуть обыденность - об Агасфере 
10:54 Добро пожаловать в цифровой мир... 
22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 
11:58 Куплю проигрышные букмекерские аккаунты