Html сайт с нуля: Как создать сайт с нуля при помощи HTML

  
  <данные div-off-canvas>

   & times; 


  
  Категория 1  
  
  Категория 2  
  
  Категория 3  
  
  Категория 4  
  
  Категория 5  




  
  Справка  
  
  Статус заказа  
  
  Связаться  
  
  Моя учетная запись  

  

Мы показали вам, как быстро запустить ваш сайт электронной коммерции с помощью Foundation eCommerce Kit, но не останавливайтесь на достигнутом! Существует более 100 строительных блоков, которые можно использовать для улучшения ваших страниц. За считанные минуты мы создали статический сайт электронной коммерции с помощью Building Blocks. Это сэкономит вам много времени, которое теперь вы можете использовать для наложения визуальных элементов и стилизации сайта в соответствии с вашим брендом.

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

Эта статья впервые появилась в журнале net magazine , выпуск 266.

Статьи по теме:

Создайте свой собственный сайт-портфолио с нуля: Введение в HTML и CSS | Расшифровка стенограммы Alexa S

1. Введение + настройка: Привет, ребята, меня зовут Алекса.Я дизайнер и разработчик, и сегодня я собираюсь научить вас создавать простую веб-страницу с использованием HTML и CSS. Итак, это страница, которую мы собираемся создать. Я сделал его похожим на страницу портфолио. Итак, у нас есть раздел для вашего имени, небольшое описание и немного о себе, а также этот небольшой раздел, где вы можете как бы перечислить свои навыки. И затем у нас есть сетка проекта, которая в конечном итоге будет строить эти маленькие отдельные страницы проекта, и мы будем ссылаться на них из сетки проекта.Так что я очень рад показать вам, как все это построить. И я также хочу, чтобы вы, ребята, загрузили свои конечные результаты в галерею продуктов. И я надеюсь, вы как бы потренируетесь немного конструировать. Может быть, использовать свои собственные изображения. Я бы хотел увидеть то, что у вас тоже есть на моей странице. Обязательно нажмите «Follow», чтобы получать уведомления о новых классах. Я загружаю, потому что я определенно хочу продолжить этот проект, возможно, добавлю к нему некоторый сценарий задания, немного больше функциональности и, возможно, в будущем, сделав его немного более модульным.У меня есть этот набросок Moxon, и я, гм, также свяжу этот документ. Если вы хотите скачать скетч, у них есть бесплатная пробная версия. Думаю, на месяц. И тогда вы можете войти сюда и действительно увидеть все, что находится здесь на высоте, чем я и собираюсь заниматься, пока мы создаем наш сайт, вы также можете выбрать что-нибудь и нажать кнопку . И тогда вы получите количество пикселей между разными элементами. Так что это действительно полезно. Гм, когда вы разрабатываете, чтобы получить все до пикселя.Так что, если вы хотите загрузить бесплатный пробный эскиз, вы можете открыть его здесь. В противном случае я также прикреплю их только в формате pdf, чтобы вы могли их визуально рассмотреть. Итак, теперь я собираюсь кодировать вспомогательный текст. Так что, если вы хотите скачать этот редактор кода, мне он очень понравится. Гм, это действительно просто. Я думаю, что да. Вы можете увидеть на их веб-сайте, какие функции он имеет. Но на самом деле, функция, которая мне нравится, заключается в том, что она вроде как автоматически завершается, когда вы вводите разные вещи.Итак, это редактор кода, который я собираюсь использовать, чтобы вы могли предоставить его. Я пишу и скачиваю. Это бесплатно. Он будет спрашивать вас, наверное, несколько раз, например, вы бы хотели заплатить за полную версию? Но у меня были прекрасные тесты вот уже четыре года, и я просто продолжаю говорить «нет». И это нормально. Итак, вы также можете использовать Адама. Я знаю, что некоторым людям очень нравится этот редактор кода, гм, код Visual Studio - еще один популярный. Так что, если вы не стесняетесь использовать то пальто, которое, очевидно, хотите, но не то, на ком я собираюсь использовать, так что я также хочу показать вам, как мы собираемся все настроить.Итак, у меня есть свои издевательства. Мне очень нравится иметь возможность легко переключаться между экранами. Итак, у меня есть свои макеты здесь, а затем у меня здесь мой код, а затем, когда у нас будет наш сайт, мы будем смотреть на него именно здесь. О, это очень похоже на просмотр вещей. А сейчас у меня здесь только набросок. Но сейчас я проведу вас через настройку файловой структуры для нашего небольшого проекта. И давайте начнем с настройки типа наших файлов и папок, чтобы вы могли видеть, что я создал папку под названием Skill Share.Вот где я буду хранить все документы. Хм, а внутри у меня просто файл с эскизом. Вот где я издеваюсь над нашими, гм, и поэтому позвольте мне создать еще одну папку. Я просто назову это активами. Хм, я так внутри всей этой папки, у нас будет папка с названием CSS um, и папка Not in There Folder, здесь она называется Image. И вот где мы собираемся хранить все изображения. У меня есть изображения, загруженные на сайт Skill Share, так что вы, ребята, можете просто скачать их или использовать свои собственные.Ага, и изображение CSS. А потом, как правило, я бы, как владелец Js здесь, гм, ослабил бы Бога, чтобы, гм, в последующих классах все учили вас, как добавить немного JavaScript. Наверное, Джейк устал от вашего сайта. toe добавить немного больше функциональности. Но для этого класса вам просто нужен ваш CSS и папка с изображениями. Хм, а затем мы перейдем к нашему возвышенному тексту и сохраним его как index HTM прямо здесь. 2. HTML Boilerplate + Header: мы собираемся начать писать HTML. Так что для этого, ммм, обычно я просто использую Google как стартовый шаблон html, потому что это много шаблонного, а его много.Гм, это вроде как каждый документ, который вы настроили, будет иметь одно и то же. Так что его легко просто скопировать и вставить, гм, так что здесь я погуглил, как стартовый html-код. Так что этот мне кажется неплохим. Я собираюсь скопировать это, и я собираюсь пройти его index dot html. Потрясающие. Итак, начнем с того, что у нас есть эта маленькая, ммм, доктор Док, тип точка html. Так что это просто позволяет браузеру не любить что? Это чтение. Гм, а мы пишем на html пять. Гм, а затем у нас есть наши HTML-теги, чтобы вы могли видеть, что у всех тегов есть этот маленький стартовый тег с двумя каратами вокруг него, а затем у него есть закрывающий тег с небольшим переносом и косой чертой. Заметьте, что и голова, и тело.Это тоже есть. Поэтому большинству тегов нужно начинать с тега. И есть пара, например, meta. Ему просто не нужен закрывающий тег. Так что это просто то, к чему привыкаешь, когда пишешь. Гм, еще HTML. Поэтому мы всегда начинали с оболочки. Мы всегда начинаем с головы. И этот вид сообщает браузеру некоторую важную информацию, такую ​​как заголовок, описание. Ах, автор. И тогда здесь мы также будем связывать наши файлы CSS. Здесь мы будем связывать любой из наших файлов сценария работы, ммм или любые другие зависимости.Как, например, позже мы будем связываться, гм, здесь весело. А затем, после закрывающего тега головы, мы запускаем тело. Гм, и вот здесь, я полагаю, на этой табличке со спойлером есть небольшой сценарий в сценарии. Всегда идет прямо перед или обычно идет прямо перед закрывающим телом. Введите этот пример. Я просто удалю это, потому что сейчас нам это не понадобится. Гм, и как вы можете видеть, как и теперь, голова и тело выровнены по левому краю, а затем, например, внутри головы было немного постукивано, так что это просто сохраняет наш код действительно чистым.Гм, и так это легче читается. Мы можем изменить название. Я просто назову это портфолио по обмену навыками, и тогда наше описание будет просто: Эй, простой сайт придворного фолианта. Гм, и мы можем сделать автора, вы знаете мое имя, и тогда мы поговорим об этом чуть позже. Итак, если вы это видите, а затем вы заходите в свои файлы и дважды щелкаете по нему, это откроется в окне браузера. И здесь обслуживается ваш сайт. Так что прямо сейчас у нас ничего нет, потому что все в голове - это просто то, что нужно браузеру.Нет. И все в теле - это то, что вы на самом деле будете рендерить, чтобы мы могли войти в тело. И давай, Том, напиши что-нибудь. Я думаю, это приведет к тому, что файл ролей вернется в браузер. Мы обновляемся, и теперь вы увидите, что это кайф. Гм, я не был Так что теперь мы собираемся начать, эм, разрабатывать структуру нашего сайта. Таким образом, мне нравится создавать сайт, когда я настраиваю большую часть скелета HTML, а затем мне нравится начинать работать с CSS. Так что, наверное, это похоже на то, что я дизайнер и привык сначала делать каркасы, а затем строить, ммм, больше готовых макетов.Я тоже люблю строить свои сайты таким же образом. Итак, мы собираемся начать с заголовка, который находится прямо здесь, а затем перейдем к этому маленькому герою, а затем поработаем над проектами. И поэтому я действительно хочу сначала изложить все эти вещи. Итак, мы собираемся выложить их кубиками. Так что это провал. Гм, и вы можете видеть, что мой возвышенный редактор кода автоматически завершает eso. Если я нажму вкладку, тогда я получу свой открывающий тег в моем заключительном налоге, так что это действительно полезно.Ваши фишки похожи на строительные блоки сайта. Гм, я думаю о них, как о прямоугольниках. И когда я смотрю на такой макет, я говорю: «Хорошо, мне нужно искупаться здесь». Мне нужно искупаться здесь. Хм, мне, наверное, понадобится пара здесь, а потом все эти воздушные фишки. Итак, мы собираемся сюда войти, и на самом деле есть тег на элементе под названием Header. Итак, вы собираетесь использовать это, и я нажму Enter, потому что мне нравится, чтобы мои теги были выровнены по левому краю, ммм, в той же строке и внутри моего заголовка.Верно. Я думаю, оглядываясь на свой сайт, я думаю, мне понадобится мой логотип здесь, так что это, вероятно, будет div. А потом мне понадобятся эти три ссылки, так что я, наверное, их вставлю. Гм, я мог бы просто поместить их три отдельных смерти, но подумав, что я, вероятно, не собирался помещать их, ммм, хотел, а затем, э-э, три дня в этой смерти, на всякий случай, когда я, возможно, строю для мобильных устройств. Если что-то нужно перенести, будет проще, если все будет в одной маленькой секции. Итак, я собираюсь перейти к своему заголовку, и я буду творчески, и я дам ему класс, который в основном просто дает ему имя.Я назову это логотипом. Итак, это имя класса, мм, сообщает браузеру, что этот логотип с именем Дэвиса, и когда мы заходим в наш файл CSS, это в основном стиль. Гм, он будет использовать этот класс с именем toe add для езды на велосипеде. Итак, есть класс и есть I D, оба имени. Гм, но я собираюсь использовать классификацию, потому что классы можно использовать повторно. Итак, если бы у меня был другой, имел ли этот необходимый палец ноги, скажем так, те же характеристики, что и логотип. Я мог бы использовать это имя класса для второго различия.Хорошо, но я бы сказал, что вы можете использовать только один отжим, так что это немного более конкретно. Гм, мы также поговорим об этом немного подробнее в нашем файле CSS, потому что там, гм, идеи берут на себя президентов над классом. Похоже, что если вы поместите это, например, стиль на I.D. Гм, вот как это проявится, если он перезапишет класс. Так вот мой классный мой писец. Я собираюсь ввести это, а затем я скажу, что я знаю, что мне нужно изображение для моего логотипа. Итак, я собираюсь разместить изображение и посмотреть это. Изображение не требует времени закрытия.И мой редактор кода это знает. Поэтому, когда я вкладываюсь, он просто отправляет мне это, эм. И поскольку мы настроили нашу папку с изображениями, я знаю, что мое изображение будет в папке с изображениями. Um Так, например, прямо сейчас мы пишем код в HTML с индексной точкой. И поэтому мне нужно сказать браузеру, чтобы он зашел в эту папку, чтобы найти изображение. Вот о чем мы здесь пишем, и давайте посмотрим. Прохладный. Итак, после моего изображения у нас есть небольшая, ммм, навигация. И я собираюсь внести это в список, потому что, когда у вас есть, вроде бы, некоторые из тех же вещей, которые отсутствуют, просто неплохо внести это в список.Гм, а это новый упорядоченный список. Это то, что вам нужно. И затем у нас есть эти элементы списка, поэтому мы можем поместить все, что вы хотите. Вы должны быть. Я поставил Думаю, я поставил Instagram, вы можете связать свой Instagram, гм, тогда я Tribble, и мы можем поставить Facebook. Я не уверен, что еще, но круто. И еще одна вещь, которую я хочу добавить сюда, - это тип привязки. Это просто, гм, и я нажимаю time, а затем вижу, что мне нужно переместить свой тег и вокруг ссылки, потому что мы хотим, чтобы эта ссылка была ссылкой, а это то, что тег in anger включен.И тогда эта маленькая восьмерка в основном похожа на что? Это ссылка. Таким образом, мы могли бы поставить как instagram точка com. Вот где вы должны добавить, мм, вот где вы добавите, мм, ссылку на свой Instagram, и тогда то же самое произойдет с проблемами. Может фейсбук? Я просто заполню их здесь и переместу теги гнева, чтобы пройти по ссылке. Хм, просто сейчас здесь косую черту. Я получу ссылки позже. Гм, круто. Так что мы можем сказать это. Посмотрим, как это выглядит прямо сейчас. Потрясающие.Таким образом, мы как бы видим, что у нас есть, например, то, куда пойдет изображение, а затем куда пойдут ссылки, но они вообще не стилизованы. Так что обычно я просто продолжал бы так и ничего не стилизовать. Эм, но я собираюсь Тео хотя бы немного стилизовать заголовок, потому что я думаю, ммм, вы, вероятно, захотите выяснить, как он будет выглядеть, и это, вероятно, будет немного менее скучным. Итак, давайте перейдем в нашу папку CSS. Гм, это то место, куда мы собираемся поместить наш файл CSS. Итак, если я создам здесь новый файл и скажу это, я назову его стилем точечного CSS, и я пойду внутрь Ниццы.Да, это Холдер. И я увижу это там. Хотя круто. Теперь, когда у нас есть файл CSS, мы можем приступить к стилизации наших HTML-элементов. Итак, первая единица, которая у нас есть, - это заголовок. И если мы посмотрим на заголовок, внимательно изучим наш файл эскиза, я вижу, что он имеет ширину 9 60 мкм, и у нас есть некоторые элементы, которые выровнены, справа, и у нас есть еще один элемент, который выровнен по левому краю. . Итак, я собираюсь пойти дальше и сначала я свяжу это изображение. Так что изнутри запах Rh, я собираюсь использовать изображение.Думаю, я назвал это логотипом. Станьте идеальным. Итак, мы собираемся использовать логотип в формате PNG, и теперь вы можете видеть, что у нас есть наше изображение прямо здесь. Хм, еще одна вещь, которую я хочу сделать, собственно, вокруг изображения. Я хочу добавить ссылку, поэтому я просто сделаю то же самое, что и с этими длинами. Я собираюсь добавить тег привязки и окружить этот элемент изображения галстуком гнева. И я собираюсь сделать черновик A просто косой чертой, эм, который должен просто вернуть вас на страницу, и что? Ах, ммм, логотип обычно появляется, если вы нажимаете на него, просто возвращаясь домой.Так что мы оставим это там. Эм круто. Итак, наш заголовок, который мы видели, был размером 9 60 Um, поэтому, если я перейду к стилю, я могу перейти к заголовку, и я могу пойти с ними, могут пойти 9 60 пикселей и сказать это. А теперь, если я обновлюсь, вы ничего не увидите. Но если мы углубимся в это, инспектор Итак, это инспектор и хром. Итак, как я это сделал, я просто щелкнул правой кнопкой мыши и спустился, чтобы проверить. И тогда это откроет это окно, и вы действительно сможете просмотреть все элементы html. Вот здесь я вижу свой заголовок.Верно? Причина того, что это не связывалось, заключалась в том, что мы не связали себя листом внутри своей головы. Здесь я сказал, что у нас есть ссылка на важную информацию Teoh. А, вы увидите прямо здесь, что шаблонный тип идет с этим, мм, уже связанными стилями, потому что это, вероятно, самый распространенный синтаксис, который мы собираемся использовать. Мы призвали наших солдатиков к стилю избавиться от этого. Итак, теперь мы сами, Раскрываем Таблицы. Итак, если мы наведем курсор мыши на заголовок, вы увидите, что это 960 пикселей, почему. А теперь нам нужно будет центрировать его, чтобы я мог перейти к стилю.И Айкен дио наценка. И если я сделаю маржу автоматически, это будет, ммм, центрировать мой заголовок, потому что он просто делает автоматические поля с обеих сторон. Прохладный. Итак, теперь у нас есть это возвращение к моему файлу, хотя я вижу, что все будет, мм, 960 пикселей. Итак, я думаю, что внутри моего заголовка я хотел бы обернуть все в div. Итак, мы собираемся поместить все в смерть и в логово, так что мой напряженный только Том два пространства, некоторые люди воздух четыре. Это действительно личные предпочтения. Гм, и вы действительно можете перейти к возвышенному здесь и щелкнуть по нему, и он покажет что? Вкладка с ISS.Итак, моя вкладка с настроена на ... Итак, я создал это мертвое, и я назову этот контейнер Div, и я собираюсь дать контейнеру с размером 960 пикселей. Гм, так что все в нем, гм, он будет оставаться в пределах 1960 пикселей. И затем я также знаю, что я смогу повторно использовать этот класс, потому что все остальное на сайте, гм, находится в том же самом контейнере. Так что я вернусь к своему стилю и заменю его на контейнер. И вы увидите, что когда я вызываю тег, например заголовок, я могу просто написать заголовок.Когда я вызываю класс, я должен использовать точку, а затем контейнер. И когда я взываю к нему, Я использую маленький хеш-тег. Эм, если бы у нас был идентификатор, называемый хэш-тегом liga. Итак, теперь у нас 960 пикселей, поле автоматически. Это должно выглядеть так же. Теперь вы увидите и услышите, что все находится в этом контейнере. Мы можем открыть это. Мы увидим наш логотип в наших списках с цитатой. Итак, теперь я вернусь к своему файлу, потому что хочу посмотреть, насколько он велик. Мой логотип такой, что мы не промахнемся. Я вижу, это 100 мкм, ширина пикселей и высота изображения тоже.Итак, я собираюсь начать использовать это. Итак, я собираюсь взять логотип своего класса и присвоить ему 100 пикселей, и это должно сделать наш логотип шириной 100 пикселей. Итак, если мы перейдем сюда и обновим, то увидим, что ничего не изменилось, потому что нам нужен логотип. У вас есть 100 пикселей в ширину, но изображения по-прежнему сохраняют свой исходный размер. Так что я просто пойду сюда и скажу логотип, а затем изображение, и я собираюсь сделать изображение 100%. Таким образом, изображение должно занимать 100% своего контейнера.Гм, и способ обойти это. Итак, поскольку изображение вложено в наш логотип, значит, именно так вы получили этот элемент. Поскольку на нашем изображении нет класса, мы можем сказать, ммм, логотип div с изображением, вложенным в него, так что это изображение будет со 100% -ным значением Потому что, если мы просто написали изображение, тогда все изображения, мм , было бы со 100%. Мы хотим сказать изображение внутри логотипа. Def. Я все еще здесь и обновлю это. И похоже, что это сработало. Что ж, гм, круто. Итак, теперь мы можем перейти к нашему списку, и вы увидите, что браузер добавляет эти небольшие маркеры.Это просто стиль браузера. Гм, во всех браузерах есть какие-то встроенные стили, которые применяются к определенным элементам. Так что мы, вероятно, просто избавимся от этого. Итак, мы собираемся перейти к нашему CSS, мы подойдем к вам хорошо, и мы сделаем стиль списка. Гм, и мы не скажем ничего. Так что это убирает эти маленькие пули. Гм, а затем, поскольку все эти элементы как бы наложены друг на друга, и мы хотим, чтобы они как бы красиво располагались рядом друг с другом, мы скажем вам, что я. Итак, мы собираемся сказать list, и мы скажем: отображать в строке, смотреть.Итак, как только мы это скажем и обновим, мы должны увидеть, как все они плавают рядом друг с другом. Послушайте, и еще мы замечаем, что логотип и список тоже расположены друг над другом. Таким образом, мы собираемся исправить это, вернемся к этому. Правильно ли логотип перекрестный, мы скажем, черный цвет. И что? Это показательно. Браузер просто выровнял это по левому краю, сдвинул влево, эм, а затем мы перейдем в RUL и скажем float, и мы скажем right, и так это должно исправить это.У нас будет рост. Твоя голова. Как видите, мне нужен заголовок размером 120 пикселей. Итак, мы скажем Заголовок. Я на самом деле собираюсь поставить эту высоту на контейнер, поэтому, если я войду сюда, я скажу заголовок, и я скажу контейнер, поэтому я не хочу добавлять это в наше правило. здесь, потому что тогда все контейнеры будут 100 и 20 пикселей. Но если я положу его на контейнер, который находится в пределах высоты заголовка, он просто изменит только этот контейнер. Теперь у нас есть высота 120 пикселей.Так что теперь я действительно хочу Тео. Гм, выровняйте все по центру. И на самом деле я собираюсь сделать это с помощью чего-то, что называется Flex Box. И поэтому, если я войду в свой контейнер и скажу display и скажу это, display flax and flex box - это на самом деле то, что вы можете просто погуглить. Хм, прямо здесь, полное Руководство по Flex Box - это действительно полезный парень, который расскажет вам, гм, но все свойства, доступные в Flex Box. Итак, видим на нашем контейнере, мы ставим Flex. И как только мы это сделаем, все эти различные свойства станут доступны, поэтому я использую это.Центр. Мне тоже очень нравится использовать гибкий бокс. Эм, вроде как сосредоточить внимание или оправдать другой контент. Итак, когда я добавляю display flex, гм, а затем я могу добавить это свойство, называемое элементами строки. Итак, это выравнивает все элементы внутри моего гибкого контейнера, и поэтому я собираюсь центрировать позицию. Итак, как только мы вернемся к нашему колодцу, вы увидите, что когда я все обновляю, это линия к центру, и вы увидите, что мои, мм, плавающие элементы подпрыгнули. И это только потому, что мы больше не собираемся использовать поплавки с гибким боксом.Эти две вещи. Мне нравится использовать черный ящик вместо плавающих вещей. Но я просто хотел показать вам, как работают поплавки. Итак, мы выравниваем элементы по центру, а затем мы можем сделать то, что называется выравниванием содержимого, и я собираюсь сделать промежуток между ними. Это в основном означает, что все, что находится внутри этого гибкого блока, мы собираемся оправдать всем пространством между ними, так что вы увидите, что это означает. Это как бы просто означает, что эти элементы согласовываются. Гм, их раздвигают, потому что все промежутки между ними - Классные.Итак, теперь у меня есть голова или я выгляжу так, как я хочу, эм, я собираюсь добавить эту небольшую базовую вещь, поэтому я собираюсь сделать нижнюю границу, и я собираюсь сделать один пиксель твердый. Я сделаю светло-серый, потому что это, наверное, ах, цвет, который может работать. Итак, у брата есть определенные встроенные цвета, но вы также можете использовать, например, шестнадцатеричные коды, которые вы, вероятно, так привыкли видеть, почему? И это было бы черным от, и вы можете просто Google должен, как я обычно нахожу их, или я просто нахожу их в моем файле эскиза.Так что это будет прямо здесь. Гм, круто. Итак, у нас светло-серый, обновляем. А теперь у нас есть маленькие разделители, так что мне это очень нравится. Я знаю, что они не стилизованы, но я думаю, что мы продолжим строить больше скелета, а затем вернемся и доработаем все наши стили. 3. Раздел героев: Хорошо, теперь мы будем работать над разделом изображений героев с этим небольшим блоком описания. Итак, я собираюсь начать. Мы собираемся нажать Enter после того, как заголовок призвал вас ввести еще раз, чтобы вы могли лучше его рассмотреть.И мы добавим тег раздела. Итак, я собираюсь разделить этот раздел на раздел и проектный раздел на раздел. Хм, и мы назовем это, Давайте назовем это классным охлаждением, ммм, здесь и затем в это Круто. Итак, возвращаясь сюда, у нас есть один блок изображения, другой блок с налогами и небольшими тегами. Итак, я собираюсь сказать, что это можно разделить на два провала, и тогда это, вероятно, также может быть 1/3 Div. Когда мы перейдем к этому, мы поговорим о немного другом позиционировании.Прохладный. Итак, первое, что я собираюсь сделать, это добавить сюда свой контейнерный класс, потому что мы все еще хотим, чтобы он был максимальным с 960 пикселями. Итак, я выхожу из своего маленького контейнерного класса, а затем я собираюсь добавить, ммм, div для, скажем, изображения. Итак, это большое изображение, которое было перемещено влево. Я назову этот классный образ героя. Итак, с интересом мы можем поместить наше изображение, ммм, и давайте посмотрим, чтобы мы знали, что оно будет в держателе изображений, и я вернусь к своим файлам и найду Plant Hero.Вот как я это называю. Итак, мы добавим растение Широ, вы платите? Потрясающие. Итак, теперь у нас есть настроенное изображение, а затем мы добавим еще одно определение, прямо под ним, и это будет день домов, это небольшое описание. Итак, я собираюсь войти и добавить класс, равный его названному герою. Просто так, вроде бы, важно дать вашим классам имя, гм, что-нибудь, что имеет смысл. Как будто я мог просто назвать их, как хотел сделать три. Но, называя героев в описании, я лучше понимаю, где они на самом деле находятся на странице.Итак, у меня есть мой маленький герой, Дэйв, а рядом с ним есть описание моего героя. Сделал Итак, давайте заглянем внутрь этого, мм так, описание. Похоже, у него есть заголовок, есть небольшой текст внутри, а также есть такие теги, где вы можете не добавлять какие-то свои навыки, я подумал, что это будет весело. Итак, в этом году описание, которое я собираюсь сделать в каждом из них, и это заголовок один. И я скажу вот что. Я просто написал описания. Я просто напишу описание.А затем, после этого, я собираюсь создать тег P, который является тегом абзаца, и поэтому он как бы используется для всех типов текста абзаца на веб-странице. Так что я думаю, что это, вероятно, хороший тег для этих двух мелочей. Итак, я просто скопирую этот текст, и мы поместим его туда, а затем мы поместим второй маленький абзац в другой тег абзаца. Хм, поэтому я просто вставил какой-то текст-заполнитель, потому что вы просто почувствуете внутри него все, что захотите. Итак, теперь у нас есть каждый маленький абзац, и я собираюсь создать еще один div для этих тегов, и я назову его. Давайте назовем этот класс навыками героя, а затем внутри этого, ммм, поскольку все они вроде как стиль такой же, я сделаю эти списки элементами, как я сделал для заголовка заголовка.Итак, давайте зайдем сюда, мы сделаем и список Norden, а затем мы сделаем список, и мы собираемся сказать Let Java script. Вы знаете, как это там, ммм. И последнее, что у нас есть. Итак, у нас есть вот этот материал, это изображение, которое у нас здесь жесткое, это описание. И тогда последний день, который у нас будет, будет твоим именем. Вот где я поставил свое имя. Мы назовем это именем, а потом посмотрите, скажите, Алекса Спейдель. Потрясающие. Так что мы вроде как только что построили этот скелет на самом деле всей этой секции, так что это было довольно быстро.Гм, мы это увидим, а потом мы посмотрим на это. Я пока закрою своего инспектора. Мы посмотрим на это здесь. Мы видим, что это изображение довольно большое. Итак, у нас есть изображение. У нас есть небольшой раздел описания, а затем у нас есть имя. Итак, теперь мы можем начать немного стилизовать раздел. Итак, у нас есть контейнер. У нас уже есть это как 9 60. И даже несмотря на то, что изображения выходят за его пределы, если мы заглянем в инспектор, мы увидим, что весь этот раздел позволяет увидеть, что мы называем героем, а затем контейнер.Размер контейнера 960 пикселей, так что похоже, что он работает правильно. Хм, сделай это немного меньше. Затем мы вернемся к нашему файлу CSS и начнем стилизовать его. Мы собираемся, Тео, подать ему эту маленькую коробку с изображениями. Я собираюсь заглянуть в свой файл скетча и вижу, что с перерывом в 6 30 пикселей на 80 пикселей. Итак, я собираюсь продолжить и скажу, что мой герой в Edge Dev, который я сделано прямо здесь. Эээ, так это изображение героя получилось. Мы собираемся поставить максимум 6 30 И это только потому, что я начинаю немного задумываться о отзывчивости, поэтому я собираюсь сказать, что это будет максимум 6 30, но это может становитесь немного меньше, если экран сжимается, и тогда мы можем сделать высоту 4 80 пикселей.Хорошо? И затем мы должны сделать то же самое, что и с изображением логотипа, чтобы организовать ваше изображение главного героя, а затем захватить это фактическое изображение внутри него. И в данном случае вы играли героями в возрасте. Давайте зададим ему высоту 100% и посмотрим, как это будет выглядеть. Потрясающие. Итак, причина, по которой я выбрал высоту 100%, заключается в том, что изображение немного короче, чем длинное. Поэтому я просто хочу убедиться, что по мере уменьшения размера экрана вы никогда не увидите пустого пространства, которое занимает изображение целиком.Вот почему я это сделал. Гм, просто глядя на это сейчас, я вижу, что изображение действительно близко к заголовку. И, как вы можете видеть в нашем макете, у нас есть небольшой промежуток между заголовком и изображениями. Итак, я собираюсь вернуться, и я думаю, что добавлю это пространство к нашему контейнеру, на самом деле, потому что таким образом мы знаем, что в каждой секции будет задержанный. Итак, если я поставлю, скажем, поле внизу Восточного Сакса, поле внизу заголовка и поле внизу, гм, этого героя, тогда у нас будет немного места.Итак, перейдем к контейнеру, и я сделаю маржу. А теперь о марже, эм, вы можете сделать маржу сверху. Можно сделать маржу снизу. Можете сделать маржу слева. Вы можете делать маржу, верно? Но вы также можете подправить поле и набрать четыре числа. Итак, 1-я 1 сверху, 2-я 1 правая. Третья 1 - нижняя, а четвертая - левая. Итак, в этом случае я скажу нулевую маржу для вершины. Еще хочу сделать авто для обеих сторон. Итак, я могу сделать средний Teoh на буксире, а затем 70 пикселей для нижней части.Так что я просто избавлюсь от этого, потому что он нам больше не нужен. Гм, и давайте посмотрим, как это выглядит. Потрясающие. Итак, теперь у нас есть немного места между разделами. Давайте посмотрим, действительно ли этот waas выглядит так, как будто в моем макете он больше похож на 60 пикселей. Так что минутное изменение должно быть 60. Плотно разгладьте его. Хорошо, круто. Итак, теперь мы увеличиваем наш раздел изображений. Гм, и посмотрите на это. Всего 7 20 Хорошо, так что наше изображение там выглядит немного большим, и это только потому, что для его образа героя мне нужно, чтобы вы поместили переполнение, а мне нужно скрыть.Это потому, что, когда я посмотрел на это, изображение выглядело немного большим, чем 603 пикселя, и я посмотрел на него, и он выглядел как 7 20 И, мм, я знаю, что у меня было Макс шесть с 6 30 И что происходило, было только что показывалось переполнение. Итак, мы поставили незамеченными, потекли скрытыми. Скажем так, и давайте посмотрим на это. Выглядит лучше. Потрясающие. Итак, теперь это 630 пикселей. Теперь мы займемся этим разделом описания, так что вернемся к ее маме. Посмотрим на это. Так что с 300 пикселей на нашей высоте 80.Итак, я перейду к описанию героя. Вот только А я бы сделал с плотностью 300 пикселей на 80 пикселей. А затем мы добавим цвет фона. Так что давайте просто возьмем это с эскиза. Вы берете это, и мы займемся фоном. Как нашлась и цифра. Так что посмотри, как это выглядит. Потрясающие. Итак, у нас есть рука того цвета, вы снова заметите, эти воздушные потоки накладываются друг на друга. Вроде как то, что мы сделали в шапке. Мы просто воспользуемся поплавками и растянем изображение нашего героя.Итак, left, а затем и float - это описание героя до последнего. Посмотрим, как это работает. Потрясающие. Еще раз, я как бы собираюсь сделать то же самое, что я сделал, мм, с заголовком, где я просматриваю плавающие предметы, а затем мои личные предпочтения льняной коробкой. Так что я заменю его на гибкий. Так что давайте пройдемся через это еще раз. Итак, мы возьмем контейнер, потому что он их держит. Верно? Итак, мы идем в раздел героев. Мы собираемся использовать контейнер, отображать гибкость, а затем, как и в заголовке, мы хотим, чтобы эти два элемента Teoh раздвинули друг от друга.Так что мы будем оправдывать контент. Мы сделаем пробел между ними и посмотрим, как это будет выглядеть. Хорошо, на самом деле у нас есть три отдельных элемента внутри нашего контейнера. Итак, у нас есть изображение, у нас есть описание. У вас также есть это маленькое имя. Итак, Тео, на самом деле просто примите во внимание изображение, а также описание. Хм, мы собираемся взять название за рамки обычного медленного. Итак, мы собираемся сделать это, взяв имя class, и скажем позицию, где она? Абсолютно.Когда вы говорите "абсолютное положение" или "фиксированное положение", это выводит эти элементы из нормального потока. Итак, как мы видели, когда мы добавляли if, как заголовок, а затем добавляли это, они как бы накладываются друг на друга. Гм, но когда мы позиционируем что-то абсолютное, оно пойдет, гм, скорее всего, оно пойдет в верхний левый угол. Так что это похоже на то, что тебя просто вырывают из нормального потока. Итак, предположим, что давайте посмотрим, что произойдет. Хорошо. Итак, у нас сейчас здесь Алексис федерал, и теперь вы можете видеть, Эм, добавив коробку для льна, Эм, сделал то, что я хотел, то есть на небольшом расстоянии между этими двумя элементами.Потому что теперь, когда это позиция, безусловно, она в основном исключена из потока, поэтому Fox Box на самом деле не рассматривает ее. Ладно, круто. Итак, давайте начнем стилизовать, эм, поле описания, а также маленькое имя. Я собираюсь услышать описание и добавить немного отступов. Посмотрим на наш макет. Похоже, у меня 70 пикселей вверху. А давайте посмотрим на это. И вроде бы 45 пикселей сбоку. Итак, мой отступ будет 70 пикселей, 45 пикселей. Итак, это еще одно небольшое сокращение.Так что вместо того, чтобы написать четыре, вы просто изнасиловали двоих. И это сверху и снизу, и это слева и справа, так что давайте сделаем. Хорошо, это круто. Итак, как вы можете видеть, когда я добавил, добавление этого поля стало намного больше. Итак, мы собираемся сделать что-нибудь наверху, пойдем сюда. Давайте сделаем это первым правилом, которое мы собираемся сделать звездой. А это значит все. И мы просто останемся коробкой, определяя размеры аварийных бордюров. По сути, это означает, что если есть Патти или есть граница, наша коробка не станет больше.Он всегда будет оставаться таким, например, для 80 и 300 пикселей. Давайте посмотрим, как это круто выглядит намного лучше. Гм, теперь внутри или описание. Мне нравится, как это выглядит. И давайте приступим к стилизации этих маленьких тегов. Итак, это был наш список, и это внутри навыков героя этого класса. Итак, я собираюсь убедиться, что я набираю навыки героя, а затем один упорядоченный список, потому что в противном случае он будет применен к списку в нашем заголовке. Так что я возьму это. Я иду, Теох, забери. Похоже, было немного отступов и полей.Я заберу пирожок. Я заберу маржу. Все выстроено немного лучше. Эм, и я собираюсь изучить навыки героя. Вы l А затем я возьму элементы списка и сделаю их фоновый цвет белым. Итак, это шестигранник для белых. А потом я позабочусь о цвете шрифта. Итак, цвет - это имя шрифта, и мы сделаем хэш с нулевым значением. Так что это черный цвет, и я собираюсь присмотреться к нему поближе. Похоже, у меня размер шрифта 12, а у меня их четыре.А из шести может получиться пять и 10. Итак, мы сделаем размер шрифта 12 пикселей, а затем добавим отступы, чтобы осталось немного места. Пять пикселей сверху и по 10 пикселей слева и справа, вот посмотрите. Потрясающие. А теперь похоже, что вам нужно добавить немного маржи. Мы собираемся вернуться. Мы собираемся сказать Арджуну. И я думаю, что мне нужно 10 пикселей сверху и снизу, и я собираюсь сделать пять пикселей слева и справа, Лоусон. На самом деле, я просто сделаю вам пять пикселей вокруг.Так выглядит немного лучше. Хорошо, отлично. Итак, теперь это в основном то, как это выглядело в макете. За исключением того, что тексту нужна скоростная дорога. Итак, мы возьмем описание героя, и я позабочусь о том, чтобы цвет текста был идеальным. Хм, а потом мы сможем немного поработать над шрифтом позже, когда мы вернемся и доработаем все элементы дизайна. Теперь давайте поработаем над этим. Алекса, он идет сюда. Это называлось именем. Мы собираемся сделать его горячим 250 на 60. Итак, мы скажем, что с 250 пикселей, ненависть в 60 пикселей, и мы сделаем так, чтобы текст был центром лжи.Получи это. А теперь цвет фона. Мы хотели черный. Итак, мы сделаем 000 и цвет нашего шрифта. Мы хотели Белый. Итак, я также собираюсь сделать гибкое отображение для этого, чтобы мое имя можно было выровнять по центру. Что-то делают в центре позиций. Еще собираюсь оправдать контент-центр. Тогда поехали. Мы получили это по центру. Ладно, круто. Теперь давайте повернем это вправо, чтобы мы могли повернуть это, используя свойство transformed, и мы можем сказать преобразовать, повернуть, а затем повернуть вправо на 90 градусов. И это как раз то, как вы это исправляете, и это должно изменить ситуацию.Хорошо, нам нужны отрицательные 90 градусов. И это должно перевернуть его сейчас, потому что это позиционируется абсолютно. Получилось немного странно. Итак, нам придется вернуться, и мы должны сказать, где это начинается и где заканчивается сейчас, так как это вращается, но обычно вы делаете верхний ноль, а вы оставляете ноль. Поэтому, когда мы помещаем, ммм, жестко и оставляем ноль, обычно это помещает его в верхний левый угол всей веб-страницы или в верхний левый угол, мм, это ближайший, относительно позиционированный родительский элемент. Так что мы как бы хотели это сделать.Так что я собираюсь расположить относительное положение на контейнере героя, и этот путь должен ах, идти прямо сюда снова. Итак, давайте перейдем к контейнеру героя и сделаем относительное положение, и они должны переместить его обратно вниз. Потрясающие. А теперь, потому что он повернут, он просто немного отклоняется. Итак, я собираюсь сказать, что вместо верхнего, ммм, нулевого человека, сделайте верхние 95 пикселей вместо левого Мюнхена. Минус 95 пикселей. Гм, и это выглядит немного лучше. Возможно, ему придется поиграться с расположением этого. Хм, но хорошо, что он всегда остается в контейнере героя.Так что, когда вы хотите изменить размер, он не будет двигаться идеально. Я думаю, что этот раздел выглядит неплохо. Гм, возможно, пора перейти к созданию нашего раздела обсуждения проекта. 4. Сетка проекта: Хорошо, давайте начнем с построения нашей сетки проекта прямо здесь. Итак, мы перейдем к каждому нашему электронному письму и, как и в случае с Hero, давайте создадим новый раздел и дадим ему имя класса. Эээ, скажем, проекты вы войдете туда и перейдете. А теперь вроде мы тоже не герои. Давайте добавим наш контейнерный класс, чтобы все Issa max с 960 пикселями, хорошо, а затем мы сделаем ди, гм, возможно, div вокруг наших фактических элементов проекта.Итак, я собираюсь создать div, и я назову этот класс, мм, сетку проекта. И внутри этого, это то место, куда мои, ммм, элементы изображения собирались идти. И поэтому я считаю, что каждый из них будет интерактивным, а затем он свяжет вас со страницей, которая выглядит так, гм, и показывает отдельный проект. Итак, чтобы сделать это, я думаю, мы собираемся создать различие со ссылкой вокруг него и изображением внутри. Звучит хорошо? Итак, внутри нашей сетки проекта давайте сделаем, мм, тив, и назовем этот класс.Мы назовем это элементом проекта, и поэтому внутри нашего элемента проекта у нас будет изображение, и это то место, куда будет помещено наше изображение. Так что это будет в нашей папке с изображениями вот так, а потом я выйду сюда, и я собираюсь поместить ссылку вокруг всего этого маленького элемента. Ну, просто вмятины, чтобы он выглядел красиво. Гм, и эта ссылка на страницу проекта, так что мы вернемся к этим. Мы создали страницы наших продуктов. Потрясающие. Итак, теперь у меня их шесть, так что я просто собираюсь скопировать их.Потрясающие. Так что посмотрим. И давайте обновим эту страницу и посмотрим, как это выглядит. Таким образом, вы можете увидеть все наши изображения в эфире здесь. Ну, кроме одного. Давайте обязательно займемся листовой зеленью. Bassem. Итак, вы видите все наши изображения. Гм, и мы должны указать заголовок для этого раздела. Итак, проекты. Итак, давайте поднимемся сюда, внутрь нашего контейнерного класса. Давай ударим и ее. Давайте сделаем это в каждом to и назовем это как вторичный заголовок. Мы назовем эти проекты так: "Это круто". А теперь займемся стилизацией зернистости.Итак, для этого я собираюсь изучить наш макет и щелкнуть элемент, и я увижу, что он имеет высоту от 300 до 70. Итак, мы перейдем к нашему CSS, и давайте создадим элемент проекта, который позволяет вам с 300 пикселей и высотой 2 70 пикселей, потрясающе и теперь похоже на то, что мы сделали со всеми нашими другими изображениями. Давайте возьмем наш элемент проекта и возьмем изображения внутри этого def. Скажем, 100%, чтобы изображение хорошо вписывалось в этот совет. Итак, давайте освежим это круто. Так что выглядит хорошо.У нас есть маленькие элементы проекта подходящего размера. А теперь давайте продолжим и немного улучшим стиль великого. Итак, мы собираемся сделать сетку проекта, и я снова буду использовать для этого гибкость. Я люблю сгибаться. Мы собираемся сказать display flex, и мы собираемся работать, поэтому позвольте мне просто показать вам. Если я скажу это и обновлю ISS, позвольте мне показать вам, что происходит. Так что посмотрите, как все наши предметы расположены рядом друг с другом. Это потому, что по умолчанию для дисплея flex находится в строке. Таким образом, он сгибает все эти элементы в ряд.Гм, и мы просто хотим сказать, что нам нужно их обернуть. Итак, мы собираемся записать Flex Rat, а затем - рэп. И это просто гарантирует, что, когда в нем закончится место, он как бы обернет предметы. Так что выглядит намного лучше. И я заметил, что они немного большие. Итак, давайте перейдем к нашему элементу проекта, и мы снова сделаем переполнение, скрытое, чтобы скрыть все, что находится за пределами области с 300 пикселями и высотой до 70. Итак, давайте обновим. Ладно, все выглядит намного лучше.Гм, а теперь я также собираюсь поиграть с гибкостью, так что я собираюсь сделать свою внутреннюю сетку своего проекта. Я оправдываю содержание. Я снова собираюсь в промежуток между ними. Таким образом, это просто вытолкнет все к краям сетки проекта и даст некоторое пространство между ними. Итак, давайте обновим. Хорошо, круто. Гм, а теперь я собираюсь дать немного отступа каждому элементу проекта, потому что я хочу, чтобы между верхом и низом оставалось пространство. Так что давайте сделаем Да, элемент проекта. Сделаем маржу 15 пикселей нуля.Так что это даст команду. Пиксели поля сверху и снизу. Смотрите, обновите. Потрясающие. Последнее, что я хочу сделать, это сделать изображения вина в каждом элементе проекта немного лучше. Так что, например, здесь не обрезана нижняя половина этого глобального кактуса. Я собираюсь сделать это снова с льном. Гм, и похоже, что мы хотели бы выровнять его по низу. Гм, похоже, что это 3-й 1 Мы могли бы также выровнять по низу, но пару мы могли бы захотеть выровнять по центру, поэтому я собираюсь сделать два класса.Я назову их нижним звеном, а второго я назову линейным центром. И для каждого из них я скажу гибкость. Ой. Мне жаль. Я скажу, что дисплей гибкий, и я скажу, э-э, позиции. Так что там вообще? Гм, гибкий конец, который в основном похож на нижний. А для центрального я собираюсь сделать отображение, согните их, сделайте центр позиций. Прохладный. Итак, я создал эти два класса, и теперь я просто собираюсь добавить их к любому из элементов проекта, которые, ммм, я хочу выровнять по центру или по нижнему краю.Большой. Итак, теперь я создал эти два класса, и я просто возьму эти классы, и я собираюсь поместить их в любой из элементов проекта. Гм, это я хочу выровнять по низу или по центру. Итак, я собираюсь вернуться в свой индекс, и я собираюсь взглянуть на этот 1-й 1, и я думаю, что этот элемент проекта был маленьким кактусом. Я хочу, чтобы центр был выровнен. И давайте проверим. Это было не так, что выглядело лучше. На самом деле это тот, который я хотел выровнять по низу. Итак, давайте сделаем это Обновить.Идеально. И мой инжир. Думаю, мне нужен центр линии. Так что сделаю линию по центру. Хм, освежитесь. Идеально. Этот Литтлфилд, я, наверное, хочу, чтобы нижняя строчка была на подкладке. Вы знаете, этот, вероятно, сосредоточился там. Тебе нравится это? Мои листья хорошо проветриваются. Гм, мой маленький кактус. Я думаю, что это, наверное, нормально. Гм, и мой маленький подковообразный краб. Я собираюсь выровнять этот центр. Это моя последняя строчка. Центр не был "Итак, теперь", это выглядит немного ближе к тому, что есть у меня в моём макете. Потрясающие. Так что этот раздел, я думаю, в значительной степени готов.Последнее, что я хочу сделать, это создать состояние наведения для каждого из этих элементов. И когда мы наведем на него курсор, я хочу, чтобы появилось маленькое название проекта. Так что, я думаю, это полезно. В противном случае вы действительно не знаете, на что нажимаете. Итак, я собираюсь перейти к каждому из наших маленьких элементов проекта здесь, и я собираюсь создать еще один мертвец, на котором будет имя этого элемента. Итак, пойдем и создали Div. Я назову это, ммм, названием проекта. Как ты думаешь, это неплохо? Итак, мы назовем эту фотографию кактуса.Я просто скопирую это и добавлю это поверх других элементов проекта. Эээ, это можно было бы назвать инжиром. Мы скопируем это. Гм, это может быть полевая фотография. Гм, это могут быть иллюстрации Клинта. Я просто придумываю случайные имена. Эээ, этот сын мог быть просто кактусом, а наш последний мог быть иллюстрацией фактора. Итак, давайте немного стилизуем их. Давайте перейдем к нашему проекту в нашем CSS и давайте сделаем имя проекта, и мы собираемся дать ему цвет, почему. Давайте скажем, как отец.Я собираюсь сделать его похожим на нашу маленькую бирку с именем. Итак, цвет белый, мы сделаем фон. Эм, давай сделаем черный. Ой, видите, здесь я написал цвет Что? Вы также можете написать белый. Обычно я делаю efs all, просто переключаю на это. Наш фон черный. Гм, давайте сделаем это положение абсолютным. Итак, я хочу, чтобы Thies как бы плавали в правом верхнем углу наших предметов. Итак, мы идем к верхнему нулю, и мы собираемся сделать правильный ноль, а затем мы также собираемся убедиться, что наш, мм, элемент проекта прямо здесь, мм, расположен относительно него, потому что я хочу, чтобы это имя было привязать к углу товарного элемента. Для этого его нужно расположить относительно.Силхет три фреш. Вот и все, выглядит красиво. Хм, не так уж и приятно. Давайте добавим к этим именам немного похлопывания. Итак, я собираюсь сделать отступы. Гм, я, вероятно, добавлю ему отступ примерно в восемь пикселей сверху. Ах, пиксели слева и справа. Да, мне это нравится. А теперь я просто создам эти состояния наведения, так что мы перейдем к названию продукта. Мы собираемся сказать «покажи девять», и это вызовет у них страх. Ага. А теперь мы собираемся сказать, что когда мы наводим курсор на элемент проекта, тогда это имя проекта может зависать.Итак, мы говорим, что когда мы наводим курсор на этот элемент проекта DIV, тогда в имени проекта должен быть отображаемый блок, чтобы он здесь заработал. Итак, давайте обновим и посмотрим. Да, похоже, это работает. Было не так. Теперь у нас есть названия наших проектов, и я думаю, мы можем начать с нижнего колонтитула. 5. Нижний колонтитул: отлично. Итак, давайте посмотрим на нижний колонтитул. Наверное, он очень похож на наш заголовок. Гм, такой же высоты на той же маленькой линии, только на этот раз сверху. И тогда у нас есть только наше имя и наш адрес электронной почты.Так что я собираюсь это сделать. Я собираюсь как в заголовке здесь. Также появился новый элемент под названием Footer. Так что мы воспользуемся этим сразу после того, как появится наш последний раздел, и скажем «Нижний колонтитул». А потом не будем забывать про наш контейнер Div, поставив ей контейнеры. Все подходящего размера. Хорошо попал. Входить. Хм, а затем я просто сделаю, вероятно, тег абзаца, и я скажу Alexa, Spectral, и давайте поставим дату, потому что я чувствую, что это обычно в нижней части веб-сайтов. И мы сделаем еще один тег абзаца, и мы поместим нашу электронную почту, э, состояние.Итак, допустим, давайте подойдем сюда и посмотрим, как это выглядит. Прохладный. Итак, теперь наш нижний колонтитул, мм, давайте его стилизуем. Мы собираемся продавать его очень похожий на наш заголовок. Мы просто возьмем нижний колонтитул и возьмем контейнер, и мы скажем, что высота 120 пикселей, и на этот раз мы сделаем границу. Один верхний пиксель сплошной. Мы сделаем светло-серый, как и для нашего заголовка. Итак, давайте обновим. Посмотрим, выглядит хорошо. Посмотрим, похоже, у нас здесь есть немного лишнего места.Это потому, что в нашем контейнере, если вы помните, мы помещаем, мм, поле в 60 пикселей внизу. Таким образом, нам это не нужно в нашем контейнере нижнего колонтитула, потому что это просто дает нам дополнительное пространство, которое мне действительно не нужно, поскольку мы уже указали ему высоту. Так что давай просто пойдем сюда. И мы скажем, что нулевая маржа снимет с этого всю маржу. Мы должны сказать, что маржа нулевой автоматически означает, что мы сохраняем левое и правое поле, чтобы оно оставалось по центру. Большой. А теперь мы просто собираемся пойти дальше и убедиться, что те, что указаны внизу, на нашем имени и адресе электронной почты, плавают рядом друг с другом, а не поверх друг друга.Так что я собираюсь сделать это с помощью flex, потому что мне нравится использовать flex. Но, скажем, внутри ее контейнера мы скажем «отображать флаги», а затем мы будем выравнивать пространство содержимого между ними, так что это подтолкнет их к краям и оставит все пространство посередине. И я также назову центр позиций, чтобы они были сосредоточены в этом, эм, нижний колонтитул, который сохранил это и обновит. Дюжина скоро закроет это, и я посмотрю, так что для меня это выглядит красиво. хороший. Я просто вернусь и, наверное, немного поправлю стиль.Итак, мы выберем шрифт и починим телефоны. Мы могли бы добавить немного дополнительных. Я не знаю. Наши отступы и поля выглядят довольно хорошо. Так что я думаю, что дальше будет просто обновление шрифта и, возможно, немного описания Div на 6. Уточнение стилей: Хорошо, давайте поработаем над завершением стиля на нашей странице. Гм, вот как это выглядит. Теперь я просто выберу шрифт и, возможно, оставлю немного места для обработки этих ссылок. Я также немного обновил это описание.Смерть? Я думаю, это все, что нужно, чтобы убедиться, что наши ссылки работают. Гм, так что давайте продолжим и сначала выберем шрифт. Итак, я предлагаю использовать телефоны Google просто потому, что их действительно легко загрузить в ваш индексный HTML. Итак, я пошел к шрифтам Gulf и нашел этот под названием Carla, который, на мой взгляд, довольно симпатичный. И поэтому я просто нажму на этот плюс прямо здесь, и я собираюсь перейти сюда, и я собираюсь настроить, потому что я хочу убедиться, что у меня выбран обычный и жирный шрифт, а затем я Вернусь к вставке и нажму.Скопируйте этот отличный линк здесь. И это то, что я собираюсь засунуть, эм, в самую глубину своей головы. Так что прямо под этой таблицей стилей ссылка все идет. Что. Так что это загрузит семейство шрифтов Carla как с обычным весельем, так и с жирным шрифтом. А потом я вернусь к фондам Google, и все будут использовать это правило для добавления моего CSS. Так что скопируйте это, и они отправятся в Macy's, и я наклею его на тело. Так что я войду. Я собираюсь схватить тело, и они скажут, семейство шрифтов, Карла. И это должно добавить семейство шрифтов Carla ко всей моей веб-странице.Вернемся сюда. Это обновление. Потрясающие. Так что это уже выглядит немного лучше. Гм, без этого там стандартно воевали. Так что давайте поработаем над этими ссылками. Гм, мы просто добавим немного места между ними, а также, возможно, состояние зависания, чтобы вы как бы поняли, что эти воздушные ссылки и я также могли бы немного уменьшить размер шрифта. Просто визуально мне это больше нравится. Итак, мы позаботимся о том, чтобы просто изменить ссылки внутри заголовка. Итак, я скажу заголовок, и мы скажем ссылки, которые находятся в этом заголовке, а затем, я думаю, у нас есть ссылки вокруг элементов нашего списка.Да, так что давайте просто ... Ну, заголовок Дио, мы сделаем это для вас, а затем просто сделаем это немного более конкретным. Итак, мы собираемся сказать размер мысли, давайте сделаем его 14 пикселей. Сделаем цвет, мм, черный. И посмотрим, что это произошло, Каса. Немного меньше, что мне нравится. Теперь давайте добавим между ними небольшой запас. Так как они выровнены по правой стороне, я не буду ставить на них правое поле. Так что я просто собираюсь поставить, потому что я хочу, чтобы они оставались на этой правой стороне. Итак, допустим маржа, мы скажем ноль для верха, ну, ноль для правого, а здесь - для низа.А потом я поставлю себе 15 пикселей. Допустим, да, я думаю, это, наверное, хорошо. Мы можем увидеть. Да, я познакомился чуть больше. Мы можем посмотреть на наш макет и увидеть, сколько пробелов между ними. О, там 40. Так что пойдем дальше. Также сделаем 40 пикселей. Ладно, круто. И я также добавлю немного состояния при наведении Брэма. Итак, мы собираемся приехать сюда. Мы собираемся сказать, заголовок вам l a. А затем наведите курсор мыши. Вот этот селектор наведения, и мы сделаем цвет. Давай, может быть, сделаем то же самое, что и у нас здесь.Я скопирую этот цвет и сделаем хэш-тег этим шестнадцатеричным кодом. Не стесняйтесь делать их любого цвета, который вам нравится. Эм, давайте обновим. Хорошо, теперь у нас есть небольшое состояние наведения на них. Идеально. Ой, мы можем вернуться к нашему индексу, и давайте убедимся, что он указывает на индексную точку html. Мне нравится Тео. Просто сделайте косую черту, чтобы я знал, что мне нужно заполнить эти длины, но давайте убедимся, что это указывает на индекс. Итак, обновите, и мы щелкнем по нему, мы просто вернемся к нашему индексу. Гм, если бы мы загружали это на настоящий сервер, если бы мы просто поставили косую черту, это вернулось бы на домашнюю страницу.Но потому что ... мы вроде как обслуживаем это на месте. Мы должны проиграть index html для работы пальцами ноги. Хорошо, а что еще мы могли сделать? Я думаю, мы могли бы сделать https-косую черту. Слэш пошел вверх, а? Я не знаю, правильный ли это сайт. Мы увидим http как последнюю косую черту. Сделаем facebook dot com. Гм так что эти ссылки эфир Риель, у тебя инстаграм. У нас проблемы и с Facebook. Большой. Так что все заработало. Эм, пойдем сюда. Меня устраивает такой размер шрифта. Я добавляю здесь немного пробела между буквами.Так что перейдем к тому стилю, который есть у нашего героя. И это наше имя. Так что я собираюсь сказать, я думаю, это просто наше имя. Мы сделаем межбуквенный интервал. Ах, давайте сделаем 0,5 пикселя и посмотрим, как это выглядит. Итак, мы идем. Небольшой промежуток между этим, Эм, а затем в этом описании, Деб, я думаю, что хочу удалить поле, мм, на этом h, и добавить небольшой промежуток между этими абзацами. Просто все разложилось чуть лучше. Итак, мы перейдем к нашему «Где это наше описание» Описание героя.Идеально. И я собираюсь перейти к описанию каждого героя, потому что это то, что у нас есть в этом теге h one, а затем в этих тегах абзаца. Итак, пойдем сюда. Один друг делает нулевую маржу, и это должно убрать часть маржи. Видите, он движется вверх, потому что у каждого из них много, ммм, слияний на высшем уровне. Я просто хочу это удалить. А потом мы разберем все еще немного и сможем описать героя. Париж. И давайте только вам на поле 40 пикселей и ноль здесь.Сделайте так, чтобы между ними было немного больше места. Вообще-то, мне это кажется довольно неплохим. Пойдем сюда. Я в порядке с этими проектами. Гм, и меня тоже устраивает нижний колонтитул. Я думаю, мы могли бы сделать нижний колонтитул 14 пикселей, чтобы он соответствовал заголовку. Итак, перейдем к нижнему колонтитулу. Сделаем нижний колонтитул. И я знаю, что мы поместили это в абзац. Ну а у вас размер шрифта? Кто на размер 14 пикселей? Посмотрим, что это выглядит. Вот так. Теперь это просто немного лучше соответствует нашему заголовку. Гм, и для нашей электронной почты мы можем сделать что-нибудь забавное.Мы можем зайти в наш индексный адрес электронной почты. Мы могли бы открыть это в электронном письме. Итак, вы знаете, когда вы нажимаете на электронное письмо, и ваше электронное письмо вроде как открывается, я обычно вижу его на своем телефоне чаще, но если я нажимаю на электронную почту, а затем появляется мое маленькое почтовое приложение с этим электронным письмом и я думаю, ты тоже можешь заниматься предметом. Итак, мы собираемся сделать. Мы сделаем это ссылкой. Так что давайте сделаем ее ярлык гнева. Давайте рассмотрим это так. А потом мы тоже сможем сказать «почта», Колин, и мы сделаем электронную почту прямо здесь. Потратьте это будет джин почта точка ком.А затем мы могли бы поставить вопросительный знак, эм, тему. И мы можем сделать орлов и сказать «привет», и мы думаем, что это еще нужно. Итак, мы сразу видим ссылку. Щелкаем по нему. О, и моя почта открылась. Да. И у нас есть эта тема. Привет. Так что это сработало. И я просто сделаю ссылку не синей. Ну, просто сделай его обычного цвета. Так что ссылку в нижнем колонтитуле внутри буквы P мы будем раскрашивать, эм, и будем делать черный цвет, который мы использовали в Сирии, и это будет держать ее в ваших строках, чтобы люди как бы понимали, что могут по ней щелкнуть.Гм, круто. Итак, это наша домашняя страница для небольшого веб-сайта с портфолио, гм, выглядит неплохо. Так что дальше будем работать над тем, чтобы сделать его отзывчивым. Так что на мобильных устройствах это выглядит так же хорошо. А затем мы начнем работать над этими небольшими отдельными страницами проектов, чтобы мы могли ссылаться на них. 7. Сделайте его адаптивным. Итак, теперь мы будем работать над тем, чтобы сделать наш сайт адаптивным, чтобы он хорошо смотрелся на планшетах и ​​мобильных устройствах. Итак, для начала, мы сделаем это с помощью медиа-запросов.Я пойду к своему инспектору. Итак, я собираюсь щелкнуть правой кнопкой мыши. Собираюсь осмотреть. И как только я здесь, вы увидите, как я начинаю, ммм, просто размер экрана в правом верхнем углу. Он покажет вам, сколько пикселей в ширину это ISS. Так что то, что мне нравится делать для этого, это просто своего рода экран правосудия, и затем я как бы остановился, когда он начал выглядеть уже не таким красивым. Итак, вы можете видеть, что здесь навигация приближается к краю. Так что я действительно найду точку, где последняя точка, где я действительно чувствую, что все выглядит хорошо.Так что продолжай немного, ммм, вроде, 10. 20. Посмотрим, 10. 20, наверное, еще где-то 10. 20. Гм, где? Думаю, это последний момент перед тем, как экран станет меньше, когда все по-прежнему выглядит нормально. Мы можем прокрутить вниз и увидеть, что их сетка все еще выглядит нормально, вы снова прокрутите вверх. Итак, я собираюсь начать свои медиа-запросы с 10,20 пикселей. Итак, что мы собираемся делать, мы собираемся перейти к концу нашего файла CSS. И я знаю, что люблю приспосабливаться. Разделите его немного, чтобы я мог видеть, где все находится.Итак, я возьму почти медиа-запросы, а затем выберу его и нажму команду для его моды. И мы просто прокомментируем это. Нет. Я просто увеличу это вдвое, и тогда я буду писать свои медиа-запросы. Итак, я приду сюда, я напишу на всех СМИ. Это говорит о том, что, как и все экраны, вы можете делать планшеты. Вы можете сделать Вы можете любить, указать, но я просто поставлю все, а затем я скажу, и я сделаю Макс, и я поставлю эти 10-20 пикселей, потому что там все доброе of был последней точкой, где все выглядело хорошо.Итак, мы собираемся войти сюда, и первое, что я заметил по мере того, как мы становимся меньше, верно, было то, что у нас, ну, вроде бы нет полей вокруг всего сайта. Итак, что я собираюсь сделать, так это войти и положить немного Пэтти, думаю, на тело, чтобы там было немного места. Итак, я имею в виду, вы ноль, а затем 20 пикселей слева и справа. Мы это увидим. Заходи сюда. Настоящее обновление. Итак, мы заметили небольшое движение на этой правой стороне, а затем вы можете увидеть, как я как бы уменьшаю его.Ширина наших контейнеров по-прежнему составляет 960 пикселей. Вот почему вы не видите прокладку с правой стороны. Так исправь, что я пойду. На самом деле я собираюсь вернуться к нашему контейнерному классу, и вместо того, чтобы говорить с 9 60, я скажу Max с 9 60, а затем я скажу с ах, 100%. Таким образом, с um нашего контейнера всегда будет 100% um, пока оно не достигнет 960 пикселей, а затем достигнет максимума. Итак, теперь, когда мы обновляемся, мы видим, что это работает. A. И мы можем видеть, что наш padding, который мы добавили к телу, появляется на этой правой стороне.Итак, следующее, что я хочу сделать, это сделать его меньше, чтобы вы могли видеть, что это небольшое описание смерти действительно становится, ммм, хлюпает, и все почти выходит из этого. Итак, чтобы это исправить, мы просто, гм, вернемся к нашему медиа-запросу. И я думаю, что собираюсь сказать описание нашего героя, потому что это то, что это за фишка. Мы назовем мужчин с разрешением 300 пикселей, потому что это то, что у нас есть. Хм, и я просто хочу убедиться, что по мере того, как мы настраиваемся, он не становится меньше, потому что я думаю, что отрезание части этого маленького изображения героя все еще в порядке, потому что это, ммм, не совсем.Это больше похоже на фон, поэтому он не выглядит плохо, когда он просто медленно настраивается, чтобы вы могли видеть, что наша верхняя часть по-прежнему выглядит довольно хорошо. И как только мы переходим к проектам, сетка по-прежнему выглядит неплохо. Однако, если я немного больше, поэтому, если у меня 898 пикселей, наша сетка немного запутается, потому что мы выравниваем пространство содержимого между ними. Таким образом, все это пространство находится между гиббами в контейнере. Итак, что я собираюсь сделать, так это взять нашу сетку проекта и сказать, что, когда экран начнет уменьшаться, мы собираемся оправдать контент с помощью свободного пространства вокруг.Таким образом, это пространство помещается слева и справа от атомов, а также от центра, а не только от центра. Так что позвольте мне сказать это, и мы можем обновить, и это выглядит немного лучше. Так что по мере того, как экран становится немного там, эм, когда их всего два, становится немного больше ровного места. Так что выглядит неплохо. Гм, примерно от 10 до 20. И так как я доволен этим, я поищу следующую точку разрыва. Я собираюсь продолжать, и я просто начну проверять, как все выглядит.Тем не менее думаю, что это выглядит неплохо, если будет немного меньше. Я все еще думаю, что это так, так что вы тоже видите сгибание? Гм, потому что у нас есть флекс-рэп в рэпе. Гм, так как для каждого элемента больше нет места, они переходят к следующей строке. Так что это действительно делает работу с отзывчивостью довольно простой. А потом мы можем продолжить. Итак, я собираюсь сказать, типа, давайте посмотрим, где-то около 5 10 пикселей действительно там, где мы видим, что мошенник начинает прыгать, а все остальное по-прежнему выглядит нормально, но я думаю, что все меньше чем это нужно будет добавить немного, ммм, некоторые другие правила, чтобы сделать его более отзывчивым.Вот где я собираюсь написать свой следующий медиа-запрос. Некоторые из тех же медиа, все и Макс с 510 пикселями. Мы выйдем сюда и начнем добавлять здесь некоторые правила. Первое, что я заметил, - это прыжки с наброска. Итак, я хочу просто настроить их так, чтобы они накладывались друг на друга, верно? Итак, мы собираемся перейти к нашему заголовку, в списке заказов и в нашем элементе списка, и мы просто скажем, дисплейный блок. Так что помните, когда мы хотим, чтобы они сели рядом. Мы отображали строковый блок, так что теперь мы просто возвращаемся.Вернувшись назад, Теох отключил свои настройки по умолчанию, которые заблокированы. Мы это увидим. И вот так. Они немного похожи друг на друга, что, на мой взгляд, выглядит намного лучше. Я также думаю, что как только мы станем более мобильными, когда он станет даже меньше 500, когда он будет больше похож на 3 75 или 4 14, у вас будет больше мобильных устройств. Эээ, этого маленького изображения на самом деле даже не будет. Так что я действительно хочу, чтобы это изображение складывалось поверх описания, и мы собираемся сделать это, войдя в контейнер нашего героя и вернемся к нему в центр нашего героя. контейнер вверху.Итак, у нас есть гибкость отображения, и у нас есть выравнивание пространства между содержимым, поэтому мы по-прежнему собираемся сохранить эту гибкость. Но вместо, ммм, строки с направлением изгиба, что по умолчанию, у нас будет столбец с направлением изгиба, и это заставит эти две вещи складываться друг над другом. Итак, если мы обновим это? Я это сказал? Итак, вы используете контейнер с точками. Мы увидим это обновление. Вот и все. Итак, теперь у нас есть изображение, расположенное поверх описания. Как видите, нам нужно кое-что обсудить.Я думаю, мы уменьшим высоту этого изображения героя до такой же высоты, как и наша маленькая табличка с именем. Так что я собираюсь подойти сюда и сказать образ героя, и я собираюсь дать ему кайф. Я думаю, что это было 250 пикселей, что выглядит правильно. Посмотри, свеж ли ты. Вот так. И теперь вы можете видеть, что, поскольку наше изображение имеет высоту 100%, при этом оно обрезается. Так что я просто пойду и откорректирую то, как он находится в контейнере. Итак, изображение героя и изображение внутри этого div мы скажем: «Вот и все».Это работает. Так что наш образ был слишком большим. Итак, я собираюсь сделать 200% и убедиться, что это хорошо выглядит, чтобы мы имели дело с этим описанием, и мы собираемся сделать описание героя. Мы пойдем туда и сделаем это на 100%, чтобы он заполнил все необходимое пространство, чтобы посмотреть, как это выглядит. Так выглядит лучше. И тогда у нас есть высота ступеньки. И поэтому я просто хочу убедиться, что максимум автоматический, а не 4 60, как это было, потому что он выглядит немного длинным, поэтому мы увидим это обновление.Так выглядит намного лучше. Хм, я также собираюсь убедиться, что отступ внутри этого описания более ровный, потому что теперь он доступен на мобильных устройствах. Итак, вы похлопываете 50 пикселей, которые просто занимают немного места сверху и снизу. Гм, так он немного меньше из-за мобильных устройств. Итак, теперь наш раздел героев выглядит довольно хорошо. Гм, наши проекты тоже выглядят неплохо. Я покажу вам, как это выглядит на мобильном телефоне. Итак, если я нажму на эту кнопку прямо здесь, мы получим мобильный сайт, и вы увидите, что он сделал что-то действительно странное.Когда мы нажимали на мобильный, он вернулся, в основном, на сайт для настольных компьютеров. И это потому, что в нашей голове чего-то не хватает. Итак, мы перейдем к нашему index dot html и добавим еще один метатег. Потрясающие. И мы собираемся сказать это название группам, и мы собираемся сохранить ваш порт. Это говорит о том, что мы говорим о порте V, и мы собираемся сказать, что контент равен, а затем мы собираемся сделать с равным устройством с. Итак, в основном это просто говорит о том, что наши мобильные браузеры Teoh вычисляют с фактическим с устройством, а не просто делают это, гм, типа, 100%.А потом мы также скажем: «Ой». Мы скажем, что начальный масштаб равен единице, и закроем наши маленькие цитаты. И это то, о чем, честно говоря, вам и не нужно помнить. Вероятно, это одна из тех вещей, которые вы собираетесь гуглить, а затем копировать и вставлять, ммм, или много раз, если вы используете Google как шаблонный код для HTML, например, структуру скелета, это будет включено в него. Так что вы не слишком беспокоитесь о том, как запомнить это страдание здесь. А затем, когда мы обновимся, мы должны увидеть, что теперь он действует так, как мы думаем, что он должен действовать на мобильных устройствах.Итак, он следит за этими медиа-запросами. Гм, мы также можем видеть, что наш имидж все еще выглядит немного странно. Так что мы пойдем дальше, и я снова поменяю авто с носком. Таким образом, наше изображение по умолчанию имеет свой обычный размер, а затем я просто перейду внутрь нашего изображения главного героя. На самом деле, я собираюсь сказать «отображать флаги», и я просто собираюсь использовать это, чтобы как бы позиционировать это изображение внутри него. Так что я скажу по позициям и посмотрю, закончится ли lex как-то исправлением. Итак, мы узнаем, что у нас это как гигантский лист.Мы знаем, что наши изображения, идущие через Teoh, заполняют оба пространства контейнера. Независимо от того, меньше ли телефон или немного больше, если мы вернемся к этому, у нас все еще будет полное изображение внутри этого. Итак, вернемся к телефону. Давайте посмотрим, как хорошо выглядят все ищущие проекты. Последнее, что я хочу сделать на мобильных устройствах, чтобы немного упростить это, - это просто избавиться от состояния зависания, которое у нас есть, поскольку на телефонах нет состояния зависания. Мы просто позаботимся о том, чтобы названия наших проектов всегда были видны.И мы просто скажем этот блок отображения. Ой. Вот так. Мы должны обновить. И еще есть названия наших проектов, и я думаю, все остальное выглядит неплохо на мобильных устройствах. Гм, или описание все настроено так же, как наше имя и наше, ммм, теперь далеко. Так что да, поехали. 8. Страница проекта: Итак, теперь, когда наша домашняя страница полностью построена и адаптируется, мы продолжим работу и начнем работу над нашей отдельной страницей проекта. Так что я думаю, что самый простой способ сделать это - перейти в наш следующий HTML-код.И я просто скопирую этот код, и я собираюсь открыть новый файл, и я собираюсь вставить его сюда, и я просто скажу это как одно из названий проекта. Итак, я просто скажу, что это кактус, что каждая команда уходит, когда я сохраняю это в правиле папки, прямо там, где индексы, и мы просто нажмем «Сохранить». И поэтому мы собираемся повторно использовать этот код. Так что есть пара вещей, которые я могу оставить здесь. Итак, я все еще собираюсь связать с нашей ячейкой этот CSS. Поскольку эта страница довольно проста, я, вероятно, собираюсь поместить все наши стили в один файл.Обычно я бы разбил их на разные южные листы, но для этого не нужно много CSS. Я просто оставлю это на том же самом. Эм, я тоже буду использовать ту же мысль. Таким образом, практически все, что находится в голове, может оставаться на сцене, и мы также собираемся сохранить заголовок, потому что мы этого хотим, как мы видим в нашем макете. У нас есть заголовок и нижние колонтитулы. Мы собираемся сохранить верхний колонтитул в нижнем колонтитуле. Единственное, что действительно собиралось изменить наши эти разделы. Итак, я собираюсь продолжить и удалить разделы, но у нас все еще есть голова и нижний колонтитул.Итак, мы собираемся сказать это, и мы откроем кактус этот HTML в идеале. Итак, вот наш верхний и нижний колонтитулы. Теперь давайте посмотрим на макет, и мы собираемся сразу приступить к его созданию. Так что я пойду сюда. Я собираюсь создать раздел, который мы назовем этим. Мы можем назвать эту функцию изображением, и я создам провал, и мы по-прежнему хотим, чтобы все было 9 60 Итак, мы дадим имя контейнеру класса, как мы делали раньше. И внутри этого контейнера нам действительно нужно изображение, и мы войдем в наш держатель изображений, как и раньше, и найдем это изображение.И я называю это растительное существо, поэтому я не могу показать его, и давайте посмотрим, как это выглядит. Большой. Итак, теперь мы можем перейти к нашему макету, так что 9 60 на 4 80 Итак, я собираюсь войти в свой CSS и на самом деле выхожу из раздела Teoh так же, как то, что я сделал для моего медиа-изящества, и просто нажимаю команду, косую черту. . Итак, это мой платный CSS проект. Вы также можете переместить его в отдельный файл CSS, если хотите вызвать, как говорит проект на CNN, но тогда просто не забудьте связать его в заголовке вашего HTML-документа.Итак, я собираюсь зайти сюда, и я собираюсь захватить свое представленное изображение и изображение. И я просто сделаю эту высоту 4 80 пикселей. Да, на самом деле, я собираюсь создать контейнер, так как у нас есть только, ммм, изображение в этом разделе, которое я собираюсь возиться с контейнером div, потому что, мм, это единственное, что хранит это изображение, а затем мы должны сделать наше переполнение. Затем мы должны убедиться, что это хорошо спрятано. А затем я снова собираюсь использовать Flex, чтобы центрировать этот гибкий экран So display и центр позиции.Вот так. Потрясающие. Так что наш будущий ущерб выглядит неплохо. Давайте перейдем к этому разделу и познакомимся с заголовком, небольшим описанием и двумя дополнительными изображениями. Итак, мы перейдем к нашему HTML, сделаем вам раздел и дадим этот восьмой класс. Ах, давайте вынесем проект на голосование. Мы хотим добавить наш контейнер div. А потом посмотрим на ее рот. Нам нужен титул. Так что я собираюсь поставить Джету. Могу ли я иметь в виду правильное название? И еще нам нужен небольшой абзац с этим описанием. Text Perfect.Итак, давайте посмотрим, как это выглядит. Большой. И вы можете видеть, что у нашего контейнера def есть то же свойство. Так что между элементами все еще есть хороший запас. Выглядит все чисто, наше название или описание. А теперь давайте добавим слишком маленьких изображений. Итак, я собираюсь поместить эти изображения в кубики, чтобы я мог установить ширину и высоту для тех, которые у них одинаковые, потому что у меня просто, вероятно, разные ширина и высота. И мы собираемся называть этот класс проекта изображениями и никогда не использовали изображение внутри него.Посмотрим на это. Та же тропическая зелень была в порядке. И этим маленьким спасибо. Большой. Это обновление. И мы, вероятно, собираемся использовать гибкость, чтобы стилизовать этих парней. Я посмотрю на мою ширину и высоту 70 на три. 20. Похоже на ширину и высоту. Так и сделали мои изображения проекта. Я собираюсь сказать изображения проекта, а затем бабки. Так как я не давал им урока, я просто скажу "фишка" в изображениях проекта, и это будет то и другое. Итак, мы сделаем то, что было, снова для 70 и высоты 3 20 И мы сделаем переполнение, скрытое.Большой. И теперь изображение нашего проекта было идеальным кузеном, ммм, и я, вероятно, просто добавлю немного запаса для изображений нашего проекта, если так, чтобы между ними было немного места. Итак, давайте продолжим, и вы сделаете маржу 40 пикселей, а затем ноль. Вот и все. Теперь у нас есть небольшая пауза между текстом и изображениями. Хорошо. Потрясающие. Итак, теперь давайте продолжим и добавим ту маленькую кнопку, которую мы видели. Так и были внешние изображения наших продуктов и друг друга. И мы назовем этот, эм, проект обратно, потому что это была она, но она вернулась, и мы говорим назад к продуктам, и давайте сделаем это ссылкой, и она должна вернуться к нашей индексной точке html. И давайте переместим этот тег гнева вокруг этого.И теперь, если мы снова нажмем кнопку Vario, все заработает. Итак, начнем с этого немного. Мы назвали этот проект, и я думаю, он мне нужен. Те же размеры маленькие. Имена у нас до 50, и наша высота 60 пикселей, фон черный, а цвет текста белый. Идеально. И теперь у нас есть Теох. Мы должны стилизовать эту ссылку. Итак, я скажу, что проект из a и текстовое объявление нет. И это избавило нас от нашей основы. Теперь я собираюсь дать этому гибкость, чтобы все выстроенные в линию отправили ей и только мой контент-центр.Большой. Итак, теперь все выглядит так, как в макете. Думаю, я просто сделаю этот текст немного меньше, и это должно быть последнее, что я сделаю. Итак, размер шрифта 14 пикселей. Идеально. И вот так. Таким образом, эта ссылка работает хорошо, а все остальное выглядит так же, как в макете. Теперь давайте просто поработаем над тем, чтобы сделать это немного, ммм, отзывчивым. 9. Сделайте отзывчивым: Страница проекта: Хорошо, отлично. Итак, давайте начнем делать это немного более отзывчивым. Итак, я собираюсь войти сюда и, вероятно, буду использовать те же, ммм, точки останова медиа-запроса, которые мы использовали для домашней страницы.Хм, и я собираюсь Что я собираюсь сделать, на самом деле, я собираюсь убедиться, что этот код страницы проекта находится перед медиа-запросами, потому что в противном случае, когда мы писали внутри одних и тех же медиа-запросов, обычный код перезапишет его, а мы этого не хотим. Цитировать. Итак, это будет здесь. А давайте раскроем его фактор и посмотрим, что нам нужно изменить. Итак, когда мы спустимся вниз, вы увидите, что они слышали об имидже, честно говоря, симпатичным. Ладно, ну, где тебе действительно нужно. Работа ведется над этими небольшими дополнительными изображениями.Так что я иду, Теох, возьми это. Итак, это изображения изображений проекта. Правильно. Итак, как только мы перейдем к 10. 20, что примерно там, я просто сделаю их немного меньше, чтобы они лучше подходили, пока не дойдет до 500 пикселей. Итак, я пойду сюда, и мы сделаем изображения проекта и фишки, и давайте дадим им примерно 48%, они занимают приличное количество, например, пол-миллиметра пространства или небольшой запас между ними. А затем давайте также изменим их высоту, чтобы по мере их уменьшения пропорции не выглядели слишком странно.Давайте попробуем 300. Давайте сделаем изгиб дисплея, который ослабит центральные элементы. Гм, просто хорошее содержание в ее строке. Я не отправлял ее, и это должно быть в центре изображения немного лучше. И затем я также хочу убедиться, что наш проект с изображениями, фактическое изображение, я бы позаботился о том, чтобы он охватывал все, по мере того, как он становится меньше. Что-то делают высотой 100%. И посмотрим, как это выглядит. О, я не освежился. Вот и все. Итак, теперь вы можете видеть, как я настраиваю их, они выглядят немного лучше, пока мы не дойдем до 500.Я бы сказал, что эти изображения по-прежнему хороши на уровне 500. Все в порядке. Считается, что набиты по-прежнему делают то же самое, что и раньше. Наша домашняя страница, и это хорошо. Так что теперь, когда у нас 500 человек, я думаю, что последнее, чем я действительно хочу заниматься, - это в нашем проекте, в самых соках. Я хочу сделать столбец направления изгиба так, чтобы они время от времени накладывались друг на друга. Мы также позаботимся о том, чтобы эти вещи, которые мы только что написали, немного отличаются. Итак, я собираюсь сделать 100%, и мы можем сохранить высоту 300 пикселей, я думаю.И тогда дисплей Flex просто-напросто должен работать еще в море. ОК, круто. Так что теперь они плавают друг над другом, и я просто изменю еще пару вещей, чтобы они выглядели лучше. Изображения проекта, изображение. Теперь мы собираемся установить ширину на 100%, а высоту - автоматически. А затем внутри нашей фишки мы добавим немного маржи. Итак, маржа 20 пикселей ноль или давайте попробуем 10 пикселей. Итак, мы идем. Потрясающие. Итак, вот наши фотографии, и я думаю, они выглядят неплохо там, где они были на мобильных устройствах.Гм, возможно, мы хотим сделать только одного героя. Давайте, эм, возьмем наше Как мы называем это избранное изображение? Гм, и самый высокий 4 80, который немного высок для чего-то на мобильном телефоне. Итак, в моем максимуме, с 5 10, я собираюсь войти сюда, и я просто собираюсь изменить высоту, чтобы быть примерно 300. Начинаем. Так выглядит намного лучше, не так ли? Занимает много места, и я думаю, что мне это очень нравится. Прохладный. Итак, теперь мы можем зайти в наш индекс точки html, и мы действительно можем связать эту страницу.Итак, давайте перейдем к нашему первому проекту, например, и мы просто свяжем его каждый кактус Teoh, вы знаете, и с тремя новыми, которые включены, Давайте уйдем отсюда и пойдем сюда, и давайте вернемся на нашу страницу назад к проектам. А потом попробуем нажать на это. Потрясающие. Итак, теперь мы связались друг с другом. Итак, теперь вы, ребята, можете сделать копию этого HTML-кода cactus dot и создать шесть разных страниц для ссылки на наш небольшой проект. Отлично здесь. И просто поместите ссылки в свой html, и тогда все будет готово. Итак, теперь я покажу вам, как на самом деле выгрузить файлы на сервер.Не было

