Визитка html: HTML визитка / DKRYLOV.COM — Статьи для веб разработчиков — Программирование на Python и Objective-C в Mac OS

Содержание

Сайт визитка — оформляем html документ

Верстать будем частично используя стандарты html 5 — современные браузеры отлично понимают разметку этого стандарта и даже ИЕ 7 не подкидывает особых сюрпризов.

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

Посмотреть Demo

Внутри папки synchronous создаем еще одну директорию и назовем ее html. Открываем Notepad++, и набираем следующий код:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<title>Главная</title>
	</head>
	<body>
	</body>
</html>

Должно получиться что то подобное:

В верхнем меню блокнота выбираем Кодировка/Преобразовать в UTF-8 без BOM. Углубляться в тему кодировок в рамках этой статьи не будем, скажу лишь одно — для русскоязычных сайтов лучше использовать именно ее. Далее, в верхнем меню выбираем Файл/Сохранить как… (или кликаем по изображению дискетки в панели чуть ниже). Появится диалоговое окно — в поле Имя файла пишем index.html, выбираем созданную ранее папку html и кликаем по кнопке Сохранить.

Немного подробнее рассмотрим код.

Первоя строка — <!DOCTYPE html>. Данный доктайп сообщит браузеру о том, что наш документ размечен с помощью языка html 5.

Вторая <html lang=»ru»> и последняя </html> строки — тэг html. По стандарту html 5 в открывающем теге html мы указываем атрибут lang=»ru».

Третья и шестая строки — <head></head> — служебный раздел сайта.

Четвертая строка <meta charset=»utf-8″ /> — тэг meta с атрибутом charset=»utf-8″ сообщает браузеру, какую кодировку использовать на сайте.

Пятая строка — <title> </title> — название (заголовок) страницы.

Седьмая и девятая строки — <body> </body> — секция для информации, которая должна быть показана пользователю.

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

Ну и напоследок «ложка дегтя». Если сейчас открыть файл в ИЕ, то увидим, что заголовок страницы, мягко говоря, не читаем. Происходит это потому, что ИЕ игнорирует преобразование, которое было выполнено в Notepad++. Побороть эту проблему не сложно. Откройте index.html в стандартном блокноте Window и пере сохраните его в нужной кодировке (UTF-8 без BOM).

В следующей статье приступим к разметке видимой пользователю части страницы.

Автор: Super User

«Загрузите сайт-визитку на хостинг» — Домашняя работа «Как сделать собственный сайт-визитку» — Тренажёр «Знакомство с веб-разработкой» — HTML Academy

Загрузите сайт-визитку на хостинг

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

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

PHP уже настроен

Бесплатные хостинги чаще всего позволяют загружать HTML, CSS и JavaScript, но не поддерживают PHP. Если вы выбрали хостинг не от Timeweb, то уточните, доступен ли вам PHP.

Посмотрим, как опубликовать наш сайт-визитку.

В личном кабинете на сайте хостинг-провайдера перейдём в файловый менеджер. Отсюда можно управлять файлами сайтов.

В появившемся интерфейсе видно папку public_html. В эту папку нам и нужно загрузить файлы сайта-визитки. Перейдём в эту папку двойным кликом.

Переходим в папку public_html

Мы попали внутрь папки и видим там временные файлы, которые нужно удалить. Выделяем файлы, заходим в пункт меню «Файл» и там нажимаем пункт «Удалить».

Удаляем временные файлы

Теперь папка пустая, и нам можно загрузить туда файлы нашего сайта. Для этого достаточно выбрать файлы в папке на вашем компьютере и перетащить их в папку в браузере (там даже есть специальная подсказка «Директория пуста. Чтобы добавить файлы, перетащите их в это окно»). Ок, поехали!

Загружаем файлы

В появившемся окне будет отображаться процесс загрузки файлов.

Процесс загрузки

Если всё пройдёт хорошо, то окно само закроется при завершении загрузки, и в интерфейсе покажутся все загруженные файлы.

Файлы загружены

Ура, сайт-визитка в интернете! Перейдём в раздел «Сайты» и откроем наш сайт.

Сайт-визитка в интернете

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

Обратите внимание, главный сценарий обязательно должен называться index.php. Если назвать его иначе, то адрес http://unknownraccoon.ru работать не будет. Вместо него придётся всегда набирать что-то вроде http://unknownraccoon.ru/my-awesome-page.php, а это неудобно.

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

Можно редактировать файл на хостинге

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

Текстовый редактор

Редактор можно раскрыть на весь экран. Так работать с файлами будет ещё удобнее.

Текстовый редактор

Как сделать сайт-визитку на HTML?

Сегодня уже все знают о пользе интернета, и каждый сознательный бизнесмен понимает актуальность и важность персонального сайта-визитки для компании. Теперь создать сайт для презентации своей компании — это наиболее эффективный бизнес инструмент, который играет важную роль в маркетинговом, информационном и имиджевом продвижении компании.

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

И, если вы решили создать сайт визитку, давайте рассмотрим варианты его реализации.

Первый способ создания сайта — это заказать его разработку в веб-студи. Здесь есть и свои плюсы — вы получите уникальный и полностью разработанный под вашу деятельность ресурс. И свои минусы — разработка будет стоить достаточно дорого и может занять не один месяц. Да и найти качественную студию, сегодня может быть достаточно сложно, ведь конкуренция высока, а сфера достаточно прибыльная и перспективная. Такой способ реализации сайта, может себе позволить далеко не каждый, а для начинающей собственную деятельность компании, это может «влететь в копеечку».

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

https://www.templatemonster.com/ru/website-templates-type/48180.html

https://www.templatemonster.com/ru/website-templates-type/47987.html

https://www.templatemonster.com/ru/website-templates-type/44392.html

https://www.templatemonster.com/ru/website-templates-type/47835.html

https://www.templatemonster.com/ru/website-templates-type/48415.html

https://www.templatemonster.com/ru/website-templates-type/48321.html

https://www.templatemonster.com/ru/website-templates-type/45836.html

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

Не можете найти ответ на вопрос?

5 страниц, HTML, CSS, JS

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

Естественно, вы можете скачать его бесплатно или посмотреть демо шаблона в онлайне. Для этого достаточно кликнуть по ссылке живого просмотра.

Исходный код шаблона состоит из валидного HTML и CSS. Также используется JavaScript, с помощью которого функционирует слайдер на главной странице.

Что отличает этот шаблон визитки от других?

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

Шаблон вполне обеспечен функционалом для SEO (поисковой оптимизации) и SMO (маркетинга в социальных сетях).

Размер zip-архива с шаблоном сайта: 1.08 Mb.

Дальше: Шаблон сайта веб студии, используется – HTML + CSS + Flash

Дискуссия по теме

10 Комментариев

Добавить комментарий

Viktor

28.11.2017 ? 04:58

Я тоже могу заняться! Обращайся!

Сельвестр

20.01.2016 в 19:00

хорошая основа ….за две ночи довёл под себя … очень простой код без заморочек

Сергеевич жжёт))))

Влад

03.06.2014 в 15:34

Спасибо всем за ответы). Но на данный момент я уже получил некий уровень квалификации в этом вопросе, и могу даже предложить услуги по созданию сайта под ключ (дизайн, верстка, натяжка на WordPress). Поэтому вопрос по поводу админки на данный момент уже снят. Всем спасибо 🙂

Влад

18.12.2012 в 00:27

Здравствуйте! Скачал данный шаблон, большое спасибо! Но как создать для него админ-панель? Пожалуйста, помогите, буду очень благодарен!

Тарас
19.12.2012 в 00:06

Для создания админ. панели необходимо обладать знаниями php, mysql… или вам необходимо сделать просто дизайн (верстку) админки?

Влад
19.12.2012 в 00:28

Мне необходимо просто чтобы можно было через админ панель добавлять страницы и т.д.

Тарас
19.12.2012 в 01:21

Данный шаблон это просто верстка (лиццо сайта). Вам нужно искать программиста, который напишет эту панель и все веб приложение вцелом. Ну и естественно подставит дизайн из этого шаблона в ваш сайт.

Олег Сергеевич
15.01.2014 в 06:07

Здравствуйте! Я могу заняться Вашим сайтом! За информацией обращайтесь по адресу [email protected]

дядя Вова
03.06.2014 в 09:17

Олег Сергеевич лишь на 2 года опоздал…

Тарас
03.06.2014 в 15:19

Сергеевич вне времени )

Добавить комментарий

Сайт-визитка на HTML, основные принципы

Подробности: Категория: Делаем сами; Создано: 19.12.2016 14:50

Сайт-визитка – это ресурс, состоящий из небольшого количества веб-страниц. Главной задачей подобного проекта является донесение до посетителя какой-либо (чаще коммерческой) информации, например описание нового информационного продукта или услуги с контактными данными для ее заказа.

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

Разработка сайта визитки с помощью различных технологий

1. Сайт-визитка на HTML. Разработка сайта визитки на HTML является самым простым способом, поскольку требует гораздо меньше времени, чем остальные варианты, за исключением, конечно, способа создание сайта- визитки по шаблонам. Поэтому неудивительно, что многие компании и индивидуальные предприниматели выбирают именно эту технологию для создания своих интернет-представительств. Тем более сейчас разработана новая версия языка HTML-5.

2. Сайт визитка на языках PHP, Python, Perl. Создание сайтов визитки на основе этих языков требует, чтобы веб мастер обладал определенными знаниями. Хотя сам сайт при этом получается достаточно гибким, возможно также подключение различных дополнительных функций, форма обратной связи, размещение комментариев, форум и т.д.

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

Но я все таки хочу остановить свой выбор на создании сайта визитки на языке HTML и попробуем понять, можно ли считать подобный способ удачным выбором в данном случае.

Преимущества создания сайта-визитки на HTML

• Дешевизна изготовления. Стоимость разработки сайта-визитки на HTML-технологии гораздо меньше, нежели создание даже небольшого ресурса на Flash или серверных языках.

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

• Безопасность. Сайт-визитку на HTML практически невозможно взломать, разве что подобрать пароль к хостингу, где он размещен.

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

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

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

• Малый функционал. HTML-страницы являются статичными, так что разместить на них форму обратной связи, мини-чат, форум не получится.

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

что это такое, чем отличается от обычного, зачем и для чего он нужен

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

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

Подпишись на рассылку и получи книгу в подарок!

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

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

Чем отличается сайт-визитка от обычного, и в чем его преимущества

Основные отличия – содержание и требования к хостингу. В сравнении с обычными платформами сайт-визитка не требователен к хостингу. Для него достаточно минимального места на жестком диске хостинг-провайдера. Из этого следует целый ряд преимуществ:

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

Зачем и для чего нужен сайт-визитка

Зайдя на страницу, пользователь должен получить полную картину о частном лице либо об организации-владельце сайта.

Примерный список того, что должно быть на сайте-визитке:

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

По аналогии с обычными визитными карточками ресурс должен давать общее представление о владельце.

На чем сделать сайт визитку

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

Если вы не хотите обращаться к разработчикам, есть несколько вариантов, как сделать сайт визитку самому, каждый из которых применяется в зависимости от предпочтений и пожеланий владельца:

Создание самостоятельно на одном из бесплатных конструкторов. Сейчас в интернете есть множество платформ, позволяющих создать сайт визитку самостоятельно. Для этого не обязательно иметь какие-либо навыки, так как создание максимально упрощено и производится в визуальном режиме. Это наиболее простой способ, доступный для всех желающих.
Создание на одной из CMS. Системы управления контентом позволяют создавать сайты различной сложности, в том числе визитки. Для этого потребуются минимальные знания основ работы таких систем и умение работать с админкой выбранной CMS. Существуют как бесплатные системы управления контентом, так и с платной лицензией.
Создание статического сайта визитки – способ, требующий знания основ HTML- верстки и PHP. Основное преимущество такого сайта – самая высокая скорость работы ввиду отсутствия платформы, потребляющей значительно количество ресурсов хостинга. Такой ресурс будет быстрее загружаться и реагировать на действия пользователя.

Как продвигать сайт визитку в поисковых системах: сложности и особенности

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

Основной недостаток продвижения в ПС – время. Если нужно получить потенциальных клиентов сразу после запуска ресурса, оптимальным выходом будет контекстная реклама. Преимущества перед поисковым продвижением, состоят в том, что не требуется ждать результата несколько месяцев, он будет моментальным, как только запустится рекламная кампания. Целевые посетители будут заходить на сайт и совершать необходимые действия. При продвижении без рекламы стабильный трафик появится минимум через несколько месяцев после запуска сайта, а порой и через год.

Сайт визитка — W1C : Первый Веб-Консультант

Главной задачей сайта-визитки является формирование адекватного представления о Вас и Вашей компании у клиента.

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

Пример созданного нами сайта-визитки для компании Key to Key ➜

Создать сайт визитку — это запустить сайт с минимальной информацией на нём. По вашему адресу будет размещено общее описание компании или товара, координаты для связи и, возможно, прайс-лист.

