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)
Новые темыОбъявленияСвободное общение
16:45 ИКС Яндекс АПдейт 1 апреля 2026. Обновлён алгоритм расчёта 
19:02 Gambling Craft - гемблинг по белому 
17:03 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 
15:51 Яндекс-ап 20 марта и похороны ChatGPT, Claude и Gemini. Считаем убытки 
10:16 Бесплатное расширение для Chrome — проверка ссылок прямо на странице 
10:12 Gmail разрешил менять основной адрес - теперь можно убрать старые ники без переноса аккаунта 
18:01 Раскрутка форума 
18:24 Mixmasters - Exchange without AML and KYC 
16:57 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 
12:08 Продам аккаунты Gmail USA IP | Gmail MIX IP | Outlook Old 
11:19 Русские народные сказки - оцените! 
09:51 Swapwatch.org — Мониторинг криптовалютных обменников 
22:02 Продвижение YouTube видео в топ поиска | Любой тип контента | Гарантия результата 
21:58 Trustpilot Reviews | Подниму рейтинг вашей компании 
13:01 молодильные яблоки и живая вода 
04:35 Ставки на супер тренды в спорте 
15:49 Огородники 
00:06 Точные прогнозы на футбол 
16:25 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 
22:45 С юмором по жизни! 
15:42 Голландцы влепили Grok по яйцам - теперь нельзя раздевать реальных людей, штраф 100к евро в день