В чем разница между сайтами, написанными вручную, и WordPress?

Для разработчиков

Если вы собираетесь создать веб-сайт прямо сейчас, ваша задача номер один - убедиться, что он адаптируется ко всем размерам экрана. Это связано с тем, что Google объявил, что все отзывчивые веб-сайты будут иметь более высокий рейтинг из-за лучшего времени загрузки, лучшего удобства использования и будут предпочтительнее при поиске с мобильных устройств.Таким образом, веб-сайт, который быстро загружается и хорошо выглядит на всех мобильных экранах, будет иметь преимущество перед веб-сайтом, который не является адаптивным. И если мы собираемся говорить о гибкости мобильных устройств, нам также необходимо поговорить о программировании для мобильных устройств, при котором вы сначала создаете свой html и CSS с учетом мобильных экранов. Адаптивный дизайн и программирование, ориентированное на мобильные устройства, идут рука об руку, поэтому, чтобы максимально использовать возможности вашего веб-сайта, он должен быть в первую очередь мобильным и полностью адаптивным.

Эта статья предназначена для разработчиков, которые хотят понять, как, черт возьми, создавать адаптивные веб-сайты, и в ней есть все ответы, которые я хотел бы знать, когда только начинал.Итак, приступим!

Запуск мобильного сначала

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