Заказать создание сайта-визитки стоит для решения нескольких задач

Когда это первый сайт вашей компании, и вы хотите начать с малого.
Недорого сделать веб-сайт визитку удобно для компаний, работающих с иностранными или иногородними партнёрами.
Цена на разработку сайта-визитки позволяет сделать личный сайт без особых затрат.
Сайт-визитка недорого может быть первой площадкой для «приземления» клиентов из контекстной рекламы или поискового продвижения. Учитывая, сколько стоит сайт-визитка, это существенный плюс по сравнению с рекламой без сайта.
Стоимость простого сайта-визитки позволяет использовать его для размещения базового коммерческого предложения, нескольких изображений товара и другой информации, необходимой для презентации партнёрам или клиентам.

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

15 CSS Business Cards

Коллекция бесплатных HTML и CSS визиток примеров кода.

CSS-карты
Карточки блога CSS
Эффекты наведения карты CSS
Макеты карт CSS
Флип-карты CSS
Карты материального дизайна CSS
Видеокарты CSS
Карты профиля CSS
Карты рецептов CSS
Кредитные карты CSS

Автор

Уитли
23 января 2019 г.

О коде

Визитная карточка

Визитная карточка в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Лаура Пинто
18 января 2019 г.

О коде

Анимированная визитка

Анимированная визитка на чистом CSS .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Сабина Робарт
31 октября 2018 г.

О коде

Визитная карточка Fipping

Интерактивный дизайн карточки с background-clip: text + background: linear-gradient animation.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

О коде

Визитная карточка

Визитная карточка в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Томас Хэнсон
10 сентября 2018 г.

О коде

CSS Визитная карточка

Quick визитная карточка дизайн, на котором я решил напечатать учетные данные Патрика Бейтмана.100% CSS3, со стилями : hover и : focus элемента кнопки, которые используются для обеспечения плавной двухэтапной анимации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Сиддхартх Хубли
31 июля 2018 г.

О коде

Визитная карточка материала

Визитная карточка из материала CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Лиз Вендлинг
25 марта 2018 г.

О коде

Геометрическая визитка с сеткой CSS

Игра с CSS Grid, Flexbox, clip-path и radial-gradient .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дэнни Винтер
18 сентября 2017 г.

О коде

Визитная карточка вдохновения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Визитная карточка

Визитная карточка с анимацией на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Елена Назарова
22 августа 2016 г.

О коде

Визитная карточка 3D Flip

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Сделано с

HTML (Haml) / CSS (SCSS) / JavaScript

О коде

Визитная карточка

Перелистывающая визитка в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Петер Гирнус
27 октября 2015 г.

О коде

Гибкая цифровая визитка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

Зак Сосье
11 апреля 2015 г.

О коде

Визитная карточка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

CSS Визитная карточка

Этот пример представляет собой набросок цифровой визитной карточки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery.js

Автор

Эдуард Косицкий
28 июля 2014 г.

О коде

Концепция визитной карточки

Концепция визитной карточки в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: ionicons.css

30+ впечатляющих визитных карточек CSS (бесплатный код + демонстрации)

1.Анимированная визитка CSS

Автор: Лаура Пинто (lauraalpinto)

Дата создания: 18 января 2019 г.

Сделано с помощью: HTML, SCSS

Теги: визитка, портфолио, scss, анимация

2. CSS Grid: Business Card

Экспериментируем с CSS Grid и его свойствами. Создал шаблон визитной карточки с использованием Css Grid, который я нашел здесь: https://www.behance.net/gallery/27133319/Material-Business-Card-Template-(Freebie). Иконки сделаны: www.freepik.com

Автор: Siddharth Hubli (SRHubli)

Дата создания: 31 июля 2018 г.

Сделано с помощью: HTML, CSS, JS

Теги: css-grid, business card, html-and-css, material design

3. Геометрическая визитная карточка с сеткой CSS

Игра с сеткой css, flexbox, clip-path и radial-gradient Воссоздание шаблона визитной карточки, как показано здесь: https: // новадонна.me / product / business-card-template-designs-pop-geometry /

Автор: Liz Wendling (Elwend)

Дата создания: 24 марта 2018 г.

Сделано с помощью: HTML, Less, JS

Теги: css-grid, flexbox, card

4. Перелистывание визитной карточки CSS

100dayscss # 034 Fipping Business Card Интерактивный дизайн карточки с текстовой маской клипа + анимация фонового клипа с линейным градиентом.

Автор: Sabine Robart (Artemis1)

Дата создания: 31 октября 2018 г.

Сделано с помощью: HTML, SCSS, JS

Теги: background-clip, linear-gradient, design , карточный, интерактивный

5.One Punch Man — CSS Business Card

Экспериментируем с Css Grid и его свойствами. Создал шаблон визитной карточки с использованием Css Grid, который я нашел здесь: https://www.behance.net/gallery/27133319/Material-Business-Card-Template-(Freebie) Иконки сделаны: www.freepik.com

Автор: Siddharth Hubli (SRHubli)

Дата создания: 31 июля 2018 г.

Сделано с помощью: HTML, CSS, JS

Теги: css-grid, business-card, html-and- css, материальный дизайн

6.CSS Business Card

Быстрый дизайн визитной карточки, на котором я решил напечатать учетные данные Патрика Бейтмана. 100% CSS3, со стилями: hover и: focus элемента кнопки, которые используются для обеспечения плавной двухэтапной анимации.

Автор: Thomas Hanson (swellfoop)

Дата создания: 10 сентября 2018 г.

Сделано с помощью: HTML, CSS

Теги: css, анимация, визитная карточка, изометрическая, 3d

7.Черная визитка CSS

Эта ручка представляет собой эскиз для цифровой визитки

Автор: jasper (jboeijenga)

Дата создания: 4 сентября 2014 г.

Сделано с помощью: HTML, CSS, JS

Теги: css, animation, 3d, flipping-card

8. Business Card

Автор: Gigi (gigiyeh)

Дата создания: 12 ноября 2016 г.

Сделано с помощью: Pug , Sass

Препроцессор CSS: Sass

Препроцессор JS: Нет

Препроцессор HTML: Pug

9.Карта вдохновения

Автор: Дэнни Винтер (dannievinther)

Дата создания: 18 сентября 2017 г.

Сделано с помощью: HTML, CSS

Теги: карта, объявление

10. Темная визитка

О себе: Это онлайн-версия моей визитной карточки. Не стесняйтесь предлагать улучшения. Вклад и предложения Обычно вы можете связаться со мной в Твиттере. Хотите создавать крутые штуки? Я всегда с нетерпением жду встречи с новыми людьми.Если вы хотите работать со мной или просто хотите подключиться, я …
Прочитайте больше

Автор: Lubos (mrlubos)

Дата создания: 16 августа 2016 г.

Сделано с помощью: Haml, SCSS, JS

Предварительный процессор CSS: SCSS

9000-

процессор: Нет

HTML-препроцессор: Haml

Теги: business, card, html, css, javascript

11.3D Flip Business Card

градиентный узор на основе узора Кахи Кахадзена https://dribbble.com/shots/2
9-Pattern-for-Business-Cards

Автор: Елена Назарова (назарелен)

Created on: 22 августа 2016 г.

Сделано с помощью: HTML, CSS

12. Моя гибкая цифровая визитка

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

Автор: Питер Гирнус (Gothburz)

Дата создания: 27 октября 2015 г.

Сделано с помощью: HTML, SCSS

Теги: визитная карточка, социальные иконки, css , переворачиваемый, минимальный

13. Дизайн визитной карточки — Reddit

Концепция визитной карточки, которую я создал для небольшого испытания на http://reddit.com/r/web_design!

Автор: Эдуард Косицкий (heyitsedward)

Дата создания: 28 июля 2014 г.

Сделано с помощью: HTML, SCSS

Теги: flat, card, css, минимальный

.CSS Business Card

Эта ручка представляет собой набросок цифровой визитки

Автор: jasper (jboeijenga)

Дата создания: 4 сентября 2014 г.

Сделано с помощью: HTML, CSS, JS

Теги: css, animation, 3d, flipping-card

15. Business Card

Одна из моих идей визитки, которую я могу превратить в настоящую визитку.

Автор: Зак Сосье (ZachSaucier)

Дата создания: 10 апреля 2015 г.

Сделано с помощью: HTML, SCSS, JS

Теги: css, card, визитная карточка 9000 16.Интерактивная визитка на чистом CSS

Думаю, я зашел слишком далеко. Это отправка на конкурс субреддита / r / web_design. Интерактивная визитка. Здесь не задействован JavaScript (кроме глупого JS с загрузкой шрифтов Typekit) и нет произвольной загрузки в файлы изображений (все обрабатывается в SVG). Почему cl …
Прочитайте больше

Автор: Тайлер Годфри (TGAmpersand)

Дата создания: 3 августа 2014 г.

Сделано с помощью: HTML, SCSS, JS

Теги: визитная карточка, интерактивная, только css , анимация, витрина

17.Css Business Card

Автор: amine (aminejafur)

Создано: 30 января 2018 г.

Сделано с помощью: HTML, меньше

18. Демонстрация визитной карточки в стиле Materialize

Быстрая материализация в стиле CSS визитную карточку, которую я собрал для своего сайта-портфолио. Вы можете легко заменить изображение Base64 на изображение профиля по вашему выбору. Кроме того, для развлечения я экспериментировал со способом разрешить использование Font-Awesome или Materialize для определенных иконок — я использовал сом…
Прочитайте больше

Автор: Джошуа Т (joshuatz)

Дата создания: 12 декабря 2018 г.

Сделано с помощью: HTML, CSS

Теги: materializecss, материализация, визитная карточка, материалы Google, портфолио

19. Hover-effect-card

Автор: Kesavaraj (kesavaraj)

Дата создания: 10 ноября, 2019

Сделано с помощью: HTML, CSS

Теги: card, hover -карта, визитка, карточка товара, наведение изображения

20.Карточка с CSS

Автор: Саид Хассанванд (Hassanvand)

Дата создания: 8 октября 2019 г.

Сделано с помощью: HTML, CSS

Теги: визитка, визитка

21. Визитная карточка

Автор: Рик (iPhyse)

Дата создания: 23 сентября 2019 г.

Сделано с помощью: HTML, SCSS

Теги: визитка, визитка, бизнес

22.Необычный эффект наведения для карт

Автор: Хакан Косекадам (hakankoesekadam)

Дата создания: 15 мая 2019 г.

Сделано с помощью: HTML, SCSS, JS

Теги: -js, визитная карточка, карточка

23. Адаптивная визитная карточка

Автор: Джо Гастингс (JoeHastings)

Дата создания: 6 октября 2017 г.

Сделано с помощью: Haml, Less

Препроцессор CSS: Менее

Препроцессор JS: Нет

Препроцессор HTML: Haml

Теги: css-grid, business-card

24.HTML Business Card

Простой шаблон визитной карточки в формате HTML, фиксированная ширина и размер 300×600.

Автор: Маргус Лиллемяги (VisualAngle)

Дата создания: 2 декабря, 2017

Сделано с помощью: HTML, CSS

Теги: визитки, визитки, визитки, 30040×600

25. Адаптивная визитная карточка

Автор: Джо Хастингс (JoeHastings)

Дата создания: 6 октября 2017 г.

Сделано с помощью: Haml, Less

Предварительный процессор CSS: Less

Препроцессор JS: Нет

Препроцессор HTML: Haml

Теги: css-grid, business-card

26.Amon WindReaver CSS Card

Я сделал это для конкурса envato и просто хотел поделиться здесь.

Автор: Binary (VoidBoy)

Дата создания: 23 июня 2015 г.

Сделано с помощью: HTML, CSS

Теги: визитная карточка, визитная карточка, портфолио, анимация

20+ примеров дизайна пользовательского интерфейса визитных карточек на CSS

Визитная карточка — это нечто иное, чем тоже для системного администрирования.Это дополнительно говорит о вашем имидже и отточенной методологии или персонаже. Вот почему так важно использовать идеальный текстовый стиль при планировании визитки. Типографика предполагает важную работу в плане визиток в формате HTML. Трудно найти текстовый стиль, соответствующий имиджу и бизнесу вашего клиента. С таким накоплением лучших визитных карточек мы рекомендуем множество текстовых стилей и шрифтов, которые идеально подходят для вашей следующей структуры визитки.Итак, в этой статье мы обсудим различные примеры дизайна пользовательского интерфейса визитки с использованием HTML, CSS и JavaScript. Вы также можете использовать некоторые из этих концепций CSS в качестве визитной карточки.

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

Все макеты созданы безупречно и представлены в ассортименте эффективно редактируемых конфигураций!

Коллекция примеров дизайна пользовательского интерфейса визитных карточек CSS с фрагментом кода

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

Связанные

При создании макета визитки дизайнеру следует сосредоточиться на самых мелких тонкостях. Общий формат, определение стиля текста, разделение, установка слов и т. Д. — вот лишь часть тонкостей, на которых вам следует сосредоточиться.

