🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: N/A
No summary available.
00:00
ну и в завершении этого модуля я решил снять видео про то как можно преобразовать ваше приложение при помощи ксс а сделать его более красивым и стильным вот это видео не обязательное для просмотра и для того чтобы познакомиться джанкой ксс вам не нужен поэтому видео вы можете пропустить если
00:17
она вам не интересно вот и так же мы не будем с вами останавливаться на написание самого ксс а то есть я буду вставлять готовые куски кода вы можете найти в описании под видео и тоже ими пользоваться и сразу будем смотреть как
00:32
они влияют на наше приложение но и поехали во первых чего бы хотелось начать это конечно же изменить наш фон всего нашего приложения красная конечно же обращает на себя внимание но я думаю слишком много поэтому давайте первым делом в нашем базовом кэйси мы
00:51
изменим цвет на вот такой вот обновим страничку и получим такой результат если у вас сеть вдруг не изменился то нажмите icontrolav5 вот просто иногда джанга не подхватывает изменение которые вывели в ксс далее давайте изменим то как
01:08
отображается вот этот список для этого я вновь приготовил код его мы давайте вставим в яндекс ксс и мы будем изменять вот наш список вин из основного здесь смотрите мы делаем две колонки убираем значки которые идут перед списком то
01:23
есть вот эти точки располагаем наш список по центру делаем максимальную длину делаем так же радиус у наши границы и небольшие отступы давайте посмотрим как у нас изменится теперь наша страничка вот таким образом она выглядит и также нам нужно изменить вот
01:41
эти сами значение тега или напоминаю это элементы вашего списка давайте опять же вставим код здесь я говорю что текст будет располагаться по серединке изменяю размер шрифта и делаю небольшие отступа
01:56
обновляем страничку и вот смотрите как у нас все выглядит у меня сейчас масштаб страничке был на 150 я зажимаю контру и колесиком мышки меняю масштаб но давайте оставим на сто процентов также давайте уберем вот это отображать
02:13
не вот этот лишний текст bass html и content from индекс html для этого мы идем сперва bass html убираем вот этот заголовок и идем в яндекс html и выбираем заголовок
02:28
каждого вот с таким содержимым обновляем страничку и вот видим результат также стоит отметить что вы можете нажать правой кнопкой мышки на просмотр кода здесь вы можете выбрать вот эту стрелочку и нажать на любой
02:45
элемент вот давайте например выберем towers и смотрите справа откроется его свойства и эти свойства берутся из нашего css файла и смотрите галочками вы можете например их отменять и увидеть как раз на что они влияют вот например
03:01
мы можем фон убрать можем ширину изменить и так далее то есть эта штука полезно для того чтобы вы понимали какое свойствам на что влияет и так же здесь можно сразу автоматически эти свойства менять то
03:16
есть например мы можем с вами ширину заменить на другое значение и она автоматически сразу изменится но эти изменения будут только в браузере то есть в самом изначальном файлики у вас здесь ничего не поменяется в браузере вы можете только экспериментировать
03:32
теперь предлагаю вот эти наши менюшки убрать с главной страничке и добавить сюда новый заголовок и так идем в яндекс html убираем менюшку сверху это вот это значение убирая менюшку снизу и
03:49
перед нашим заголовкам добавляем тэг h1 давайте напишем приложение гороскоп обновляем страничку и вот получаем такой результат давайте добавим стиль для вот этого заголовка для этого идем файлик
04:06
индекс ксс и вставляем стене для заголовка h1 здесь мы заменяем цвет располагаем текст по центру изменяем шрифт изменяем размер текста и добавляем нижнее подчеркивание обновляем страничку и вот получаем такой результат вот
04:22
главной страничке я думаю мы разобрались теперь давайте заменим отображен не наших описаний здесь во-первых бросается в глаза вот эта строчка давайте ее удалим значит мы идем в инфо зодиак и у нас есть с вами вот этот заголовок
04:37
каждого давайте здесь мы просто вы видим название нашего знака зодиака вот в данном случае это овен отлично давайте заменим его на h1 чтобы у нас отличался вот этот заголовок от вот этих двух у них разный тип и
04:53
добавляем стиле значит мы идем в инфо ксс и описываем теперь в новой стиле для h2 и для h1 обновляем страничку и вот мы получаем название зодиака по центру это размер
05:08
шрифта будет побольше и ниже описание самого знака теперь давайте изменением отображение вот этого меню и к нему вообще добавим все знаки зодиака которые нас были для этого нам нужно пойти в наша views
05:24
еда бросить в него вот эту перемены помните это список из всех наших знаков зодиака и так значит здесь я эту переменную объявляя и добавляю ее в наш контекст и помните у нас есть на выбор который
05:42
имеет доступ вот к этой переменой зодиака давайте попробуем обновить страничку но смотрите у нас знаки зодиака здесь не добавились это произошло потому что помните мы здесь с вами добавляли вот этот значение он то есть мы запрещали доступ к локальным
05:58
переменном вот поэтому давайте уберем этот текст и после этого обнови страничку вы увидите что все знаки зодиака у нас выводится вот здесь вот отлично но я бы хотел чтобы это меню у нас располагалось слева вот такой колонки
06:15
ну и для этого нам нужно с вами добавить следующее мы пойдем с вами в базовый ксс и здесь я добавлю описание пеганов вот именно он у нас находится в нашем html здесь
06:31
основная что мы задаем фиксированную ширину нашего экрана и у нас располагается в верхнем левом углу и смотрите какие у нас изменения сразу возникнут давайте сделаем масштаб на сто процентов вот видите у нас все значения слагается
06:49
слева но тут мешается во первых вот эти символы давайте их уберём для этого идем в наш и помните здесь вот были ведь вертикальные чёрточки я удаляю их отсюда и вот из пятой строчке тоже нужно их будет удалить
07:05
обновляем отлично но теперь у нас смотрите есть проблема что некоторые знаки зодиака отображаются в одну строчку то есть у нас нету переносов и для этого мы в наш кейс с добавляем еще один стиль
07:20
он описывает ссылки внутри нашей навигационный панель я во первых здесь меняю цвет говорю что они будут блочные вот за счет этого у нас появляется переносы и изменяя размер и отступы ну вот видите у нас теперь они все
07:36
располагаются друг под другом и мы можем по ним уже спокойно нажимать а ссылки нас автоматически уже проставлены в нашем на в баре ваш тем или вот здесь мы их поставили отлично но теперь вы можете заметить что у нас везде теперь овен
07:51
стоит то есть у нас не меняется описание знака зодиака давайте это тоже исправим и для этого нам нужно из описания достать первое слово видите она здесь везде стоит на первом месте то есть все что стоит до первого пробела к сожалению
08:07
django template ленгвич и нету такого фильтра сплит который нам позволил бы разбить все по пробелам и затем достать первый символ вот поэтому нам нужно пойти во views у нас есть переменные дискрипшн и мы можем здесь добавить
08:23
новые перемены site name и уже здесь по дискрипшн ну мы значит первым делом вызываем сплит по пробелу и потом берем первый элемент он стоит на яндексе 0 и затем вот эту перемены тайные мы сами
08:40
используем вот в этом месте давайте обновим страничку вот здесь у нас получается стрелец здесь рак здесь близнецы и так далее вот таким образом мы можем вернуться с вами на главное ну и также можно
08:57
добавить стилей при наведении на вот эти элементы для этого мы с вами идем в яндекс ксс вот здесь мы с вами описывали тагиле давайте чуть ниже я добавлю вот такой стиль мы будем добавлять цвет для
09:13
тега а когда она его наводит или он становится активный теперь обновляем страничку и вот видите у нас этот цвет меняется на розовый ну и такое же аналогичное поведение мы с вами можем добавить вот на это меню для
09:29
этого давайте я скопирую вот этот текст мы с вами перейдем в bass css и смотрите нам нужно всего лишь здесь вместо ел добавить nov обновляем страничку и видите цвет у нас тоже поменялся
09:45
ну вот сейчас наше приложение выглядит гораздо симпатичный ну что ж на этом мы завершаем изучение этого модуля то есть мы с вами изучили все что касается шаблонов и статике а следующий модуль у нас будет посвящена изучение моделям мы
10:01
с вами наконец-то подключим базу данных и научимся с ней работать при помощи django и учиться мы будем уже при помощи другого проекта мы будем создавать свой блог так что жду вас на следующем модуле всем пока