Вся идея состоит в том, чтобы структурировать ваш HTML и CSS в первую очередь с учетом мобильного телефона.Когда у вас будет готовый HTML-код, откройте его в браузере, проверьте элемент и выберите параметр экрана iPhone 5SE. Это самый маленький мобильный экран размером 320 пикселей в ширину. Это будет ваш холст вместо широко открытого рабочего стола. Это будет последним! Здесь мы сначала запускаем мобильные устройства, и вот здесь все начинается. Мне нравится увеличивать масштаб до 75%, чтобы он не был таким уж маленьким. Это размер экрана, под который вы будете писать CSS. Запросы мультимедиа не требуются. Просто напишите код, который умещает все в этом размере экрана.Это начало программирования для мобильных устройств!

Сначала структурирование CSS для мобильных устройств

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

• 400px - большие телефоны
• 568px - горизонтальная мобильная
• 768px - Планшет
• 1024px - Маленький настольный компьютер (ноутбуки)
• 1300px - обычный рабочий стол
• И любая другая точка останова, которая может потребоваться для остальной части вашего дизайна

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

Чтобы быть по-настоящему отзывчивым на 100%, установите для инспектора значение «отзывчивый», начните с 320 пикселей и перетащите край окна, чтобы он увеличился.Если что-то в дизайне ломается или выглядит плохо, установите медиа-запрос для этого конкретного размера экрана и исправьте его. Сделайте это полностью выше ширины рабочего стола. Поступая таким образом, ваш сайт будет соответствовать всем возможным размерам экрана, и вы можете сказать, что он на 100% отзывчивый.

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