Просмотрите эти оригинальные макеты визиток, чтобы вывести структуру своей карты на новый уровень.

1. Материализовать стилизованные визитки в формате HTML

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

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

Это один из примеров дизайна пользовательского интерфейса визитной карточки с использованием CSS. Вы также можете использовать эти концепции CSS в качестве визитной карточки.

Демо / Код

2.Визитная карточка CSS UI Design

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

Перейдите по ссылке ниже, чтобы получить доступ к полной структуре кодирования.

Вы также можете использовать эти концепции CSS в качестве визитной карточки.

Демо / Код

3.HTML визитки

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

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

Это один из примеров дизайна пользовательского интерфейса визитной карточки с использованием CSS.

Демо / Код

4. Визитные карточки HTML CSS

Это подчеркивает единственный в своем роде вид, который поможет настроить планы вашей визитки. Мы можем видеть изометрическую перспективу на карточке, которая содержит данные о человеке.

Кроме того, в левой части можно увидеть значки социальных сетей. Символы немного приподнимаются. Используя различные действия и воздействия с помощью CSS и HTML, создатель придумал, как сделать увлекательный способ представить себя или свою организацию.

Вы можете получить полную структуру и код по ссылке внизу.

Демо / Код

5. Визитные карточки HTML для Интернета

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

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

Это один из примеров дизайна пользовательского интерфейса визитной карточки с использованием CSS. Более того, самое лучшее в этом то, что переход по ссылке под ним обеспечивает доступ ко всему.

Вы также можете использовать эти концепции CSS в качестве визитной карточки.

Демо / Код

6. Визитные карточки в формате HTML

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

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

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

Демо / Код

7. Ванпанчмен — Визитная карточка

Для незнакомых людей: One-Punch Man — это японская веб-манга о героях, созданная ONE.Дизайнер использовал аналогичную идею, чтобы создать план пользовательского интерфейса визитной карточки.

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

Демо / Код

8. Перелистывание визитной карточки

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

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

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

Демо / Код

9. Пример визитной карточки CSS Grid

Если говорить о спланированной визитной карточке со всех сторон, это еще одна похвальная разновидность в виде сетки.Здесь дизайнер разместил переднюю и заднюю часть визитной карточки на отдельной странице.

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

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

Демо / Код

10. Геометрическая визитка с сеткой CSS

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

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

Идеально подходит для тех, кто ищет все более инновационные устройства. Откройте для себя все коды и тонкости, перейдя по ссылке ниже.

Вы также можете использовать эти концепции CSS в качестве визитной карточки.

Демо / Код

11.CSS Визитная карточка

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

Эти оригинальные макеты визиток также могут быть уместны для демонстрации ваших структур клиентам и в портфолио.

Мокапы подчеркивают фотореалистичный дизайн с текстурами и основой.

Это также один из примеров дизайна пользовательского интерфейса визитной карточки с использованием CSS.Вы также можете использовать эти концепции CSS в качестве визитной карточки.

Демо / Код

12. Дизайн карты вдохновения

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

Так что используйте этот бесплатный и веселый макет, чтобы продемонстрировать свою творческую сторону через свои структуры. Свободный формат также включает оригинальную установку откосного фундамента.

Добавьте восхитительный логотип и дополнительные данные, и готово! Он также эффективно адаптируется.

Демо / Код

13. Анимационный дизайн визиток

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

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

Демо / Код

14. Визитные карточки с HTML и CSS

Это ультрасовременный формат макетов визиток, который даст вам возможность продемонстрировать свои планы визиток с активным действием. Данные на карте можно найти альтернативными способами. Чтобы увидеть дополнительные данные, просто наведите указатель мыши на карту.

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

Демо / Код

15. 3D Flip Business Card

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

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

Это также один из примеров дизайна пользовательского интерфейса визитной карточки с использованием CSS.

Демо / Код

16. Визитная карточка CSS

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

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

Вы также можете использовать эти концепции CSS в качестве визитной карточки.

Демо / Код

17. Цифровая визитная карточка

Цифровые визитные карточки время от времени используются опытными экспертами, чтобы помочь клиентам эффективно связаться с ними. Если вы планируете индивидуальную верстку сайта или сайт для консультантов, подобные компоненты будут полезны владельцам сайта.

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

В этом плане разработчик использовал правильное движение бокового переворачивания, которое является плавным и чистым.

Удар тени также проницательно используется для отделения важного компонента от фундамента.

Демо / Код

18. Пример визитки в формате HTML

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

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

Демо / Код

19. Анимированная визитка

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

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

Демо / Код

20. Дизайн визиток

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

Как видно из демонстрации, карта представляет собой издевательство над своей противоположной стороной с альтернативным затенением на плавающей стороне.

Также особенная структура этого макета сразу бросится в глаза.

Демо / Код

21. Образец визитной карточки с использованием jQuery Flip

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

Более того, поскольку структура полностью зависит от HTML, CSS и JQuery, это однозначно простой и повторяющийся выбор.

Демо / Код

22. Складная цифровая визитка

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

Это также один из примеров дизайна пользовательского интерфейса визитной карточки с использованием CSS.

Демо / Код

Заключение

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

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

21 Визитные карточки CSS — UseJquery

Итак, здесь мы собрали визитки, разработанные с использованием CSS лучшими разработчиками платформы Codepen.

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

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

Визитные карточки CSS

  Автор : Николас Доби
  Разработано  с использованием HTML и CSS

Геометрическая визитная карточка с сеткой CSS

  Автор : Лиз Вендлинг
  Разработано  с HTML и CSS

Визитная карточка CSS

  Автор : Томас Хэнсон
  Разработано  с HTML и CSS

3D Flip Business Card

  Автор : Елена Назарова
  Разработано  с HTML и CSS

Визитная карточка на чистом CSS

  Автор : Тиджей Паркер
  Разработано  с HTML и CSS

Дизайн визитной карточки CSS

  Автор : Амин
  Разработано  с HTML и CSS

Бранден создает визитную карточку CSS

  Автор : Бранден Янгс
  Разработано  с HTML и CSS

CSS Business Card Play Около

  Автор : Джориан Калсе
  Разработано  с использованием HTML, CSS и JS

Анимация визиток CSS

  Автор : Питер Сон
  Разработано  с HTML и CSS

Визитная карточка CSS

  Автор : Дэнни Винтер
  Разработано  с HTML и CSS

Материал JQuery Business Card

  Автор : Thomas Wang
  Разработано  с использованием HTML, CSS и JS

CSS Визитные карточки

  Автор : Марк Ферролд
  Разработано  с HTML и CSS

Перевернутая визитка

  Автор : Сабина Робарт
  Разработано  с HTML и CSS

Простые визитки

  Автор : Грег Хейс
  Разработано  с HTML и CSS

Веб-дизайн визиток

  Автор : Эдуард Косицкий
  Разработано  с HTML и CSS

Гибкая цифровая визитная карточка

  Автор : Питер Гирнус
  Разработано  с HTML и CSS

Цифровая визитная карточка

  Автор : Зак Сосье
  Разработано  с HTML и CSS

Business Card CSS

  Автор : Gigi
  Разработано  с HTML и CSS

Визитные карточки CSS

  Автор : Alex
  Разработано  с HTML и CSS

Интерактивная визитная карточка CSS

  Автор : Даниэль Дестефанис
  Разработка  с использованием HTML и CSS

Создание цифровой визитной карточки с помощью HTML и CSS | Натан Блэр

стенограммы

1.Введение в курс: Привет, вы могли заметить, что технологии развиваются все быстрее и быстрее практически во всех отраслях, и веб-технологии не являются исключением. Изучение HTML и CSS — отличные навыки не только для вашей карьеры, но и просто для личного роста. Я Натан Блэр. Я веб-разработчик и изучил HTML и CSS из таких руководств. Я могу сказать вам по собственному опыту, что вы тоже можете это сделать. Все, что вам нужно, — это несколько забавных проектов, много практики и небольшое руководство, чтобы вы начали.И этот курс будет изучаться на практике. Мы собираемся создать простой дизайн HTML и CSS, который можно использовать в качестве вашей цифровой визитки. Мы начнем с того, что поговорим о том, как создать проект веб-сайта на вашем компьютере. Затем мы перейдем непосредственно к дизайну с использованием стилей CSS. Я оставлю вам несколько моих личных советов, а также некоторые вещи, которые вы, возможно, захотите проверить после курса. К концу курса у вас будет общедоступная страница и некоторый код, который вы сможете показать кому угодно.Этот курс для тебя. Если у вас есть базовые навыки работы с компьютером, возможно, даже навыки дизайна. Но вам действительно интересно узнать, как создать свой собственный веб-сайт или как внести простые изменения в существующий сайт. Вам необходимо иметь базовое представление о том, как управлять своим компьютером. Вам также понадобится какой-нибудь редактор кода. Сейчас я предпочитаю использовать Adam, но многие люди любят возвышенный текст или визуальную студию, что действительно зависит от ваших предпочтений. Я разместил несколько ссылок на каждый из них в описании проекта, так что вы можете проверить их.Наконец, убедитесь, что у вас есть хорошая фотография, которую вы хотите разместить на своей странице. Или, если хотите, можете использовать логотип или любое изображение. Это ваш вызов. Итак, вы готовы добавить в свой арсенал некоторые навыки HTML и CSS? Если да, то приступим к нанесению покрытия

2. HTML-документ и синтаксис: готово, готово. Давайте сначала узнаем немного о HTML. HTML означает язык разметки гипертекста, и вы можете прочитать много историй, которые вошли в H два миллиона. Но в основном это строительный блок всемирной паутины, какой мы ее знаем.Если вы посмотрите сегодня любую веб-страницу и увидите этот источник, щелкнув правой кнопкой мыши, вы увидите HTML, который уходит в фоновый режим. Не знаю, видно ли на экране такого размера, но HTML есть. У вас есть несколько базовых HTML-тегов, а потом еще и много всякой чепухи. Этот сайт пока игнорирует это, но все в Интернете так или иначе имеет форму HTML. Итак, чтобы начать работу над этим проектом, сначала нам нужно убедиться, что наша среда настроена правильно. Итак, давайте продолжим и откроем новое окно поиска.И вы знаете, что мне нравится делать, это если вы много раз заходите в свою домашнюю папку, вы видите папку «Сайты». Если у вас его еще нет, вы можете создать его, так что откройте его, и мы создадим папку для нашего проекта. Я рекомендую создать папку проекта, в которой будут храниться все файлы вашего проекта. Так что при работе с веб-сайтами она стала немного более организованной и простой в управлении. Это также широко известно как маршрут сайта по маршруту сайта. Дадим ему простое имя. Я просто перейду к уроку и сделаю еще один шаг.Я просто облегчу себе задачу и добавлю это в избранное. Теперь перейдем к следующему шагу — созданию нашего документа. Итак, для этого шага вам понадобится какой-нибудь редактор кода, как я уже упоминал, вы можете выбрать любое программное обеспечение, которое вам больше всего нравится. Давайте продолжим, откроем наш редактор кода и создадим новый файл. Я собираюсь сохранить это в своей новой папке с учебниками. Вот где сейчас пригодится сохранение папки и избранного. Стандарт для документов HT Mill заключается в том, что ваша домашняя страница будет называться index, а затем расширение файла — точка html Good и щелкните.Сохранить Сейчас. Во-первых, нам нужен тег, который сообщает браузеру, какой тип документа. Это значит, что мы наберем тип документа, и сразу же с помощью редактора кода вы увидите, что он предлагает вам теги. Он умен и знает, что вы вводите, и вы можете либо щелкнуть по нему, либо перейти на вкладку. Хорошо, следующий очень простой тег — это HTML Tech. И это сообщает браузеру, что именно здесь мы начинаем наш HTML, и для каждого тега с этого момента нам нужны открытый и закрытый теги. Итак, это открывает наш тег.Следующий, используя косую черту, закрывает его. Итак, теперь у нас есть открытый HTML и закрытый мужчина. Все теги HTML следуют этому основному принципу, как правило, внутри тега HTML. У вас есть голова и тело внутри головы. Это то место, где собирается вся метаинформация о вашей веб-странице, такие вещи, как заголовок страницы, и вы можете видеть, что она автоматически заполняется домашней страницей. Но давайте дадим ему другое название. Назовем наше имя. Так что я наберу Натана Блэра. Вот и мы, а не внутри тела. Вот куда идет весь ваш собственный HTML. Вот где вы собираетесь создать сайт, который будете видеть на экране.Теперь, прежде чем мы перейдем к этому, давайте взглянем на некоторые другие метатеги, которые вы можете добавить в заголовок. Что мне нравится делать, так это делать записи об этих вещах, потому что я не обязательно запоминаю все различные метатеги. Фактически, мы упустили одну вещь. Мы также могли бы добавить язык в наш HTML-тег. Давайте продолжим и поместим это туда. Так что это просто говорит браузеру: «Эй, смотри, этот документ будет на английском языке, хорошо, давайте посмотрим здесь на пару других метатегов». Вы видите мета тега, вероятно, в 90% случаев, когда вы собираетесь использовать указанный вспомогательный символ UTF.Так что я бы просто рекомендовал придерживаться этого. И следующий метатег, который мы добавим, предназначен для адаптивного дизайна. Мы поговорим об этом чуть позже, но в основном это просто гарантирует, что ваша веб-страница правильно масштабируется при просмотре на iPhone или iPad или на большом экране. Давайте добавим к телу что-нибудь просто для удовольствия. Хорошо, сохраните. Эй, давай посмотрим, что у нас есть. Итак, как вы просматриваете HTML-документ со своего компьютера? Что ж, это довольно просто. Перейдем к документу и просто перетащим его в браузер.Эй, посмотри на это. Вот и наш привет мир. Если вы посмотрите в заголовок, вы увидите текст заголовка и у вас есть базовый HTML-документ. Итак, это охватывает основной синтаксис HTML. Давайте добавим несколько элементов в наше следующее видео.

