11.1 Создание раздела «О компании «. Разметка блока в index.html.Создание сайта из PSD (1).

Автор German Usachev
11.1 Создание раздела «О компании «. Разметка блока в index.html.Создание сайта из PSD (1).

предыдущем уроке.

Мы закончили создавать блог со смартфонами с товарами на останется уже выглядит вот так вот и дальше у нас после этого блока ниже идет блог компании Asus 10 идет описание и соответственно карта карта. Гугла У нас будет и соответственно здесь будет где-то четыре блока и если их нарисовать то — это будет где-то выглядеть вот таким образом будет один большой общий блок дальше будет внутри этого зелёного блока два блока будет которые по левому краю слова тёмного влево и другое блок мы вас будем дальше мы вернем ещё нашу карту для того выровняйте сделать адаптивный ещё в один блок и в свою очередь если брать левый блок заглавия мы возьмём какой-нибудь hh1. А — это у нас ниже будет стоять на.

Песчаной через п.

Вот такая у нас конструкция переходим документ Index HTML и сразу вот после блока где она закрывали смартфоны товары. Давайте обратно же комментарии напишите о компании Asus и соответственно этот сразу же. Давайте закроем здесь у нас будет соответствующий код также vcf также. Давайте напишем комментарии только здесь комментарии пишутся через флеш и звездочку. Если вы поставите как вот здесь-то стиле могут некоторые не работать поэтому ставьте правильно здесь комментарии ты уже моих здесь будем писать по замыслу надо поставить блок div если посмотреть как у нас начинался вот смартфоны товары в принципе здесь секции мы напишем blockdev, а он тоже будет выравнивается по центру ну поэтому. Давайте может и возьмём вот вот эти две строчки и поставим их ниже смешной меняем. Нагиев закрываем его так как у нас вот эти два розовых блока будет один влево в другой правом. То есть через флоут то вот этот зелёный блок нам нужно задать clearfix Class. Садись на давайте сделаем заберёт clearfix Time to do так есть и соответственно названием. Давайте назовем его так как он с карты если будет напиши Map мы просто ноль там главный блок в котором у нас всё находится зеленый блог. Мы создали теперь создадим два вот этих розовых блоком левый блок можно его заключить. Ватикан Поэтому вот здесь отеков и соответственно — это закрываем с артистом и. Давайте возьмём — это ваш берём о компании текст копируем кому заглавие. Стоим с отвесной вот сюда, а дальше у нас идёт текст моего заключим VP тоже скопируйте этот текст если по каким-то причинам у вас проблема здесь в эти китайские иероглифы меня например в этой версии Photoshop на урезана выдавала ошибку при копировании вот этого абзаца ну можете копировать отсюда если у вас с этим какие-то вопросы то у нас в нашей папке с материала. Файлик Map HTML если. Вот его открыть то вот здесь этот текст у нас идёт. Можно отсюда скопировать либо с Photoshop хотите. То есть мы копируем этот текст. И соответственно. Стрим берём это. ВВП здесь она закрывается и так дальше здесь. Давайте поставим бар то есть переход на новую строчку. А дальше ниже создадим ещё один блок давать — это уже у нас будет не отекало, а просто блок div так 10 как надо отформатировать только Mercedes. Найди спешим блок div с классом класс. Я назову Map 1. Вот Мы создали этот розовый blockdev map1 и внутри него будет ещё бирюзовый блок для выравнивания этой карты в котором непосредственно будет кот который мы возьмём в. Гугл карты и я назову мфр. То есть он у нас во фрейме будет iframe ifr ephraim напишем так сделали теперь непосредственно переходим Google карту. То есть вы водите Google Map google.ru Map или google.com Map вас есть ссылка fling либо у вас в файле Map HTML есть уже готовый код. Если вдруг интернет по каким-то причинам у вас в данный момент не работает, что вот вот здесь ниже кот который я сейчас скопирую непосредственно в. Гугл карты здесь содействие в поиске вам надо везти тайбэй. Тайвань вручную и дальше. Вот здесь меня слева полосочки меню. Может когда вы будете смотреть Google уже они перестраивают дизайн. Ну надо найти где-то меню вот он у меня такое и здесь ссылка кот творится средняя карта по умолчанию здесь же можно выбрать больше меньше либо создать какой-то другой размер какой вы хотите. Ну пускай стоит средний нам не принципиально потом всё равно — это изменим и соответственно мы копируем. Этот кот. Я ставлю вот этот блок Map & Fire, а есть обновляем нашу страницу вот как у нас сейчас — это выглядит. То есть как принципе должно быть, а дальше мы назначим соответствующие стиле чтобы — это выровнять и соответствующие шрифты здесь и всё остальное.

0 комментариев
0
FacebookTwitter

Читайте также