Настройка медиа-запросов

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

Прежде всего, в этом прелесть мобильных устройств. Вместо того, чтобы начинать с размера рабочего стола и сжимать все или переписывать некоторые части по мере того, как вы становитесь меньше, вы начинаете с малого и добавляете к нему шаг за шагом, опираясь на код, который вы написали ранее, вместо того, чтобы разбирать его. Это идеально сочетается с адаптивным дизайном, потому что проще заставить вещи врастать в свои контейнеры, а не набивать их и сжимать.Таким образом, мы должны достичь 100% адаптивного дизайна с меньшим объемом работы, меньшим количеством ошибок и меньшей головной болью. Вот почему я заговорил о мобильных в первую очередь «в первую очередь». Когда это делается таким образом, адаптивный дизайн становится намного проще. Итак, давайте посмотрим, КАК мы можем сделать их отзывчивыми, не прилагая особых усилий и не имея 50 медиа-запросов.

Как создавать адаптивные веб-сайты

Когда вы пытаетесь создать адаптивный веб-сайт, важно сначала разобрать структуру html и использовать семантический html.Я использую одну и ту же структуру для всех своих сайтов, которая состоит в том, чтобы разбить дизайн на разделы, каждый из которых находится в своем собственном теге раздела, внутри которого есть свой собственный div .container, а внутри него есть контент. Вот так:

                         
                        
                            <раздел>
                                

                                    
 Разместите здесь контент 
                                
                            
                        
                         
                     

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