3. Основные элементы: заголовки и абзацы: Хорошо, у нас есть красивый текст «Привет, мир» и большая пустая пустая страница. Давайте немного заполним его основными текстовыми элементами. Итак, вернемся к нашему редактору кода, у нас будет заголовок. Это один из основных тегов, который распознает каждый браузер.Идите вперед и введите H one в свое тело и тоже закройте его. И в середине этого тега мы наберем заголовок. Я собираюсь использовать для этого свое имя. Сохраним это и проверим. Обновите страницу. Эй, посмотри на это. У нас есть немного стайлинга. Он приходит прямо из коробки, потому что каждый браузер знает, что такое тег H one. Есть и другие теги заголовков. Если вы нажмете H два, у вас будет два возраста, метки H три часа четыре. Список сокращается до шести, и каждый имеет свой размер.Итак, как вы можете видеть, по мере увеличения числа заголовок становится меньше, и стиль этих заголовков может быть изменен с помощью CSS, о чем мы поговорим позже в этом уроке. Теперь нам не нужны все эти заголовки, но оставим H два. И в нашем H-два это будет наш подзаголовок. И я думаю, что это хорошее место, чтобы указать вашу должность или некоторые другие подзаголовки, которые вы хотели бы добавить на свою визитную карточку. Так что я просто поставлю веб-разработчика. Сохраните это и давайте проверим.Большой. Хорошо, давайте взглянем на другой тег. Это тег P, сокращение от абзаца. И давайте просто посмотрим, как это выглядит. И множество редакторов. Вы можете просто набрать Boram, и он даст вам текст, сделанный Лаурой. Как видите, здесь длинная строка, но она отлично подходит для семплирования. Как видите, оформление тега абзаца намного проще. Он предназначен для абзацев, как вы уже догадались. Теперь, в нашем случае, нам не нужен целый абзац текста на визитной карточке. Я имею в виду, я думаю, вы, конечно, можете это сделать, но я думаю, что это подходящее место для размещения нашего адреса электронной почты.Хорошо, сохраните. Давайте взглянем. Отлично. Большой. Сейчас это не так уж и много Но я обещаю вам, что все соберется вместе. Мы просто должны делать это шаг за шагом. Как мы узнаем. При разработке веб-страницы следует помнить о семантике. Что это обозначает? Что ж, браузеры и другие устройства, которые читают вашу веб-страницу, будут ожидать определенных вещей от разных тегов на вашей странице. Например, внутри тега заголовка ожидается, что это будет какой-то заголовок.То же самое с двумя буквами H в абзаце. Некоторые устройства, такие как считыватели Green, будут использовать эту семантику для навигации по веб-сайту. Поэтому важно помнить, какой контент вы вкладываете в эти разные налоги HTML. В следующем уроке мы рассмотрим доступные вам html-теги mawr и создадим список с

4. Таблицы и списки: путь. Итак, мы узнали об основных текстовых элементах. Но как еще можно структурировать информацию о текстурах в Интернете? Ну, один пример — таблица. Мы не собираемся использовать таблицу в этом конкретном проекте, поэтому не думайте, что вам нужно что-то печатать.Но это один из основных элементов HTML, о котором вам следует знать, поэтому я хотел бы быстро его рассмотреть. Итак, в таблице у вас есть несколько стандартных разделов. У вас Т-образная голова, Т-образное тело. И если вам сейчас нужна Т-образная ступня, в этих разделах всегда есть TR, который обозначает строку таблицы, а внутри этого T d и TV — каждая отдельная ячейка. Давайте быстро создадим макет HTML-таблицы, чтобы вы могли понять, как они работают. Давайте просто создадим несколько основных заголовков, и тело будет делать то же самое, а затем то же самое в нижнем колонтитуле.И чтобы сэкономить время, я скопирую отсюда и вставлю его. Но давайте сделаем несколько других строк. Хорошо, посмотрим, как это выглядит. Хорошо, отлично. Итак, у нас есть еда. Барбат в заголовке таблицы. У нас есть 123 и наша первая строка, а затем ABC в нижнем колонтитуле. Теперь, если бы у нас была более сложная таблица или настоящая таблица, мы, вероятно, увидели бы более одной строки. Это выглядит примерно так, и у каждого могут быть свои значения, поэтому таблица может становиться все длиннее и длиннее. Вы можете добавить еще столбцы, которые вам нравятся.С HTML-таблицами можно делать гораздо больше. Я не буду вдаваться в подробности в этом руководстве, но просто знайте, что таблицы — отличный ресурс, когда вы создаете свой веб-сайт. Вот кое-что, что мы будем использовать в нашем проекте. Есть еще кое-что, что вы можете использовать для отображения структурированной информации, и это список. Есть два типа списков. В HTML. Есть упорядоченный список, который представляет собой тег ol, а также есть ul A Norden List и каждый из них. Для каждого элемента есть еще один вложенный тег.Это элемент элемента списка, или L I. Давайте посмотрим, в чем разница между этими двумя типами списков. Мы собираемся добавить несколько предметов к каждому, и давай посмотрим, а? Итак, как вы можете видеть, упорядоченный список упорядочен, и в виде чисел в списке нет — это просто маркеры. Я часто использую список A Norden, но, безусловно, есть приложения для упорядоченного списка. Для этого проекта мы будем использовать A Nordeste. Этот список даст нам хороший формат для перечисления всех различных профилей, на которые мы хотим ссылаться с нашей веб-страницы в качестве заполнителя.Я просто собираюсь указать название каждого веб-сайта, на который я хочу ссылаться, на один из моих любимых веб-сайтов по программированию, как вы видели ранее, это get hub. Так что я добавлю это сюда. Еще поставлю удлинить и твиттер. Хорошо, скажем так и посмотрим, как это выглядит. Хорошо, поехали. Теперь, по мере продвижения этого урока, мы будем добавлять ссылки на эти элементы. Но пока у нас хорошее начало. Знаешь что? На самом деле, я думаю, это хорошая тема для следующего видео. Давайте продолжим и добавим немного длины нашим предметам. Старый

5.Ссылки и изображения: Теперь, когда у нас есть элементы списка, нам нужно добавить несколько ссылок. Итак, давайте продолжим и немного очистим это. Во-первых, мне нравится Теох. Храните все в отдельных строках, чтобы мне было удобнее читать этот текст в разделе Get hub. Я добавлю тег ссылки. Ссылка на самом деле вызывается в теге привязки, который является всего лишь таким открытым привязкой. Закрыть привязку посередине — это получить концентратор. Теперь нам нужно добавить букву u. R Я слышал, как мы это делаем, используя атрибут, который мы собираемся использовать специально. Атрибуты H ref. Многие элементы в электронной почте H имеют атрибуты, и это просто биты информации, которые вы можете добавить к элементам, чтобы заставить их вести себя. определенным образом или изменить различные аспекты их.Этот атрибут, в частности, добавляет ваш l к вашей ссылке. В этом случае я добавлю свой u R l в свой профиль получения хаба. Лучше всего включать https впереди, чтобы браузер не запутался в том, является ли этот веб-сайт частью вашего сервера или он куда-то направляется. Хорошо, теперь я добавил мою ссылку. Давайте попробуем. Идите вперед, обновите страницу и проверьте ее. У нас есть ссылка. Теперь посмотрим, работает ли это. Вот и мой профиль Get Hub. Но, как видите, он открыл его в том же окне браузера.И вы не обязательно хотите, чтобы весь ваш трафик уходил с вашего сайта, как только кто-то переходит на одну из других ваших страниц. Итак, давайте вернемся и немного изменим это. Есть еще один атрибут, который можно использовать в теге привязки, под названием Target. И нет, это не относится к популярному торговому центру, который фактически сообщает браузеру, какое окно использовать. Так что мы скажем «пусто». По сути, это означает, что мы хотим, чтобы это открылось в новой вкладке. Сохраним это и попробуем. Обновите страницу и перейдите по нашей ссылке.Итак, мы идем. У вас новый кран. Проделаем то же самое с другими ссылками. Я просто скопирую и вставлю, чтобы сделать это немного проще, и мы заменим их другими вашими URL-адресами. А теперь давайте изменим текст в тегах привязки. Отлично. Посмотрим, как это выглядит. Отличный тест. Ссылки не давно есть, но работает. Хорошо, отлично. Итак, теперь у нас есть три ссылки. Давайте поднимем его на ступеньку выше и действительно сделаем что-нибудь необычное. Мы собираемся добавить изображение на эту страницу. Это еще один элемент, использующий атрибуты.Давайте взглянем. Давайте добавим наше изображение вверху нашего документа. Тег изображения. Это просто я G. И обычно мы используем два атрибута с этим тегом. Давайте сначала поговорим немного о старых атрибутах. Старый — альтернативный текст. Причина. Нам нужен альтернативный текст. Зарубежные образы? Что ж, некоторые люди в Интернете не могут видеть изображения. Они слепые. Таким образом, программы чтения с экрана могут прочитать этот альтернативный текст и понять, какое изображение находится на экране. Так что здорово добавить несколько хороших описательных текстов в свои собственные атрибуты.Оставим это поле пустым, пока не узнаем, какое изображение мы добавляем. Вот где вам понадобится изображение или логотип, чтобы нанести его на визитную карточку. У меня уже есть настроенное стандартное изображение профиля, которое я добавляю повсюду в Интернете, и вы собираетесь поместить его прямо в папку с учебником, где будет ваш веб-корень. Вернемся к нашему коду. Итак, поскольку мы знаем, что он находится в нашем веб-корне, мы даже можем увидеть его здесь, в нашем проекте. Мы можем просто ввести здесь имя файла. Сохраним и посмотрим.Эй, посмотри. Это я. Итак, у нас есть наш образ. Теперь добавим старый текст. Улыбающееся лицо Натана Блэра. Если вы обновите страницу, вы увидите, что ничего не изменилось, но программа чтения с экрана сможет прочитать этот текст, и любые слепые посетители вашего сайта будут знать, что происходит. Это здорово. Итак, у нас есть несколько изображений. У нас есть стилизованный текст. У нас есть ссылки. Давайте продолжим двигаться вперед и добавим немного структуры на эту страницу.

