FinanceTube.ru

Оформление таблиц финансовой отчетности | Урок 30

Кол-во просмотров с 20.05.24г. :: 209

Добрый день. Всем привет. Сегодня у нас вторник. Я как-то ошибся, увлёкся вот этим сайтом хэшгейм и готовился сегодня к продолжению именно по финн моделированию онлайне. И что-то у меня совсем как-то немножко всё съехало. буквально за пять минут сейчас до выкладки ссылки я вдруг понял, что сегодня же вторник и у нас управленческий учет. Я думаю, что ничего страшного этому не случится, если мы с вами сегодня позанимаемся моделированием, ну а завтра управленческим учетом. Тем более, что именно очно сейчас Сергей Михаил, Павел у нас пока что нет, не появляется, поэтому всё страшно. Не будет. Короче говоря, завтра будет управленческий учёт, да, продолжение управленческого учёта. Ну а сегодня мы вот ещё немножко позанимаемся с оформлением. Вот эту вот техническую часть просто хочется всегда её побыстрее завершить, так чтобы всё выглядело уже хорошо. и уже потом заниматься непосредственно моделированием в онлайн-системе. Поэтому, видимо, моё стремление дало о себе знать, и я сегодня уже по накатанной решил моделирование поставить. Переходим к дальнейшей настройке форматов. Вот, и здесь у нас, ну, возникает такая, да, вот я вот говорил, что не очень приятная штука, это то, что у нас бегунок находится внизу, и он будет перемещаться вниз. А нам бы его, вообще говоря, перевернуть бы наверх. но при перевороте наверх тут у нас ну просто нужно понять что у нас будет происходить так еще вот есть момент такой что вот такое оформление бегунка ну слишком жирно как бы тут для него вот это поле большое в принципе бегунок можно тоже сделать поменьше и это мы соответственно в нашем файле style да стиле мы добавим я просто готовую конструкцию для него добавлю сейчас сразу здесь вот я посмотрю где у нас они есть вот для бегунка вот полоса прокрутки scrollbar вертикальный горизонтальный там всякие вот эти вот все моменты прописаны вот я вот такую конструкцию просто возьму сразу же ее скопирую то есть суть какая Я как-то раз просто задал вопрос там где-то в Яндексе, в Гугле, я уж там не знаю, и написал, как изменить вид формата бегунка. Ну и нашел вот такой вот небольшой стилевой программный кодик. Просто его оформил, как вот мне самому захотелось, и, соответственно, просто скопировал на один из наших сайтов. Вот. И, в общем, просто пользуемся. Поэтому здесь, в общем, достаточно просто ко всему этому нужно относиться. Нашли что-нибудь там в интернете, да, что, в общем, для вас хорошо подходит, там, под ваш дизайн или вот эту визуализацию. Ну и, соответственно, взяли и сделали. Так. Значит, вот если мы такую штуку, вот такую штуку вставляем, то результат вот этого оформления, результат вот этого стиля, мы его прямо сейчас можем посмотреть. Я сохраняю наш стилевой файл, иду, соответственно, cashgap.ru на сервере, где у нас вот cashgap.ru, Идем в cache-gap.ru, у нас вот семинары современной моделировки. Вот он файл, а нет, CSS. Заходим в CSS, вот он style 1004, 1004 обновление. И закидываем на сервер стилевой файл и смотрим, что у нас здесь произойдет. Вот смотрите, как этот бегунок теперь выглядит. Мы ему сделали ширину этого места, где он пробегает, значительно уже. И там он оформлен по-другому. Короче говоря, вот таким образом мы сделали оформление бегунка нашего. вот и теперь как нам это дело как нам его перекинуть наверх то есть еще раз суть какая мы если смотрим любую нашу финансовую отчетность до у нас сверху есть закрепленная зона той части где у нас идет прокрутка и шкала времени да здесь тоже то что-то и мы на сайте просто в рамке вот этой вот закрепленной зоны мы вот туда как бы перекинем и наш вот этот беглодон. так чтобы он был у нас всегда сверху. ну в том числе можно в эту зону ткнуть. я вот сейчас вот просто беру и перемещаю кнопочками на клавиатуре влево вправо стрелочку. А, соответственно, в смартфоне, в телефоне, это можно будет просто делать пальцем. Мы хотим перекинуть бегунок наверх. Для того, чтобы нам перекинуть бегунок наверх, нам необходимо, если у нас здесь есть ось Х, как мы говорили, горизонтальная, Нам необходимо произвести зеркальное отображение на 180 градусов. Отображение относительно оси OE. Это тоже делается несложно. Сейчас я посмотрю, как это записывается. Возьмем какую-нибудь кнопку. сейчас я пожалуй вот видите как написано transform rotate x 180 180 грамм то есть мы на 180 градусов должны трансформировать наш блок трансформировать наш блок относительно оси о и на 180 градусов Давайте возьмем вот такую вот запись. Трансформирование. И попробуем ее применить. Теперь нам нужно понять, чему нам ее нужно применить в данном случае. Это там, где у нас вот этот бегунок находится. Мы сейчас зайдем, посмотрим, где у нас находится бегунок. Вот мы находимся в ПТК, в блоке потоков. И в блоке потоков у нас есть overflow x. То есть если у нас идет перебор по оси x, то мы добавляем строубар. И сразу же под ним, когда мы здесь пишем, то мы этот строубар хотим поднять наверх. то есть производим разворот на 180 градусов. давайте сохраняем. файл стиля сюда закидываем и смотрим что у нас получается. так вот у нас он попал наверх. попал наверх и получается так, что у нас здесь как раз таки внутри перевернулись вот эти вот наши столбы. То есть каждый столбик перевернулся наверх. Ну понятно, что внутри теперь вот эти сами столбики нам нужно обратно их развернуть. То есть внутри каждый столбик, вот этот вот ПТК, мы его тоже переворачиваем на 180 градусов в свою очередь. переворачиваем, сохраняем и смотрим, что у нас получилось. И заменить все. Так, и у нас получается теперь вот такая ситуация. 1, 2, 3, 4, 5, 0, 0, 0 и все. И у нас, соответственно, промотка теперь сверху находится, да? И цепляем, и прокручиваем. Прокручиваем. Так, хорошо. Теперь дальше, что мы... Делаем дальше. Для вот этого блока нам здесь общая вот эта вот красная граница она нам здесь вроде как особо и не нужна. Нам красная граница особо не нужна. И давайте мы ее и уберем. нам нужно как я говорил нам необходимо сначала настроить зону потоковую зону потока и потом по ее структуре вот этой зоны потока мы сразу же перекинем все настройки для вот этих вот четырех зон вертикальных для того чего у нас остается значит мы мы делаем? убираем красную вот эту вот. убираем красную границу у общего блока. то есть вот у нас здесь написано border 0.1.2. вот это вот давайте мы пока что возьмем и закомментируем. вот мы это закомментировали. посмотрим, как это выглядит. Закомментировали и смотрим. Сверху у нас граница вот эта красная, это идет вот эта строка номер один, да, это вот ее там красная граница сверху. А здесь у нас получается, вот они начались клеточки ячейки и теперь нам что еще нужно сделать нас получается вот эти вот 1 2 3 4 5 это наши заголовки это наш заголовок и пока что мы не будем создавать Мы чуть попозже временные рамки, начало периода, конец периода добавим. Пока что у нас идет 1, 2, 3, 4. Давайте мы, во-первых, по образу сделаем так, что у нас эти номера периодов, пусть это у нас будет зона заголовка, И потом у нас будет зона вот этих числовых рядов наших потоков. Надо разделить их визуализацию, то, как они выглядят. И понятно, что то, что у нас будет на самом верху, здесь можно сверху как-то оформить тоже какую-то границу и так далее. Но если это будет внизу, то нам вот здесь нужно какое-то разделить. здесь вот, например, можно сделать двойную как бы эту линию, двойную черту, как это часто делают. и нам необходимо сместить вправо, сделать вправо вот эти вот числа, которые внутри ячеек находят. давайте мы сместим вправо. так значит на данный момент мы что хотим сделать мы хотим заняться оформлением ячеек у нас есть минимальная ширина у этих ячеек давайте мы зададим у них минимальную высоту минимальную высоту Это задается вот это вот white. А есть слово для высоты. Это high. Сейчас мы просто посмотрим там. Или я начну сейчас писать и здесь скорее всего выскочит. Так. Типа так. Вот он, height. Вот это.

Рекомендации

Предшествующее видео

Следующие видео

FinanceTube.ru
С НАМИ ЭФФЕКТИВНЕЕ!
ООО «П++»
ОГРН:1187746086054
ИНН:7728395910
КПП 772801001
Юридический, фактический и почтовый адрес:
117246, г. Москва, Научный пр-д, д.8, стр.7, оф.14
Адрес эл. почты: i@mngmnt.ru
Звоните: +7(985)201-6607
© 2012 - 2024 ООО "П++" (ИНН 7728395910)
Наверх