Настройка ваших контейнеров

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

Хотя у нас есть отдельные контейнеры в каждом разделе, мы все же хотим иметь несколько общих стилей, чтобы они вели себя одинаково. Вот что я использую для всех из них, чтобы начать с 320 пикселей:

                         
                        
                            .container {
                                отступ: 0 10 пикселей;
                                маржа: авто;
                                положение: относительное;
                                ширина: 100%;
                                максимальная ширина: 450 пикселей;
                            }
                        
                         
                     

На этом изображении, когда мы наводим курсор на контейнер в инспекторе, мы видим зеленые полосы справа и слева.Это твоя набивка.

Поэтому, если вы хотите быть по-настоящему отзывчивым, установите максимальную ширину вашего контейнера на 1000 пикселей, что будет идеальным размером, когда вы дойдете до раздела размера 1024 пикселей вашего CSS. Затем, когда вы подниметесь выше, вы можете изменить максимальную ширину на все, что нужно для разных разделов. Не существует «единой ширины, чтобы управлять ими всеми», все полностью зависит от вашего дизайна и может быть разным для нескольких разделов и размеров медиа-запросов.Это нормально!

В целом, это базовый шаблон, к которому вам нужно привыкнуть, чтобы начать использовать адаптивный дизайн для мобильных устройств на своих веб-сайтах. У вас есть раздел с классом контейнера внутри и содержимое раздела внутри этого контейнера. Контейнер установлен на 100% ширину и максимальную ширину, при которой вы хотите, чтобы он перестал увеличиваться, а margin auto будет держать его в центре, в то время как отступ слева и справа не даст содержимому касаться краев экрана.Это основной строительный блок адаптивного дизайна и метод, в котором вы будете МНОГОЕ использовать, поэтому важно действительно закрепить этот паттерн в мышечной памяти. Вы также можете установить свой контент на ширину: 100%, чтобы он мог расти вместе с размером своего контейнера. Просто не забудьте проверить дизайн страницы, когда вы увеличиваете ширину экрана, и посмотрите, какой раздел прерывается или выглядит не так, и установите конкретный медиа-запрос для его таргетинга.