6. Блочные элементы и семантический HTML: хорошо, мы добавляем контент на эту страницу.Выглядит отлично, но было бы хорошо разделить контент, чтобы нам было легче стилизовать, но также и для семантики. Мы уже упоминали семантику. Давайте подробнее рассмотрим, как можно улучшить семантику на своем веб-сайте. Если вы посмотрите на индийские веб-доки, это очень распространенная веб-документация, созданная в Mozilla. В них подробно рассказывается обо всех различных семантических тегах, которые вы можете использовать в Интернете, и о том, для чего они используются. Я не буду вдаваться во все это, но, как видите, их очень много.Они говорят о разделении контента на разделы, используя боковые и нижние колонтитулы и верхние колонтитулы. У них есть текстовое содержимое. У этого списка нет конца. Не стесняйтесь просматривать это. Взгляните на все различные веб-компоненты и все, что вы можете использовать на своем веб-сайте. Но давайте просто рассмотрим базовый макет веб-страницы, который вы можете увидеть в Интернете сегодня. Как правило, на веб-сайте страница имеет заголовок, и внутри него обычно есть панель мошенничества в верхнем колодце, есть семантические элементы, которые вы можете использовать, например, заголовок и ворс.Ниже обычно находится основной раздел веб-сайта, а внутри него обычно есть основная статья, такая как тексты или блок-пост. И, возможно, есть боковая панель, которая может быть в стороне, а затем под всем. Обычно есть нижний колонтитул. Все эти элементы представляют собой настоящие HTML-теги, которые вы можете использовать для разделения своего сайта и сделать его более семантическим. Итак, давайте взглянем на некоторые элементы, которые мы можем использовать для разделения нашей страницы, даже если это будет очень и очень простая страница. Мы не можем использовать их много, но есть пара, на которую мы можем взглянуть.Итак, вернемся к нашему коду, давайте начнем с того, что просто обернем все так, что называется блочным элементом. И способ, которым мы его создаем, — это использование DIV Tech. Тег DIV — это просто блок на странице. Это очень полезно для стилизации, перемещения объектов, размещения их в том месте, где вы хотите, чтобы они были на странице. Теперь, во многих редакторах кода, вы заметите, что появляются атрибуты класса, которые позже будут использоваться с нашим CSS вместо класса. Давайте изменим это на I d. Точно так же, и атрибуты I d снова используются в основном для CSS, иногда для JavaScript, который намного более продвинутый, чем нам нужно.Но по сути это способ идентифицировать определенный элемент на странице, и он всегда уникален. Таким образом, вы никогда не захотите, чтобы идеи были одинаковыми для разных элементов на странице. Они всегда должны быть уникальными. В данном случае это рэпер нашего сайта. На странице есть только один из них, так что давайте назовем его, что мне иногда нравится это делать, чтобы просто отслеживать, для чего используются эти элементы. Теперь давайте добавим весь наш контент в этот блок. И давайте посмотрим, что происходит, когда мы ничего не делаем, потому что тегу DIV не присущи стили.По большей части вы не заметите никакой разницы, добавив это, но это даст нам лучшую структуру, когда мы позже перейдем к стилизации. Вернемся к нашему коду, и теперь было бы здорово сообщить браузеру, что является нашим основным контентом. На чем мы должны сосредоточиться? Ну в общем и вся машина. Это наш основной элемент, так что давайте просто обернем его этим великим. Итак, теперь у нас есть главный элемент со всем нашим контентом, и он находится внутри сайта. Рэпер Если ты снова вернешься на свою страницу и обновишься.Тем не менее, снова ничего не произошло. Main — это что-то вроде блочного элемента. У него нет первоначального стиля, но он отлично подходит для структурирования. Давайте добавим еще один идентификатор к этому основному тегу. Назовем это картой. И знаешь, что? Давайте немного разделим наш контент. Создадим еще пару тегов DIV. Давайте создадим один для нашего изображения, а другой для текста. И на этот раз давайте используем атрибут class, чтобы назвать их. Мы назовем его изображением, блоком и текстовым блоком, если вы сохраните его и не увидите никаких изменений. Я знаю, что может показаться, что вы сейчас ничего не делаете, но я обещаю вам, что это пригодится в наших следующих шагах.На следующем уроке мы сделаем несколько забавных вещей. Мы перейдем к стилю CSS

7. Начало работы с CSS: Хорошо, так что, если вы до сих пор следили за этим, у нас есть отличный небольшой HTML-документ, но он немного скучный. Что ж, на этом следующем шаге все становится немного интереснее, потому что мы собираемся применить некоторые стили с помощью вещи под названием C.S S. А CSS означает каскадные таблицы стилей. Это форма разметки, которую браузеры используют для применения стилей к веб-сайтам, и в ней используется каскадный шаблон, что означает, что стили в верхней части листа будут переопределены конкурирующими стилями в нижней части листа.Давайте продолжим и рассмотрим некоторые из различных способов добавления CSS в ваш документ. Сейчас же. Один из способов сделать это — просто добавить стиль строки непосредственно к одному из ваших элементов, что, как правило, не рекомендуется современными стандартами. Но просто для демонстрации давайте просто добавим стиль к нашему элементу абзаца. Мы делаем это, набирая style equals, а затем в кавычках мы помещаем наши стили, поэтому я просто собираюсь начать с очень простого стиля.Это цвет. Давайте сохраним его и посмотрим, что он делает. Хорошо, как видите, это так просто. У нас есть красный текст в нашем абзаце. Довольно круто, правда? Что ж, это может привести к проблемам в будущем, когда, скажем, вы разрабатываете более крупный сайт и повсюду смешали эти стили строк в вашем коде. Как ты со всем этим справляешься? Что ж, вместо того, чтобы использовать стили линий, вы также можете поместить стили в своей голове. Давайте сделаем это очень быстро, и как вы это делаете. Просто набрав стиль, и вы видите, что он уже добавляет, в некоторых вещах здесь мы просто оставим это как есть.Теперь, наверху, вам нужно будет использовать так называемый селектор, чтобы определить, к каким элементам вы также хотите применить свои стили. Итак, давайте рассмотрим некоторые из основных селекторов, которые у нас есть селекторы элементов, и они просто соответствуют имени элемента, к которому вы применяете стили. Итак, я буду использовать элемент абзаца, так что он будет нацелен на наш абзац, верно? У нас также есть селекторы классов и способ их использования, поскольку мы просто используем символ точки или точку и в типе или имени класса. Итак, давайте нацелимся на текстовый блок.Мы нацелимся на класс учебников. И, наконец, добавим селектор ID. И мы делаем это с помощью хэш-тега или символа числа. Так будет целевая карта. Итак, здесь мы нацелены на идею карты. Не обращайте внимания на синтаксис здесь для каждого селектора. Нам всегда нужно включать открывающую и закрывающую фигурные скобки, и внутри этих скобок мы собираемся поместить все наши стили. Итак, давайте продолжим и добавим к ним несколько стилей для абзаца. Давайте просто снова изменим цвет вашего текста.Итак, давайте добавим что-нибудь другое для текстового блока. Может быть, был какой-то синий текст для всего текстового блока, так что это означает, что в абзаце будет прочитан текст. Любой другой текст должен стать синим. А для карты давайте сделаем что-нибудь другое. Может быть, цвет фона, и мы будем простыми и скажем серый. Теперь обратите внимание на этот синтаксис для добавления стилей. Все, что вам нужно сделать, это добавить свойство, свойство стиля, двоеточие и затем значение этого свойства. И вы знаете, что существует множество свойств стиля, которые охватят многие из них в этом уроке, но будет намного больше.Так что обязательно ознакомьтесь с этой документацией и просто поиграйте со всеми разными вещами, которые вы могли бы сделать с помощью своего CSS. Хорошо, мы применили наши стили. Посмотрим, как это выглядит. Идите и обновите. Итак, мы идем. Это все есть. Это было не так уж плохо, правда? У нас есть синий текст на сером фоне, а затем прочитанный абзац. Но этот метод добавления CSS все еще не совсем идеален. Я имею в виду, что, если у вас есть несколько страниц на вашем сайте, и все они используют одни и те же стили? Вот здесь и пригодятся внешние таблицы стилей, и это вообще лучшая практика по сегодняшним стандартам.Итак, позвольте мне показать вам, как это настроить. Мы собираемся создать новый файл и сохранить его как style dot CSS. Отлично. Вы просто копируете все стили, которые у нас уже есть, и мы можем избавиться от этих лишних вещей, и мы можем вставить все это в наш CSS с точками стилей. Теперь, прежде чем мы вернемся к нашей странице, мы также должны связать ее с нашим HTML-документом. Правильно? Таким образом, преимущество этой внешней таблицы стилей в том, что вы можете просто связать ее с каждым имеющимся у вас HTML-документом. Поэтому, если у вас несколько страниц, вы можете использовать одну и ту же таблицу стилей для каждой страницы.Таким образом, мы делаем это, используя тег ссылки, который вы нажимаете на вкладку, и вы, вероятно, увидите заполненную таблицу стилей. И на самом деле у вас нет мастер-файла CSS. Я думаю, это просто заполнитель для вашего фактического файла. Итак, что мы сделаем, мы добавим CSS с точками стиля и посмотрим, как это выглядит. Обновить. Отлично. Итак, как вы можете видеть, у нас все еще есть все наши стили. Это означает, что наша внешняя таблица стилей работает. Теперь давайте добавим несколько стилей, которые нам действительно нужны для этого проекта. Так что мы продолжим и просто избавимся от многих вещей здесь.Но сейчас мы сохраним селектор текстовых блоков для цвета текста, например, для абзацев и прочего. Мне нравится использовать не совсем черный цвет, вроде темно-серого, и вы можете получить такой конечный контроль и свои цвета. Если вы используете что-то, называемое шестнадцатеричным значением. И если вы не знакомы с шестнадцатеричными значениями или шестнадцатеричными цветами, я бы просто рекомендовал выполнить поиск в Google для выбора шестнадцатеричного цвета. И на самом деле, в результатах поиска Google появится палитра цветов, которую вы можете использовать, и вы сможете выбрать свой любимый цвет.У меня есть один предварительно выбранный здесь, чтобы сэкономить время, поэтому я вставлю его сюда. Вот как будет выглядеть ваше шестнадцатеричное значение. Итак, давайте продолжим, обновим и посмотрим, что у нас получится. Хорошо, это такое тонкое изменение. Вы не можете точно сказать, темно-серый это или черный, поэтому я хочу познакомить вас с отличным инструментом, который вы можете использовать в любом браузере. Это называется Inspector Tool или иногда называется консолью разработчика. Но в основном вы можете просто выбрать что-нибудь на своей странице, щелкнув правой кнопкой мыши и щелкнув «Проверить», и вы увидите всплывающее окно с этим инструментом, где вы сможете увидеть весь свой HTML.Вы можете навести на него курсор и увидеть, на что вы смотрите, и когда вы щелкаете здесь элемент. Вы можете увидеть все стили CSS, которые вы применили к этому элементу, и мы видим, что у нас есть наш цвет, и это на самом деле потому, что он унаследован от родителя, верно? Так происходит потому, что CSS передается потомкам каждого блока. Итак, если мы применим некоторые стили к нашему основному тегу или карточке, то он также будет передан его дочерним элементам. И я хочу показать вам еще одну вещь, которую вы можете сделать с помощью этого инструмента.Фактически вы можете предварительно просмотреть изменения в вашем CSS. Скажем, я хотел посмотреть, как это выглядит с красным текстом. Видите, изменения вносятся мгновенно. Вы также можете добавить новые стили. Скажем, я хотел добавить цвет фона. Итак, вы просто знаете, что на самом деле это не вносит изменений в ваши файлы. Это ничего не спасает. Если обновить страницу, она просто сбрасывается. Так что это просто предварительный просмотр. Хорошо, давайте добавим еще кое-что. Разорвал страницу, может, ах, цвет фона в нашем стиле точечный CSS. Давайте нацелимся на тело.Итак, мы будем использовать для этого селектор элементов, и это будет выбор нашего тега body. Итак, давайте добавим цвет фона. И у меня здесь предварительно выбраны другие шестнадцатеричные значения. Я вставлю это и посмотрим, как это выглядит. Итак, мы идем. Хорошо, в следующем уроке наш CSS работает с HTML. Я хочу показать вам, как вы можете немного лучше организовать свой веб-проект, а также, возможно, мы сможем добавить текстуру к фону нашей старой карты.

8. Фоновые изображения и относительные ссылки: прочь, верно? Итак, мы немного поговорили о цветах фона.Но, знаете ли, вы также можете добавить фоновые изображения. Поэтому я хочу порекомендовать для этого отличный сайт. Знаешь, я никогда не могу вспомнить девушку, потому что это немного сложно. Но если вы ищете в Google тонкие шаблоны, это первый результат. Так что это отличный ресурс, потому что у них есть отличный выбор тонких фонов для вашего сайта. Но вы можете предварительно просмотреть их и найти то, что ищете, например, бумагу, и вы можете найти всевозможные текстуры бумаги. Давайте поищем что-нибудь очень тонкое, что напоминает мне что-то вроде визитных карточек.Эээ, давай посмотрим здесь. Мне нравится эта бумага с рифлением. Да, неплохо выглядит. Итак, все, что мне нужно сделать, это загрузить его, вы загрузите ZIP-файл, откройте его, и мы будем использовать меньшую версию. Итак, мы скопируем это в наш проект. И здесь мы идем. У нас есть активы. Давайте продолжим и используем это в качестве фона. Итак, вернемся к нашему коду. И давайте посмотрим, я бы хотел, чтобы это относилось только к самой карте. Я собираюсь выбрать эту карту выбора. Я просто использую числовой знак для таргетинга, и я d.А идея карточная. Мы собираемся применить фоновое изображение, и девушка будет просто рифленой бумагой. Получил Ping, о чем нужно помнить. Для каждого стиля CSS, который вы пишете, вы всегда хотите включать точку с запятой в конце. Давайте сохраним это, и оно нам больше не понадобится, и мы обновим. Хорошо, вот наша выкройка. Это очень тонко, но оно есть. Вы можете это увидеть сейчас. Вы знаете, у нас здесь не так много файлов, но это может стать немного громоздким. Было бы неплохо иметь немного больше структуры в нашем проекте, потому что, когда мы добавляем больше ресурсов, мы говорим, что у нас есть более крупный веб-сайт, над которым мы работаем.Нам нужно сгруппировать вещи в разные папки, верно? Ну, конечно, мы могли бы просто создать несколько новых папок, может быть, одну для изображений. Там может быть 14 CSS, это красиво и организовано. Но что происходит сейчас? Носите все наши ссылки, все становится сломанным. Так почему он сломался? Ну, потому что мы говорим браузеру, что точка ping находится прямо в маршруте нашего проекта, но это уже не так. Теперь это изображения. То же самое и с нашим основным изображением, в профиле говорилось, что JPEG находится в маршруте нашего проекта, но это уже не так.Как нам это обойти? Что ж, мы должны указать путь, и то, что мы использовали в веб-разработке, обычно является относительным путем. Поэтому вместо того, чтобы вводить весь веб-сайт, а затем путь, нам не нужно этого делать. Если все они находятся на одном сервере, вы можете просто использовать путь, относящийся к файлу, с которым вы работаете. Итак, в этом случае файл находится в пути, и мы хотим получить доступ к изображению, которое находится в папке изображений. Итак, мы набираем изображения, косую черту, профиль J, выбираем. Давайте посмотрим, а изображения вернулись? А что насчет нашей таблицы стилей? Если бы мы сделали то же самое и обновили, мы ничего не увидим.Ну, во-первых, нам нужно изменить путь к самой таблице стилей. Итак, сейчас мы не получаем никаких стилей CSS. Давайте сделаем это сначала в нашем HTML, давайте изменим путь на стиль косой черты CSS, который CSS, потому что мы здесь. Мы хотим получить доступ к файлу внутри. CSS Refresh. Хорошо, есть стили, но у нас все еще нет фона. Это почему? Ну, потому что CSS style dot не входит в маршрут сайта. Он находится в каталоге CSS. Итак, что нам нужно сделать на самом деле, это выйти из этого каталога, а затем в каталог изображений, чтобы добраться до нашего пинга бумаги.Для этого есть синтаксис, состоящий из двух точек и косой черты. Это нам говорит. Хорошо, вернитесь на один каталог назад и затем войдите в каталог изображений. И вот где вы найдете изображение. Сохраним и освежим его. А, вот и мы. Он снова работает. Большой. В нашем следующем уроке давайте поговорим немного больше о поиске свойств и стилях. Некоторые из этих ссылок

9. Типография: до сих пор в этом проекте мы использовали шрифт по умолчанию для браузера, который обычно является шрифтом Serra.И он не идеален для каждого проекта, правда? Итак, давайте взглянем на то, что вы можете использовать, чтобы создать свой фонд. Мне нравится устанавливать базовый шрифт в свойстве body, чтобы этот шрифт унаследовали все его дочерние элементы. Я покажу вам, что я имею в виду под этим. Итак, воспользуемся свойством font. И сначала мы установим бейсбольный мяч на 16 пикселей. 16 пикселей — это в значительной степени веб-стандарты. Так что я предпочитаю придерживаться сейчас. Мы добавим размер шрифта 16 пикселей через косую черту, а затем высоту строки после этого, что мы и сделаем единым.И это просто говорит о том, что мы не хотим, чтобы каждая строка текста занимала больше места, чем на самом деле символы. Итак, вы знаете, что высота строки в один символ, не так ли? Хорошо, теперь мы будем делать это очень просто, и мы просто укажем, хорошо, мы хотим, чтобы фонд Ариэль, если он доступен. Если нет, то Сан-Зериф. Хорошо? И вы видите, что сразу все шрифты на странице поменялись. Как это произошло? Ну, это потому, что с CSS, если у вас есть стиль для родительского элемента, все его дочерние элементы также унаследуют эти стили.Итак, если вы изучите этот основной элемент, вы увидите, что те же стили шрифтов унаследованы от тела. Теперь давайте спустимся, чтобы назвать наши заголовки. А что, если нам нужны заголовки меньшего размера? Что ж, давайте посмотрим, чем он сейчас пользуется. Ну, он использует другую единицу измерения, называемую M. Единицы M — это, по сути, способ взять шрифт родительского элемента и умножить его на определенное число. Итак, в этом случае он говорит: «Хорошо, возьмите базовый шрифт в 16 пикселей, умножьте его на два». Итак, перейдем к нашему коду и обернем эти заголовки в блочный элемент.Мы дадим ему класс заголовка и переместим эти элементы внутрь, а затем обратно в наш CSS. Давайте перейдем к стилям нашего базового фонда. Мне нравится копировать их прямо из браузера, вставлять сюда, и теперь мы собираемся добавить наш новый шрифт. Итак, для заголовков, для заголовка три, и мы дадим ему размер шрифта 0,8 a. М. Давайте посмотрим на это. Хорошо, поэтому он немного меньше, но на самом деле Texas внутри элемента H one в элементе H two, к которым применяются свои собственные размеры шрифта, это часто может сбивать с толку людей.Я имею в виду, что, если бы у текстового блока был собственный, мм, размер шрифта в три метра, и тогда, черт возьми, как вы все это вычислите? Верно, так что это может стать немного сложнее. Но есть другая единица измерения, которая может решить эту проблему за вас. И это царство. Если вы просто добавите r впереди, все вернется в норму, верно? Так хорошо, почти так сказал Брэм. Хорошо, я не забочусь о родителях. Я просто хочу быть относительно базового сражения, поэтому он будет смотреть на размер шрифта элемента body. Так что это действительно означает 0.8 раз 16. Давайте продолжим и изменим наш код, чтобы использовать обод. Обновите страницу, и все по-прежнему в порядке. А что насчет этих ссылок? Они другого цвета, чем все остальное. Что ж, ссылки изменены немного по-другому. Они интерактивны, поэтому у них есть еще несколько свойств, с которыми вы можете работать. Итак, давайте проверим это. Если вы проверите одну из своих ссылок, вы увидите в инспекторе, что у нас есть это маленькое двоеточие H o b. Если вы нажмете на это, у вас будет множество различных состояний элементов, с которыми вы можете работать.Это означает, что вы наводите указатель мыши на ссылку или говорите, что одна из них активна, или говорите, что вы переходите к одной из них. Вы видите, как там все по-другому, в то время как каждое из них — это отдельное состояние, в котором может находиться этот элемент. Итак, давайте добавим несколько состояний наведения на ее пальто. И прежде всего, давайте укажем конкретный цвет для наших ссылок. Я сам выбрал цвет, поэтому мы поместим его в их цвет. Хорошо, давайте обновим. Ладно, так немного лучше. Теперь вернемся и снова добавим состояние зависания.Цвет у меня немного другой. Мы витаем довольно свежо, а теперь он парит. Большой. Теперь вы можете подумать, я не хочу подчеркивания, поэтому, если вы не хотите подчеркивания под вашими ссылками, вы можете удалить его, сказав украшение текста. Нет, давайте добавим этот стиль и в наш код. Хорошо, привязка тега. Сохрани это. Обновить. Итак, мы идем. В следующем видео я покажу вам пару библиотек, в которые мне очень нравится добавлять красивые значки, а также еще больше украсить забаву с помощью шрифтов Google.10. Библиотеки: хотя воздушный фонд — это хорошо, было бы неплохо указать свое собственное развлечение, особенно если вы хотите, чтобы это выглядело немного более профессионально. Что ж, есть несколько бесплатных библиотек, и одна из них — шрифты Google. Давайте посмотрим на это. Итак, если вы перейдете к fonts dot google dot com, вы увидите все их различные шрифты, которые вы можете использовать на своем веб-сайте. Я призываю вас просмотреть и найти свои фавориты. У меня есть одна, которая мне нравится, так что я наберу p. Т. стоит. Итак, мы идем.И мы добавим это к нашему выбору. Как только вы закончите выбирать все, что хотите на своем веб-сайте, откройте это. Как видите, у них есть для вас довольно хорошие подробные инструкции. У них есть тег ссылки, как мы добавили нашу таблицу стилей. Давайте скопируем это и вставим в наш HTML. Теперь мы хотим убедиться, что мы добавили поверх наших таблиц стилей, чтобы мы могли использовать его в наших стилях CSS, потому что произойдет то, что браузер будет читать этот документ сверху вниз.Итак, какие бы ресурсы ни использовались в этом документе CSS, вы должны убедиться, что они перекрывают друг друга. Итак, у нас есть свой стиль. Если мы сохраним и обновим, мы ничего не увидим. Это потому, что сейчас он все еще использует воздушный фонд. Итак, если вы вернетесь к шрифтам Google, вы увидите, что они показывают вам семейство шрифтов, которое вы должны использовать. Итак, мы скопируем PT Sands и перейдем к нашей таблице стилей. И что мы можем сделать, так это добавить его прямо перед антенной. Итак, это говорит о том, что мы предпочитаем PT Sands.Но если это недоступно, используйте антенну. Но если он недоступен, тогда ладно, просто используйте любой песок, с которым боролась Сара. Итак, если мы скажем это и обновимся, мы увидим RPT Sands. Большой. Так что еще мы можем дио? Что ж, было бы неплохо заменить эти текстовые ссылки маленькими иконками. Может быть, значок для джина-туб-локомотива, может быть, логотип по ссылке и логотип Twitter. Правильно. Что ж, есть бесплатная библиотека, четыре фонда иконок под названием font. Потрясающий. И вот оно. Итак, позвольте мне показать вам, как использовать это на вашем веб-сайте.У них довольно простые инструкции. Просто нажмите, начните пользоваться бесплатно. И все, что вам нужно сделать, это то же самое, что вы сделали с нашей библиотекой шрифтов Google. И у них на самом деле есть эта удобная небольшая ссылка для копирования здесь. Так что я воспользуюсь этим. То же самое, прежде чем мы вставим это прямо туда. Все должно быть в порядке. Сохрани это. А теперь посмотрим, как его можно использовать. Так что, если вы ищете значок, который вам нужен в моем случае, я смотрю, забуду Hub. Итак, мы идем. Так что у них есть несколько разных вариантов. Думаю, я выберу первый раунд.Я щелкну по нему, и он покажет вам HTML-код, который вы можете использовать для этого значка. Так что я собираюсь скопировать это. Вернитесь к моему проекту, я вставлю его сюда вместо get hub и посмотрим, как это выглядит. Ну вот и мы. У нас есть небольшой логотип Get Hub. Это круто. Так что давайте сделаем то же самое для остальных. Отлично? И посмотрим, как это выглядит. Хорошо, это действительно происходит, Итак, у нас есть наши значки. У нас есть собственный шрифт Google. Итак, в следующем уроке я расскажу о том, как вы можете позиционировать любой элемент на своей странице как старый.11. Элементы позиционирования: морж, верно? Итак, вы можете подумать: «Какого черта мы собираемся переместить все эти элементы в нужное положение, и давайте начнем с малого». Начнем с этих иконок. У них теперь есть несколько странных маленьких маркеров, и они действительно не работают с иконками. Давайте исправим все это. Итак, если мы проверим, давайте посмотрим на разницу между типами отображения. Если мы посмотрим на союзника, это пункт списка. Вы можете видеть, что на дисплее отображается список. Товар имеет смысл, правда? А что насчет некоторых других элементов? Как абзац, в котором говорится о блоке отображения? А как насчет провала? Блок-то же самое.Таким образом, каждый элемент имеет свой собственный стиль, и вы этого хотите. Если вы хотите увидеть свой выбор, вы можете сказать display, а затем посмотреть, что он рекомендует. Есть много разных типов. Мы не будем вдаваться во все из них, но сейчас нам больше всего поможет отображение в строчном блоке. Вернемся к нашему коду и посмотрим. Так что посмотрим. У нас внутри есть куча союзников, а у вас? Что ж, вместо того, чтобы добавлять стиль к каждому элементу-союзнику, давайте добавим имя класса в дополнение к нашему родителю.Вы будете. Назовем его без стиля, потому что мы собираемся удалить стиль по умолчанию из нашего списка и сделать его своим. Теперь для нашего класса без стиля мы скажем ОК для элемента без стиля. Мы хотим, чтобы каждый союзный элемент в нем отображался в линейных блокируемых элементах, которые находятся в строке, заблокированной. Этот тип воспроизведения будет переноситься как текст, но оставаться в пределах одного блока. Давайте сохраним его и посмотрим, что он делает с нашим проектом. Обновить. А, вот и мы. У нас все горизонтально, но здесь еще много места.Ну что здесь происходит? Применяются ли еще какие-то стили по умолчанию к элементу U L? И мы выбрали союзника только для того, чтобы отменить некоторые из этих стилей. Вернемся к нашему коду и исправим это, чтобы настроить таргетинг на U L. Нам просто нужно настроить таргетинг на класс без стиля. Давайте продолжим и удалим стиль по умолчанию, сказав стиль списка none, который избавляет от маркеров, если они все еще там, и мы также скажем, что отступ слева от нуля. Теперь вам может быть интересно, что такое Пэтти? Что ж, сначала давайте обновим, и вы увидите, что он избавляется от этого места слева.Теперь давайте проверим, что такое отступы в вашем инспекторе. Вы увидите красивую маленькую диаграмму того, что это такое. Это называется коробчатой моделью. Блочная модель относится ко всем различным размерам, относящимся к заполнению границ поля и их соотношению друг с другом в элементе. Часто бывает трудно полностью понять, как работает блочная модель, пока вы действительно не возьмете в руки какой-то код и не поиграетесь с ним. Поэтому я призываю вас делать то, что я делаю сейчас. Посмотрите, как вещи взаимодействуют, и взгляните на эту изящную маленькую диаграмму, чтобы увидеть, как она работает.Хорошо, так же, как мы расположили эти значки по горизонтали, ну, мы могли бы сделать то же самое с нашим изображением и нашим текстом, верно? Итак, давайте продолжим и сделаем это в нашем коде. Так как мы будем это делать? Посмотрим на это. У нас есть блок изображения и учебник, поэтому мы можем просто добавить отображение строчного блока к каждому из этих блоков. Давайте попробуем это, поэтому мы добавляем отображение строчного блока как к блоку изображения, так и к блоку текста. Давайте сохраним и посмотрим, как это выглядит. Отлично. Что ж, хорошее начало.Это немного странно выглядит. Для начала, я думаю, что текст должен быть выровнен по верхнему краю изображения, верно? Итак, давайте посмотрим, как мы можем сделать это в нашем коде. Давайте также добавим верхнюю вертикальную линию и обновим ее. Итак, мы идем. Теперь это немного лучше. Я бы хотел немного промежутка между этими двумя элементами. Как мы только что узнали, это можно сделать с помощью отступов или полей. Поскольку нам действительно нужен интервал только справа от изображения, я собираюсь добавить правое поле к нашему изображению. Итак, здесь, в грустном стиле для нашего блока изображения, и мы скажем, margin, right, Oops, и мы просто дадим ему пространство в один метр.Сохраните это и давайте проверим. Хорошо, так это выглядит немного лучше. Что еще можно добавить? Что ж, давайте сделаем отступы вокруг всей карты, на самом деле. Итак, мы перейдем к селектору карт и добавим отступы, которые добавят отступы вокруг всей карты, как мы видели раньше, поэтому похлопайте и снова скажите им: Сохранить и обновить. Хорошо, это выглядит немного лучше. Хорошо, это очень общий обзор того, как работает блочная модель и как вы можете размещать и размещать элементы на странице.Там есть чему поучиться, но это касается основ. В нашем следующем видео мы поговорим о калибровке.