Как спланировать свой HTML-код для мобильных устройств

А теперь самое интересное! Когда вам предоставляется дизайн для настольного компьютера, как вы структурируете свой html для наилучшего перехода с мобильного устройства на компьютер? Первое, что вам нужно сделать, это проанализировать каждый РАЗДЕЛ индивидуально и разбить дизайн на контейнеры и части внутри них.Вот пример дизайна с моего сайта:

Порядок укладки в html

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

                                             
                                            
                                                

                                                    

                                                        Кодекс
                                                    
                                                
                    
                                                

                                                    

                                                        Кодекс
                                                    
                                                
                    
                                                

                                                    

                                                        Кодекс
                                                    
                                                
                                            
                                             
                                         

Когда я это вижу, я сначала вижу элементы уровня блока, которые могут находиться на отдельной строке, и рядом с ними никого нет, например заголовок и абзац.Я могу настроить их на display: block и text-align: center. Это будет центрировать их с контейнером или без него, отлично! Но группа графики выглядит так, как будто она ДОЛЖНА находиться в отдельном контейнере, поэтому мы можем использовать Flexbox для работы с ними и центрирования их. Таким образом, этот раздел выглядит так, как будто нам просто нужен один контейнерный div, чтобы сгруппировать графику вместе, чтобы их можно было расположить, два других могут быть просто элементами уровня блока и будут отлично масштабироваться при переходе от мобильного устройства к настольному, потому что они по существу будут в одни и те же точки ведут себя точно так же.

Теперь перейдем к группе из трех мини-«карточек», центрированных по горизонтали. Поскольку они расположены рядом друг с другом, мы не можем сделать их все блочными, поскольку они должны быть в одной строке вместе (display: inline-block), а не сами по себе. Таким образом, мы можем добавить вокруг них div с классом «оболочки», чтобы мы могли расположить их внутри этого контейнера, не затрагивая остальную часть раздела над ним. И внутри этого контейнера похоже, что у каждой «карты» тоже должен быть контейнер, давайте назовем его «элементом», и каждый элемент внутри этого контейнера может быть элементами уровня блока, поскольку все они находятся в отдельной строке сами по себе.Похоже, здесь мы можем перестать добавлять контейнеры.

Я знаю, что это очень много для текста, поэтому вот график, показывающий, как мы визуально сгруппировали все вместе, чтобы спланировать их расположение и расположение css:

Вот как должна выглядеть мобильная версия с заданной структурой html и естественным расположением элементов html:

                         
                            <раздел>
                                

                                    
 ЧТО  МЫ ДЕЛАЕМ
                                
                                

                                    
                                    
                                    
                                
                                
 Мы специализируемся на веб-дизайне и разработке для малого бизнеса для клиентов из любой точки США. Каждая строка кода написана вручную, чтобы обеспечить максимальную производительность, что помогает привлечь больше клиентов на ваш сайт и принести больший доход вашему бизнесу. ПОДРОБНЕЕ… 
                                
                                

                                    

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

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

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

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

Вы также заметите использование aria-hidden = "true", это атрибут Aria, который сообщает программам чтения с экрана игнорировать этот элемент, поскольку он не важен.Мы используем это для всего, что используется исключительно для дизайна и не имеет значения для понимания содержания сайта. Таким образом, в основном все значки будут иметь этот атрибут, поскольку они предназначены только для галочки и ничего не добавляют читателям к пониманию того, что они читают. Чтобы узнать больше о доступности в Интернете и использовании правильных атрибутов Aria, посетите www.w3.org, чтобы узнать о них и о том, когда их использовать. Это то, что вам нужно будет много использовать при написании вашего html. Всегда имейте в виду!