12. Изменение размера элементов: Ну, это действительно происходит здесь, но это изображение слишком велико. Давайте поговорим о некоторых различных способах изменения размера элементов. Теперь это очень простой способ применить изменение размера к изображениям. Просто использовать их атрибуты with и height. Итак, в моем теге изображения я мог бы просто добавить атрибут ширины, равный, скажем, 1 50, и браузер интерпретирует это как 150 пикселей и отлично смотрит на это.Он также применил для нас высоту, чтобы сохранить правильное соотношение сторон. Мои изображения квадратные, поэтому ширина и высота должны быть одинаковыми. Как вы думаете, что произойдет, если я использую в сценарии высоту, отличную от моей? Давай проверим. Скажем, вместо этого 100 пикселей. О, меня раздавили, так что имейте это в виду. Обычно вы не хотите добавлять к изображениям одновременно и высоту, но вместо этого вы должны просто позволить браузеру сохранить для вас соотношение сторон. Это отличный способ добавить высоту.Но в современной веб-разработке это обычно делается в CSS. Итак, давайте посмотрим, как вы можете сделать то же самое с помощью CSS. Во-первых, мы собираемся удалить эти дополнительные атрибуты и перейдем к нашему CSS, чтобы мы могли просто настроить таргетинг на любое изображение в классе блока изображения. Ширина или высота заголовка довольно проста. В CSS вы можете просто использовать свойство width и присвоить ему значение в пикселях, процентное соотношение или M. Какими бы ни были ваши предпочтения, я буду придерживаться пикселей здесь, а давайте просто оставим 150.Посмотрим, что это нам даст. Большой. Теперь эти свойства ширины и высоты также могут применяться к другим элементам на вашей странице, поэтому мы также можем использовать их для ограничения ширины нашей карточки. Так что здесь это не распространяется на всю страницу. Итак, давайте добавим сюда наш элемент карты. А пока давайте просто попробуем с разрешением 600 пикселей и посмотрим, как это выглядит. Вернемся и обновимся. Отлично, теперь вы можете видеть, что ширина самой карты ограничена 600 пикселями. Он не распространяется на все окно. Теперь мне лично кажется, что это слишком широко.Справа здесь много лишнего места. Это немного странно. Давайте немного сократим это, и это может отличаться от вашего имени. Если у вас есть более длинное или более короткое имя, просто прочувствуйте это и посмотрите, что вам нравится. Ах, допустим, пять на 10 пикселей теперь выглядят немного лучше. Следует помнить об адаптивном дизайне. Например, что произойдет, если мы будем смотреть это на маленьком экране, как на мобильном устройстве в нашем инспекторе? Мы можем предварительно просмотреть это, используя этот удобный инструмент для переключения устройств.К сожалению, сейчас наш дизайн не очень отзывчивый. Поскольку мы используем фиксированные значения пикселей, браузер в основном просто сжимает вещи, пытаясь уместить все в устройстве. Вот что мы можем сделать, чтобы обойти это. В дополнение к нашему значению with мы также можем добавить максимальное значение with и установить его на 100%, чтобы браузер никогда не масштабировал эту карту за пределы 100% экрана. Таким образом, на даже небольших устройствах, таких как iPhone 5, текст будет просто переноситься вниз и никогда не будет горизонтальной прокрутки.Хорошо. Прежде чем мы забудем, давайте скопируем эти стили и поместим их в наш код. Итак, мы собираемся заменить этот оригинал на. Итак, мы идем. Давайте просто убедимся, что все по-прежнему работает. Выглядит отлично. Однако есть еще один нюанс. К сожалению, не все браузеры одинаковы. Давайте посмотрим на эту же страницу в Firefox. Откройте инспектора. Так что теперь все в порядке. Но затем посмотрите, когда я прокручиваю вправо. Нам не нужна эта горизонтальная прокрутка, поэтому похоже, что в Firefox max с не совсем работает.Проблема здесь в сложности с нашей коробочной моделью. Прямо сейчас браузер применяет наш максимум к содержимому нашего поля. Но отступы добавляют немного больше, чем размер нашей страницы. И мы можем обойти это, добавив еще одно свойство, называемое размером окна, и добавив значение поля границы. Это указывает браузеру применить with до границы нашей блочной модели, а не ограничивать ее областью содержимого. Я знаю, что это немного продвинутая концепция, поэтому не думаю, что вы должны полностью понимать, что здесь происходит, но я просто хотел убедиться, что эта совместимость исправлена в вашем дизайне.Так что не забудьте добавить это туда. Давайте продолжим и скопируем это дополнительное свойство в наш код. И давайте сначала взглянем на Firefox. Отлично? Большой. А что с хромом? Отлично. Выглядит хорошо. Хорошо, теперь это красиво и отзывчиво. Итак, в следующем видео я расскажу вам о некоторых способах выравнивания этих элементов на вашей странице.

13. Расстановки: так далее. Было бы здорово, если бы мы могли разместить всю эту карточку в центре страницы. Что ж, есть несколько способов позиционирования элементов с помощью CSS, и давайте рассмотрим различные способы, которыми мы можем это сделать.То, как вы позиционируете элементы, действительно зависит от типа отображения. Например, в случае элемента абзаца вы можете добавить центр выравнивания текста стиля, который центрирует его внутри абзаца. В этом случае абзац не очень широкий, но мы оставим его выровненным по левому краю, что является значением по умолчанию в случае элементов блокировки строк, таких как элементы нашего списка. Что ж, их можно выровнять с помощью того же метода выравнивания текста, чтобы вы могли добавить центр с выравниванием текста, и он центрировал бы все это в элементах строкового блока.Но мы не собираемся этого делать. Что мы хотим выровнять, так это нашу общую карту, которая, как вы можете видеть, является блочным элементом. Блочные элементы немного сложнее центрировать. Что мы можем сделать, так это использовать поле, чтобы обеспечить равные интервалы как с левой, так и с правой стороны блока. Таким образом, вы можете сделать это, добавив маржу auto, это говорит браузеру, хорошо, автоматически определяет максимальную маржу как для левой, так и для правой стороны этого элемента и просто выравнивает их. И это дает нам выравнивание по центру.Теперь, кроме того, мы могли бы добавить к этому полю, потому что нам нужен небольшой интервал от верхней части страницы. Правильно? Ну как нам это сделать? Мы могли бы добавить верхний край и присвоить ему один M. И вот так. Или мы могли бы это сделать. Итак, как, черт возьми, это работало? Что ж, давайте посмотрим на схему здесь. В этом случае он применяет один M или 16 пикселей к верху и низу, а затем автоматически вычисляются левый и правый. Причина этого в том, что на самом деле это сокращенное свойство.Если я щелкну здесь эту стрелку, вы увидите, что она фактически определяет все эти отдельные свойства. Итак, маржа — это сокращение от маржи. Верхнее поле, правое поле, нижняя вода и левое. И это в таком порядке. Допустим, вы хотели Ах, верхняя граница в один метр. И вы хотели иметь маржу справа от них. А ты хотел, чтобы дно было три метра, а оставалось для него. Я не знаю, зачем вам это нужно, но, чтобы проиллюстрировать, вы можете видеть, что это применимо к каждому из них в указанном порядке. Так что мы оставим это.Давай оставим это как M auto. Это дает нам немного места вверху плюс выравнивание по центру. Хорошо, давайте продолжим и применим эти стили к нашему коду, прежде чем мы забудем. Мы собираемся применить эту зубастую карту здесь, исправить наши интервалы, сохранить и обновить. Хорошо, поехали. Выглядит неплохо. Теперь есть еще один способ. Вы можете выровнять элементы, которые я хотел бы кратко осветить. Мы не будем использовать его в этом проекте, но предположим, что вы хотели переместить это изображение вправо. Что ж, вы можете легко сделать это, используя свойство float по умолчанию.Нет поплавка. Но если вы плыли правильно, что ж, посмотрите на это. Он перемещает изображение в крайнюю правую сторону, прежде чем оно коснется обивки автомобиля. Правильно. Так что вы также можете использовать это в свое распоряжение. Многие люди будут оставлять вещи на плаву. Ах, чтобы сделать сайты более отзывчивыми. Мы не собираемся использовать эту технику в этом проекте, но просто знайте, что она также в вашем распоряжении Old.