Так что, если бы мы сначала написали код для этого мобильного телефона, мы бы начали сверху.Я собираюсь использовать старый способ центрирования контента без Flexbox на этом, чтобы показать другой способ делать что-то. Если у вас есть элементы inline-block внутри контейнера, если вы добавите text-align: center в контейнер, все встроенные блоки теперь будут центрированы внутри контейнера. vertical-align: middle центрирует элементы inline-block по вертикали внутри их контейнеров. Это аккуратное маленькое свойство, которым я пользовался время от времени.

                         
                        
                            h3 {
                                дисплей: блок;
                                выравнивание текста: центр;
                            }
                            
                            .icons {
                                маржа: 15 пикселей авто; / * создаем пространство 15px сверху и снизу между группой значков ... * /
                                выравнивание текста: центр; / * ... и теги h3 и p * /
                            }
                            
                            .icons img {
                                дисплей: встроенный блок;
                                маржа: 0 10 пикселей;
                                вертикальное выравнивание: по центру;
                            }
                            
                            п {
                                дисплей: блок;
                                маржа: авто;
                                выравнивание текста: центр;
                                отступ: 0 10 пикселей;
                                ширина: 100%;
                                максимальная ширина: 600 пикселей;
                            }
                        
                         
                     

Что касается css о том, как вы расположите и центрируете 3 карты, я настоятельно рекомендую изучить, как использовать flexbox из Flexbox Froggy, и попрактиковаться в его использовании.Я не буду вдаваться в подробности о flexbox, потому что эта статья уже достаточно длинная ... Но чтобы сделать это без Flexbox, используйте ту же технику inline-block, которую я использовал для изображений. Он будет делать ту же работу.

Но! Я не буду оставлять вас в зависимости от того, какой код использовать, поэтому для контейнера .wrapper вот код, который вы бы написали на рабочем столе:

Класс .item на мобильном телефоне:

                         
                            .элемент {
                                ширина: 100%;
                                максимальная ширина: 350 пикселей;
                                маржа: авто;
                                дисплей: блок;
                            }
                        
                         
                     

                         
                        
                            .wrapper {
                                дисплей: гибкий;
                                flex-direction: ряд;
                                justify-content: пробел между;
                                align-items: center;
                            }
                         
                     

Подведение итогов

Это все основы адаптивного программирования для мобильных устройств и способы его настройки.Надеюсь, это поможет вам понять, как настроить CSS, чтобы начать адаптивный дизайн для мобильных устройств. Это требует практики и некоторого привыкания, но как только вы усвоите формулу и научитесь разбивать дизайн каждой секции на самые простые и минимальные структуры, все это станет для вас второй натурой, и в конечном итоге вы сможете просто взглянуть на дизайн рабочего стола и «точно знать», как вы собираетесь его создать. Это сделает ваше время более эффективным, а ваш код будет написан более чисто и с большей целеустремленностью, что сведет к минимуму количество ошибок и головных болей, с которыми вы можете столкнуться во время процесса.

Ultimate Web Developer Course: создание 10 веб-сайтов с нуля

Создайте реальный веб-сайт HTML5 и CSS3 с нуля

Подпишитесь на YouTube

Код

В этом уроке мы создадим реальный веб-сайт с чистым HTML 5 и CSS 3, который может быть используется в качестве шаблона для агентства веб-дизайна или любого другого бизнес-сайта.Давайте сначала посмотрим на конечный результат:

Шаблон сайта полностью отвечает и состоит из трех страниц. Стартовая страница выглядит следующим образом:

Если вы заходите на веб-сайт на экране меньшего размера, макет адаптируется соответствующим образом, как вы можете видеть на следующем снимке экрана:

Кроме того, шаблон веб-сайта состоит из О и Services странице:

Давайте рассмотрим шаги, необходимые для создания этого веб-сайта с нуля.

Реализация начальной страницы

В следующих шагах мы будем использовать простой код HTML 5 и CSS 3 для реализации. Никаких дополнительных рамок не требуется. Начнем с создания новой и пустой папки проекта:

$ mkdir 123webdesign

Перейдите в эту недавно созданную папку проекта

$ cd 123webdesign

и создайте подпапки с помощью следующих команд:

$ mkdir css
$ mkdir img
$ mkdir fonts

Поскольку мы хотим использовать значки Font Awesome, мы должны убедиться, что библиотека значков добавлена ​​в наш проект.Зайдите на http://fontawesome.io, скачайте бесплатный пакет, распакуйте архив и скопируйте файлы из папки css и fonts в соответствующие подпапки в проекте.

Внедрить Index.html

Давайте начнем кодирование с добавления нового файла index.html в нашу корневую папку проекта и следующего HTML-кода:

  

  
    
    
    
    
    
    
    
  
  
    <заголовок>

    

    <раздел>

    

    <раздел>

    

    <раздел>

    

    <нижний колонтитул>
      
 1-2-3 Веб-дизайн, Авторские права и копия; 2017 
    
  
  

Как видите, мы определяем пять разделов в элементе body :

• header : содержит панель верхнего уровня сайта с брендингом и меню навигации.
• Раздел витрины : Содержит основное изображение и основной боковой заголовок.
• Раздел информационного бюллетеня : Содержит поле ввода электронной почты и кнопку отправки, чтобы пользователь мог подписаться на информационный бюллетень.
• секция ящиков : Содержит три ячейки для выделения услуг.
• нижний колонтитул : Содержит код, необходимый для отображения нижнего колонтитула.

Давайте пошагово добавим необходимый HTML-код для каждого раздела ...

Добавить HTML-код для заголовка

В разделе заголовка добавьте следующий код для отображения брендинга и меню навигации вверху:

  

        

           
 
   1-2-3  Веб-дизайн  
        
        
      
  

Добавьте HTML-код для раздела "Витрина"

Затем вставьте следующий код в раздел "Витрина":

  

         
 Доступный веб-дизайн для малых и средних компаний 
 
        
 Lorem ipsum dolor sit amet, conctetur adipisicing elit.Nemo Repellat incidunt quasi quibusdam non nostrum, dolorem molestiae enim, excepturi soluta libero voluptatem provident conctetur accusamus nulla repudiandae nobis. Excepturi, acceptnda. 
  
  

Добавьте HTML-код для раздела Информационный бюллетень

Форма подписки на информационный бюллетень состоит из следующего HTML-кода:

  

         
 Получите нашу рассылку 
 
        

          
           Подписаться 
        
      
  

Добавить HTML-код для ящиков разделов

Наконец, добавьте следующий HTML-код в раздел ящиков:

  

        

           
           
 Расширьте свою аудиторию 
 
          
 Lorem ipsum dolor sit amet, conctetur adipisicing elit. Commodi nulla id quisquam veritatis eius perspiciatis velit eum unde soluta, veniam aliquid deleniti ex similique.Aperiam molestiae natus nulla sit, quis. 
        

        

           
           
 Современный веб-дизайн 
 
          
 Lorem ipsum dolor sit amet, conctetur adipisicing elit. Veniam quia magnam, сладострастные, impedit eum labouriosam acceptnda eos sit at nihil, dolore! Aliquam, Laborum neque corporis molestiae eius ea laudantium porro. 
        

        

           
           
 Сверхбыстрый хостинг 
 
          
 Lorem ipsum dolor sit amet, conctetur adipisicing elit.Veniam quia magnam, сладострастные, impedit eum labouriosam acceptnda eos sit at nihil, dolore! Aliquam, Laborum neque corporis molestiae eius ea laudantium porro. 
        
      
  

Теперь вы должны увидеть следующий результат в браузере, если напрямую откроете index.html :

Styling Index.html

На следующем этапе нам нужно стилизовать содержимое веб-сайт. Файл css / style.css уже включен в индекс .html :

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

Общие CSS Код

Сначала вставьте общий код CSS:

  body {
  шрифт: 15px / 1.5 Arial, Helvetica, без засечек;
  отступ: 0;
  маржа: 0;
  цвет фона: # f4f4f4;
}

.контейнер{
  ширина: 80%;
  маржа: авто;
  переполнение: скрыто;
}

ul {
  маржа: 0;
  отступ: 0;
}  

Заголовок CSS-код

Раздел заголовка содержит брендинг сайта и меню навигации.Для стилизации необходим следующий код CSS, который также добавлен в файл style.css :

  / * Заголовок * /
header {
  фон: # 353637;
  цвет: #ffffff;
  padding-top: 30 пикселей;
  минимальная высота: 70 пикселей;
  нижняя граница: # 32a0c2 3px solid;
}

header a {
  цвет: #ffffff;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
  размер шрифта: 16 пикселей;
}

header li {
  плыть налево;
  дисплей: встроенный;
  отступ: 0 20 пикселей 0 20 пикселей;
}

header #branding {
  плыть налево;
}

header #branding h2 {
  маржа: 0;
}

header nav {
  float: right;
  маржа сверху: 10 пикселей;
}

заголовок.выделить, заголовок .current a {
  цвет: # 32a0c2;
  font-weight: жирный;
}

header a: hover {
  цвет: #cccccc;
  font-weight: жирный;
}  

Обратите внимание, что ссылки меню должны менять внешний вид при наведении курсора мыши на элемент. Поэтому используется заголовок селектора a: hover и установлены значения свойств color и font-weight .

Код CSS для раздела Витрина

Для раздела витрина необходим следующий код CSS:

  / * Витрина * /

#showcase {
  минимальная высота: 400 пикселей;
  фон: url ('../img/headerbg.jpg ') центр без повтора;
  размер фона: обложка;
  выравнивание текста: центр;
  цвет: #ffffff;
}

#showcase h2 {
  маржа сверху: 100 пикселей;
  размер шрифта: 55 пикселей;
  нижнее поле: 10 пикселей;
}

#showcase p {
  размер шрифта: 20 пикселей;
}  

Фоновое изображение задается с помощью свойства background элемента section с идентификатором showcase. Файл изображения хранится в папке img , а имя файла - headerbg.jpg . Этот файл выбирается с помощью функции CSS url .Эта функция ожидает относительный путь в качестве первого и единственного параметра.

Чтобы убедиться, что изображение правильно адаптируется к разным размерам экрана, важно также использовать параметры без повтора и центр . Кроме того, вы должны убедиться, что для свойства CSS background-size установлено значение cover .

Код CSS для информационного бюллетеня раздела

Код CSS для информационного бюллетеня раздела доступен в следующем списке и должен быть вставлен в стиль .css , а также:

  / * Информационный бюллетень * /
#Новостная рассылка{
  отступ: 15 пикселей;
  цвет: #ffffff;
  фон: # 353637;
}

#newsletter h2 {
  плыть налево;
}

#newsletter form {
  float: right;
  маржа сверху: 15 пикселей;
}

#newsletter input [type = "email"] {
  отступ: 4 пикселя;
  высота: 25 пикселей;
  ширина: 250 пикселей;
}

.button_1 {
  высота: 38 пикселей;
  фон: #cccccc;
  граница: 0;
  отступ слева: 20 пикселей;
  отступ справа: 20 пикселей;
  цвет: # 353637;
}  

Код CSS нижнего колонтитула

Затем добавьте код CSS для области нижнего колонтитула:

  нижний колонтитул {
  отступ: 20 пикселей;
  маржа сверху: 20 пикселей;
  цвет: #ffffff;
  цвет фона: # 32a0c2;
  выравнивание текста: центр;
}  

Создание адаптивного веб-сайта с помощью медиа-запросов

Наконец, мы хотим убедиться, что веб-сайт реагирует и адаптируется к изменяющимся размерам экрана.Это достигается путем добавления медиа-запросов в код CSS:

  @media (max-width: 768px) {
  заголовок # брендинг,
  заголовок навигации,
  заголовок nav li,
  # информационный бюллетень h2,
  # форма рассылки,
  #boxes .box {
    float: нет;
    выравнивание текста: центр;
    ширина: 100%;
  }

  header {
    padding-bottom: 20 пикселей;
  }

  #showcase h2 {
    маржа сверху: 40 пикселей;
  }

  #newsletter button {
    дисплей: блок;
    ширина: 100%;
  }

  # ввод формы информационного бюллетеня [type = "email"] {
    ширина: 100%;
    нижнее поле: 5 пикселей;
  }
}  

Используя ключевое слово @media, мы можем определить код CSS, который активируется только при определенном размере экрана.В нашем примере мы хотим определить код CSS, который действителен для размеров экрана с максимальной шириной 768 пикселей. Здесь нам нужно установить для атрибута max-width значение 768px:

 @media (max-width: 768px) {/ * вставьте сюда CSS-код для маленьких размеров экрана * /} 

Implementing The About Page

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

Добавление HTML-кода в файл About.html

Создайте новый файл about.html в папке проекта и вставьте следующий HTML-код:

  

  
    
    
    
    
    
    
    
  
  
    <заголовок>
      

        

           
 
   1-2-3  Веб-дизайн  
        
        
      
    

    <раздел>
      

        <статья>
          

            О нас
          
          

            Lorem ipsum dolor sit amet, conctetur adipisicing elit. Voluptatum quaerat modi fuga doloremque id, dolores tempora, rerum ducimus ipsum dolor explicabo blanditiis! Esse tempore, iure quibusdam aspernatur provident ducimus nesciunt?
          
          

            Lorem ipsum dolor sit amet, conctetur adipisicing elit.Сладострастные, в, а. Tempora rerum excepturi quam accusantium labore? Hic alias ducimus, at reiciendis voluptatum, veritatis ipsum animi dolore dolorem dignissimos dolores.
            Lorem ipsum dolor sit amet, conctetur adipisicing elit. Nihil porro ipsa, acceptnda alias harum debitis ab, a, eligendi, fugiat voluptas conctetur. Placeat cumque autem nemo accusamus odio labore dolore, in.
            Lorem ipsum dolor sit amet, conctetur adipisicing elit. Excepturi quam odio porro quo beatae ipsam Laboriosam ea optio, suscipit ut dolorum! Nisi eius fugiat fugit illo, obcaecati quo.Dicta, eaque.