14. Продвинутый CSS: верно, так что это действительно идет. Я хотел бы добавить еще пару твитов, которые немного более продвинуты, но я думаю, что мы готовы с ними взяться.Итак, во-первых, было бы неплохо, если бы мы могли просто щелкнуть по этой ссылке, и она открыла бы наш почтовый клиент. Правильно? Так что давайте перейдем к нашему веку, чтобы писать по почте, и мы просто добавим ссылку на это. Как вы помните, ссылки теперь являются тегом привязки для ссылки H. Мы собираемся добавить специальную девушку, которая в основном говорит браузеру открыть почтовый клиент на компьютере человека, чтобы в письме было слишком много двоеточия. А затем вы добавите любой адрес электронной почты, на который хотите отправить электронное письмо. Вернемся в наш браузер, обновим, и вы увидите, что это ссылка.Давайте продолжим и нажмем на нее, и она открылась в моем другом окне. Но я могу показать вам здесь. Вот оно. Так что это открыло мой почтовый ящик. У меня сейчас на компьютере нет мужской настройки. Я не буду этого делать прямо сейчас. Что еще мы можем добавить? Ну так же, как у нас по центру по горизонтали находятся карты. Было бы неплохо, если бы он тоже был по центру вертикально, чтобы он находился прямо посередине страницы. Хотите верьте, хотите нет, это немного продвинуто, но я покажу вам, как это сделать. Таким образом, почти в каждом браузере доступно довольно новое свойство.На данный момент это называется Flex Box, и на Indian есть много подробностей о том, как работает Flex Box. Это может быть немного сложно, но я просто покажу вам в основном, как использовать его для вертикального выравнивания элементов. Потому что на самом деле это один из лучших способов сделать это в современных браузерах. Так что давайте избавимся от этого и вернемся к нашему коду. Таким образом, Flex box работает так, что вам нужен общий оборачивающий элемент, а затем вы можете размещать элементы внутри него. Итак, мы будем использовать тезис ICT-рэпера в качестве нашего общего родительского элемента.И давайте посмотрим, давайте продолжим и добавим вышеупомянутую карту, и первый шаг — просто сделать ее отображение гибким. Теперь, чтобы центрировать страницу по вертикали, нам нужно убедиться, что этот элемент занимает всю страницу. Правильно? Итак, мы добавим высоту 100%. Таким образом, он займет всю страницу, и мы скажем, что направление гибкости должно быть столбцом, потому что мы хотим центрировать по вертикали, а контент должен быть по центру. И позиция также должна быть в центре. Ну и что? Это спасло.Посмотрим, что у нас есть на данный момент. Обновить. И ничего не произошло. Это почему? Давайте взглянем. Отлично? Так сложная проблема в том, что да, мы занимаем 100% нашего тела, но ее тело — это не 100% ее окна. Это почему? Ну, и сам HTML-документ тоже. Итак, как мы можем гарантировать, что все окно занято нашим HTML-документом? Я предпочитаю добавлять стили в сам документ. Так что я могу добавить высоту 100%. Это гарантирует, что документ HTML займет всю страницу, и я могу сделать то же самое для тела.И вот так. Давайте продолжим и применим эти стили к нашему коду. Я собираюсь поместить это в самый верхний HTML-код и высоту тела. 100%. Хорошо, все работает как положено. Потрясающий. Давайте посмотрим еще пару вещей, которые мне бы очень хотелось, чтобы эти углы были немного в стороне. И так это больше похоже на карту. Что ж, давай попробуем. Это можно сделать, добавив так называемый радиус границы, и это довольно просто. Итак, наряду с границей есть граница, радиус и ослабление. Просто примените стандарт: пиксель или M, что вам больше нравится.Я просто дам ему радиус, скажем, пять пикселей. Выглядит неплохо. Но, знаете, на самом деле, я чувствую, что нам, возможно, стоит их использовать, поэтому мы пройдем 0,8 м. Ах да, это мило. Таким образом, это относительно остальной части страницы. Итак, давайте сохраним это в нашем коде, найдем нашу карточку и в нашем радиусе границы и обновим. Большой. Хорошо, одна последняя настройка. Было бы здорово, если бы мы могли просто добавить туда тонкую тень, чтобы она действительно выделялась из остальной части страницы. Посмотрим, как ты сможешь это сделать.Что мне нравится делать, так это использовать генератор прямоугольных теней, потому что есть много возможностей для создания прямоугольных теней. Я не хочу рассчитывать это самостоятельно. Итак, генератор теней коробки и их масса онлайн. Выберите свой фаворит. Я просто собираюсь щелкнуть по первой 1, которую я вижу. И управление годится довольно интуитивно. Я бы сказал, что это довольно хорошее зрелище. А, посмотрим. Давайте сделаем это немного более тонким. Хорошо, давай попробуем. Все, что вам нужно сделать, это скопировать все это и вставить на свою карточку. Вернемся к нашему браузеру, и он нам больше не нужен.Давайте обновим. Ладно, это круто. Итак, теперь, когда у нас есть дизайн, я думаю, пришло время выложить его в Интернет, чтобы продемонстрировать его. Правильно? Итак, в следующем видео я покажу вам, как это сделать бесплатно.

15. Опубликуйте свой код: морж. Правильно. Итак, у нас есть готовый продукт. Это наша файловая структура, как вы знаете, мы должны разместить все эти файлы в Интернете, чтобы к ним мог получить доступ любой человек в мире. Как мы это делаем? Что ж, есть множество вариантов. Вы можете купить хостинг у.Вы знаете, разные хозяева там. Я уверен, что вы видели их рекламу. Ах, давай, папа, Хозяин Аллигатор. Ах, их много, и с ними вам довольно легко сделать это. Или вы можете сделать это проще и перейти на концентратор. Как вы знаете, я люблю получать помощь, потому что она у меня на карточке. Хорошо, пойдем вставать и хорошо. У меня уже есть аккаунт. Я здесь очень активен. Вы не увидите всего этого, но вы хотите создать новый репозиторий. После регистрации забудьте о хабе. Вы можете создать репозиторий, который по сути является просто местом для размещения всех ваших файлов.Теперь это не обязательно должно быть публичным, если вы этого не хотите. Но если вы хотите быть в сети, вам, вероятно, следует сделать это общедоступным. Также здорово иметь учетную запись на сайте Get Hub. Если вы пытаетесь попасть в сообщество веб-разработчиков. Ах, это отличное место, чтобы продемонстрировать, что вы умеете писать, насколько вы активны. Ах, и просто пообщаться с другими разработчиками, потому что есть много проектов с открытым исходным кодом, к которым вы можете получить доступ и просто внести свой вклад. В любом случае, мы должны придумать имя репозитория.Это также будет как бы привязано к U R 1 ваших визитных карточек. Так что имейте это в виду, когда придумываете свое имя. Я просто собираюсь сделать это простым. Так что в названии учебника по карточке, и вам не нужно предоставлять описание. Я просто пропущу это сейчас. Мы собираемся сделать его общедоступным, и вы хотите инициализировать его, прочитав меня просто для удовольствия. Эти Хорошо, так что давайте создадим репозиторий. И вот это ваш шанс добавить все свои файлы. Так что просто перейдите сюда, чтобы загрузить файлы, и отсюда вы можете буквально просто перетащить все свои файлы в окно.Итак, выберите все, что у нас есть в нашем учебном каталоге ah, и поместите его в свой репозиторий. Он будет загружать все вместе с каталогами и всем остальным. И это ваш шанс сказать: хорошо, что вы только что сделали? Ну, это идет с текстом по умолчанию, и мне это нравится. Так что я просто собираюсь зафиксировать изменения таким образом. Итак, это фиксация изменений. Это может занять некоторое время. Когда он будет запущен, мы перейдем к настройкам. Здесь вы можете запустить свой веб-сайт. Итак, прокрутите вниз, чтобы перейти к страницам хаба, мы хотим выбрать источник.Это должна быть главная ветка. Сохрани это. И если вы прокрутите назад, вы увидите, что теперь включены страницы справки, и вы можете изменить домен. Но меня это устраивает. Итак, если вы нажмете на свой домен, вот он. Теперь ваш код активен, и вы можете поделиться этим евро с кем угодно.

16. Подведение итогов: Поздравления. Вы сделали свои первые шаги к изучению HTML и CSS, и у вас есть классная веб-страница, подтверждающая это. Теперь не волнуйтесь, если что-то из этого немного сложно сохранить, это большой объем информации.Просто помните, что у вас есть код, который мы только что написали для справки. У вас также есть индийская документация, так что не стесняйтесь ее просматривать, если вам понадобятся советы. Кроме того, вам не нужно останавливаться на достигнутом. Вы можете продвинуться в этом проекте на пару шагов дальше. Если вы готовы к некоторым бонусным испытаниям, я бы порекомендовал вам пару вещей, о которых вы могли бы подумать, а именно добавить фоновое изображение на веб-страницу. Вы можете поиграть с радиусом границы и сделать его более похожим на стиль Кирби или круговой стиль.Вы также можете расширить эту карту и превратить ее в миниатюрную биографию. Вы могли бы рассказать о некоторых своих навыках. Если вы довольны своим дизайном, я рекомендую вам поделиться им в галерее проектов. Я также с нетерпением жду возможности увидеть некоторые из готовых продуктов. Эй, если вам нравится этот курс, пожалуйста, подпишитесь на меня здесь, чтобы поделиться навыками. Кроме того, вы можете подписаться на меня в Твиттере, и я хотел бы получить ваши отзывы в обзоре. В любом случае, спасибо за настройку и хорошее старое покрытие.

50+ красивых и бесплатных карточек HTML / CSS

Вы ищете фрагменты CSS, чтобы украсить дизайн карточки профиля вашего веб-сайта? В сегодняшнем посте мы собираемся показать огромную коллекцию CSS-карточек, чтобы изменить поле автора / профиля, подпись на веб-сайте и электронной почте, поле с призывом к действию, сообщение и многое другое.

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

См. Также: 40+ бесплатных шаблонов форм входа

Карточка материала

с анимированным избранным изображением от Knol Aust

СКАЧАТЬ

Карточка профиля

Materialup от neel

СКАЧАТЬ

Потрясающая карточка профиля в социальных сетях

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

СКАЧАТЬ

Карточка профиля

90, автор — Ондржей Барта

СКАЧАТЬ

Статья Новостная открытка Энди Тран

СКАЧАТЬ

Флип-карта с реалистичным 3D-изображением

от Nicola Mihaita

СКАЧАТЬ

Modern Bootstrap 4 карты

Modern Bootstrap 4 Cards — это современные адаптивные карты, созданные на основе Bootstrap 4 Framework. Он создал 8 различных стилей, включенных в сетку начальной загрузки.

СКАЧАТЬ

Подвижная онлайн-визитка от Petrus Rex

СКАЧАТЬ

Флип-карты, вдохновленные Google Now от Ettrics

СКАЧАТЬ

SolidCards

SolidCards CSS3 — это адаптивные карточки с характерным и привлекательным дизайном карточек профиля.

СКАЧАТЬ

Слайдер информационных карт

, автор Энди Тран

СКАЧАТЬ

React Flipping Card от Алекса Деверо

СКАЧАТЬ

Карточка рецептов

Кевина Лешта

СКАЧАТЬ

Цифровая визитка

Уилла Джонсона

СКАЧАТЬ

Bulma + Vuejs Flip Card от Джульфикара Ади Путра

СКАЧАТЬ

CSS3 Визитная карточка Марка Мюррея

СКАЧАТЬ

Визитная карточка

CSS от Кейт Пикеринг

СКАЧАТЬ

Анимация карты доставки Николая Таланова

СКАЧАТЬ

Эффекты при наведении курсора на сложенные карты

Кайл Брамм

СКАЧАТЬ

Открытки для блога от Chyno Deluxe

СКАЧАТЬ

Визитная карточка от Lubos

СКАЧАТЬ

Карточка с фильмом

Андре Мадаранга

СКАЧАТЬ

Пользовательский интерфейс карточки статьи Подробнее Анимация CSS от Валентина

СКАЧАТЬ

Пользовательский виджет Live Material Design от Маттиа Асторино

СКАЧАТЬ

Дизайн карты рецептов Трэвиса Уильямсона

СКАЧАТЬ

Сетка для карт Flexbox

от Крейга Энтони

СКАЧАТЬ

Карты Clash Of Clans от Андре Мадаранга

СКАЧАТЬ

Электронный магазин Фабио Оттавиани

СКАЧАТЬ

Перелистывающая карта Сергея Никишкина

СКАЧАТЬ

Пользовательский интерфейс профиля HTML и CSS от Дженаро Колуссо

СКАЧАТЬ

CSS Новостные открытки Александра Чугуровича

СКАЧАТЬ

Карточка профиля

от Матиаса

СКАЧАТЬ

Анимация карточки комментариев от Shaw

СКАЧАТЬ

Карточка с фильмом

Daily UI от Джорджа Миронидиса

СКАЧАТЬ

Parallax Depth Cards от Энди Мерскина

СКАЧАТЬ

Расширяемая сетка карт с помощью Flexbox от Наиля Ахмад

СКАЧАТЬ

Карточка продукта

, Джонатан Обино

СКАЧАТЬ

Карточка с 3D-перспективой XY, Карлос Санчес Рибалло

СКАЧАТЬ

Адаптивные карты компании от Фама Микуна

СКАЧАТЬ

Материальный дизайн: карточка профиля Эмиля Деванти Брокдорфа

СКАЧАТЬ

3D Flip Business Card от Елены Назаровой

СКАЧАТЬ

Запись в блоге, автор: Nodws

СКАЧАТЬ

Интерактивный интерфейс карточки фильма с рейтингом анимации на чистом CSS3, Риз Макдональд

СКАЧАТЬ

Карточка продукта для дизайна пользовательского интерфейса

от CodeFrog

СКАЧАТЬ

Дизайн пользовательского интерфейса карты рецептов Риккардо Тарталья

СКАЧАТЬ

Карта профиля пользователя

от XiChen

СКАЧАТЬ

Стопка карточек Лэйна Олсона

СКАЧАТЬ

Card Hover от Хорхе Санеса

СКАЧАТЬ

Перевернутая карточка продукта, Джонни Гил

СКАЧАТЬ

Макет сетки

MultiHeight от Cliff Pyles

СКАЧАТЬ

25 HTML-шаблонов для творческих визиток / визиток

Vcard / Business card веб-сайты являются одностраничным инструментом для адвокатов, инженеров-строителей, дизайнеров и для каждые предприятий .Это помогает продемонстрировать личную / коммерческую информацию, портфолио, контактные данные и т. Д.

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

После небольшого обзора в Интернете, ниже мы опубликовали 25 HTML-шаблонов Creative vCard / Business . Преодолев эту разную коллекцию , вы найдете идеальный способ продвигать себя в Интернете .

1. Каро

Детали

2. Шаблон визитной карточки

Детали

3. Престиж

Детали

4.Sharp

Детали

5. Моя визитная карточка

Детали

6. Vicardo

Детали

7. Circlus

Детали

8. Премиум vCard

Детали

9. Серый и черный

Детали

10. Супер гладкий

Детали

11.Простая визитная карточка

Детали

12. Элегантный n Ultimate

Детали

13. vBook vCard

Детали

14. Zwin

Детали