Сборник пожеланий по работе сайта (315 стр)
Страницы:
1 …
310 311 312 313 314 315
#4710 (Правка: 22:37)
21:16, 30 окт 2024
− Скрыть
<html style="width:240px;height:400px"><head><link rel="stylesheet" type="text/css" href="styles.css"><meta name="ad.size" content="width=240,height=400"></head><body><a id="click_area" href="#" target="_blank"><div class="main list-vertical" style="background:rgb(31, 165, 234);width:240px; height:400px; font-size:16px; border:1px solid rgb(161, 161, 161);"><div class="banner" style="position:absolute;background: url(bg.jpg) center center/cover no-repeat;animation: 5s ease 0s infinite normal none running rocking; width:100%; height:100%;"></div><div class="banner-background" style="position:relative;background:none"><div class="banner-logo"><div class="center-content" style="text-align:center"><img src="logo.png" style="width:180px;animation: 5s ease 0s infinite normal none running opacityrise2;line-height:0;margin:0px"></div></div><div class="center-container"><div class="center-content" style="text-align:center"><div class="banner-header" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInLeft;margin:3px 0px;width:calc(100% + 0px)"><img src="header.png" style="width:196px"></div><div class="banner-text" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInRight;margin:2px 0px;width:calc(100% + 0px)"><img src="text.png" style="width:196px"></div><div class="banner-button-margin" style="line-height:0;margin:10px 0px 10px 21px"><div class="banner-button" style="line-height:0;background: rgb(31, 199, 255); animation:5s ease 0s infinite normal none running zoomIn;;"><img src="button.png" style="width:135px"></div></div></div></div></div><div class="banner-age"><img src="age.png" style="width:16px"></div></div></a><script>document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);</script></body></html>
Вот с таким хочу разобраться.
Чтоб клик на кнопку переход по ссылке.
И не вкуриваю пока содержимое положить в какую папку.
Лого
++++++++++++++++++++++
Скриптом не получилось....
Скил маленький!
Сделал, как получилось.
Смешно, наивно, но получилось...
Bondersan
> + Показать
> Вот с таким хочу разобраться.
Хз, чё тут непонятного:
+ Показать
− Скрыть
<html style="width:240px;height:400px">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="ad.size" content="width=240,height=400">
</head>
<body>
<a id="click_area" href="#" target="_blank">
<div class="main list-vertical" style="background:rgb(31, 165, 234);width:240px; height:400px; font-size:16px; border:1px solid rgb(161, 161, 161);">
<div class="banner" style="position:absolute;background: url(bg.jpg) center center/cover no-repeat;animation: 5s ease 0s infinite normal none running rocking; width:100%; height:100%;">
</div>
<div class="banner-background" style="position:relative;background:none">
<div class="banner-logo">
<div class="center-content" style="text-align:center">
<img src="logo.png" style="width:180px;animation: 5s ease 0s infinite normal none running opacityrise2;line-height:0;margin:0px">
</div>
</div>
<div class="center-container">
<div class="center-content" style="text-align:center">
<div class="banner-header" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInLeft;margin:3px 0px;width:calc(100% + 0px)">
<img src="header.png" style="width:196px">
</div>
<div class="banner-text" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInRight;margin:2px 0px;width:calc(100% + 0px)">
<img src="text.png" style="width:196px">
</div>
<div class="banner-button-margin" style="line-height:0;margin:10px 0px 10px 21px">
<div class="banner-button" style="line-height:0;background: rgb(31, 199, 255); animation:5s ease 0s infinite normal none running zoomIn;;">
<img src="button.png" style="width:135px">
</div>
</div>
</div>
</div>
</div>
<div class="banner-age">
<img src="age.png" style="width:16px">
</div>
</div><<< --- эт чё лишний закрывающий тег?
</a>
<script>
document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);
</script>
</body>
</html>
Может я чёто не так распарсил, но там походу лишний закрывающий тег (см "эт чё лишний закрывающий тег?")
ZeroN5
Спасибо.
Буду вкуривать.
Подскажи пожалуйста куда содержимое ( файлы) этого кода положить. В какую папку сайта.
Вообще маленький скил не смог даже это понять...
Файлы в архиве.
Что то делаю не так, а разобраться не получается :(
Предлагаю сделать фичу «избранные темы». Это как подписанные, только без уведомления на почту.
Ren
> Предлагаю сделать фичу «избранные темы»
Типа как добавление/закрепление тем в списке тем с участием юзера? Тогда я давно за. Плюс тут кто-то делал скрипт для закрепления тем.
+
Ещё надо бы фичу про сокрытие некоторых тем, а то, пишешь в них раз в месяц, а значёк "New" у них постонной что раздражает -- приходится напрягаться чтобы их игнорировать.
Bondersan
> Подскажи пожалуйста куда содержимое ( файлы) этого кода положить. В какую папку сайта.
> Файлы в архиве.
> Что то делаю не так, а разобраться не получается :(
Я так и не понял что именно ты пытаешься сделать. (Кстати я и сам не спец в вёрстке: всего лишь полгода проработал как вебпрограммист френтента, это было в 2017 году, а потом ... в ощем стало не до вебпрогерства...)
Bondersan
> Кто нибудь делал рекламный банер GameDev.ru ?
>
> Хочу себе на сайт вставить.
> Только пока не понимаю, как реализовать...
>
> Создать картинку, бросить ее кодом ссылкой понятно.
> Хотелось бы примеры увидеть, что ранее создавалось.
Так... вставить на сайт рекламный баннер... Да, картинка нужна, а вот сам код будет сильно зависеть от разрешений самого сайта...
+
У тебя сайт позволяет внедрять непосредственно JavaScript? Или он сделан через конструктор и там всё делается только в виде ихних штатных блоков-модулей? (Если через конструктор, тогда ещё надо смотреть, какие настройки и в каких модулях позволяют делать рекламные банеры, но обычно имеет специальный модуль для рекламных банеров.)
master-sheff
> Bondersan
> > Хотелось бы примеры увидеть
>
> + Показать
О, тоже Леонардо юзаешь?
Bondersan
> master-sheff
> > html не знаешь что ли?
> Именно это и хочу посмотреть.
Если что, у него там нет HTML-кода -- это просто ссылки на картинки из его галереи сгенерированного нейросеттью.
Bondersan
> + Показать
> Вот с таким хочу разобраться.
> Чтоб клик на кнопку переход по ссылке.
Так-с... Судя по всему, это код iframe яндекс-метрики:
- iframe -- т.к. есть тег < HTML >;
- а яндекс-метрика -- т.к. в конце есть скрипт с упоминанием переменной "yandexHTML5BannerApi". (Но кстати, почему-то не вижу нигде строчки с подключением JavaScript-модуля с кодом Яндекс.Метрики.)
Сам же HTML-код:
+ простыня
− Скрыть
- точно не возможно сказать, как именно оно работает, т.к. классы наверняка были прописаны в "styles.css". (Т.е. подключается файл со стилями -- "styles.css", в котором описаны правила оформления как отдельных тегов, так и классов с идишниками. Например, если в коде написано нечто вроде "< div class="banner-text" ", то к оформлению тега будут применяться правила описанные для класса "banner-text", которые описаны в файле "styles.css", который подключается в строке "< link rel="stylesheet" type="text/css" href="styles.css" >". А вот какие именно правила в этом файле описаны -- хз -- смотреть надо.);
- но если в общем, то похоже, что кто-то очень влёкся описанием стилей в стилевом свойсте самих тегов (см. длинющую строку "< div class="banner-header" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInLeft;margin:3px 0px;width:calc(100% + 0px)" >" -- обычно значения стилевого свойства ("style") выносится из тега в соответствующий раздел HTML-кода, а тут... в каждом теге непосредственно задаются стилевые свойства (т.е. атрибуты оформления содержимого данного тега)... в общем, это херовый подход -- структуру веб-станицы и её оформление надо разделять. (Это как разделять надо код и данные в С++).;
- насчёт (файлов)ресурсоф: файл стилей = "styles.css" (считай правила оформления тегов HTML-кода), файл скриптов -- вообще нигде не подключается (хотя в самом конце кода почему-то используется код из стороннего JS-модуля "yandexHTML5BannerApi.getClickURLNum(1);"); файл стилей как и файлы изображений -- судя по всему хранятся в той же папке где и HTML-файл;
- далее, весь код походу расположен в теге гиперссылки (который < a >, точнее в данном случае "< a id="click_area" href="#" target="_blank" > {...} </a>"). Кстати, "href="#"" -- значит, что адрес гиперссылки ("href") = "пустой" ("#") т.е. событие клика будет перехвачено Джава скриптом и вместо клика, по гиперссылке, будет происходить вызов ассоциированной в джава-коде функции (короче вот этот код "document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);" -- означает что при клике на ссылку имеющую идишник "click_area" будет вызываться сторонная функция "yandexHTML5BannerApi.getClickURLNum(1)" и я хз чё она делает); А "target="_blank"" означает что при клике на ссылку будет не переход по её адресу а адрес будет открыт в новой вкладке (т.е. цель клика "target" = новая вкладка "_blank");
- винегрет творящийся внутри гиперссылки потом распишу.;
- сразу после тега гиперссылки (< a >) идёт тег скриптов (< script > ... </script>) в котором назначается обработчик клика на гиперссылке. Точнее, "document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);": 1) "document" -- переменная ссылающаяся на содержимое вебстраницы; 2) getElementById -- найти тег с указанным ID'ишником; 3) "click_area" -- идентификатор гиперссылки (которая см. выше объявлена как "<a id="click_area" href="#" target="_blank">"); 4) "href " -- адрес указанной гиперссылки; 5) "yandexHTML5BannerApi" -- какая-то явно сторонная переменная джаваскрипта, вероятно объявленая в модуле яндекс.мктрики, строчку подключения которого ты забыл скопировать; 6) "getClickURLNum(1)" какая-то функция из яндеас.мутрики которая вызывается с параметром "1";
- теперь содержимое гиперссылки: (тут короче я сливаюсь ибо влом.)(но мне кажется что тебе столь навороченный код ни к чему, к тому же тут ещё и анимация есть например "animation:5s ease 0s infinite normal none running zoomIn;" -- картинка слегка увеличивается при наведении -- не думаю что ьебе нужны такие замуты)
- "И не вкуриваю пока содержимое положить в какую папку." -- судя по коду -- всё хранится в одном месте и картинки и стили и скрипты и хтмл-код. В принципе, для простых вебстраниц так тоже можно.
Bondersan
> Лого
>
> ++++++++++++++++++++++
> Скриптом не получилось....
> Скил маленький!
>
> Сделал, как получилось.
"logo.png" -- по-хорошему вместо png-файла надо юзать swg-файл, но не критично;
"styles.css" -- судя по содержимому, спёр откуда-то не глядя...;
"index.html" -- тут тоже код скопипащен неглядя... кстати у тебя там нигде не определяется значение переменной yandexHTML5BannerApi, поэтому при клике на ссылке просо открывается новая вкладка со старым адресом. Либо добавь строчку с подключением скрипта яндекс метрики, либо удали бесполезный код "< script >document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);< /script >" -- ибо он всё равно ничего не делает а просто выдаёт ошибку в консоль Хрома, и плюс надо заменить пустой адрес ссылки ("< a id="click_area" href="#" ") на нормальный (например "< a id="click_area" href="https://gamedev.ru/" ").
+
Кстати, хех, "6+" -- а у геймдева какой возрастной рейтинг? Точно "6+"?))
#4718 (Правка: 1 ноя 2024, 1:17)
23:05, 31 окт 2024
ZeroN5
Круть!!!
Спасибо.
Теперь вкурить что вы описали наизусть....
+++++
Сделал папку, бросил в неё все файлы, дал ссылки.
Заработало, кое как...
Но походу стили не смог прицепить.
Анимация не работает, нигде.
Относительно клика, код открывает эту же страничку в новом окне.
Вставил, https://gamedev.ru/ Заработало!
+++++++++++++++++++++++++++++++++++++++++
+ Показать
− Скрыть
<html style="width:240px;height:400px">
<head>
<link rel="stylesheet" type="text/css" href="https://kypilkimen.ru/bangam/styles.css">
<meta name="ad.size" content="width=240,height=400">
</head>
<body>
<a id="click_area" href="https://gamedev.ru/" target="_blank">
<div class="main list-vertical" style="background:rgb(31, 165, 234);width:240px; height:400px; font-size:16px; border:1px solid rgb(161, 161, 161);">
<div class="banner" style="position:absolute;background: url(https://kypilkimen.ru/bangam/bg_1.jpg) center center/cover no-repeat;animation: 5s ease 0s infinite normal none running rocking; width:100%; height:100%;">
</div>
<div class="banner-background" style="position:relative;background:none">
<div class="banner-logo">
<div class="center-content" style="text-align:center">
<img src="https://kypilkimen.ru/bangam/logo.png" style="width:180px;animation: 5s ease 0s infinite normal none running opacityrise2;line-height:0;margin:0px">
</div>
</div>
<div class="center-container">
<div class="center-content" style="text-align:center">
<div class="banner-header" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInLeft;margin:3px 0px;width:calc(100% + 0px)">
<img src="https://kypilkimen.ru/bangam/header.png" style="width:196px">
</div>
<div class="banner-text" style="line-height:0;animation:5s ease 0s 1 normal none running fadeInRight;margin:2px 0px;width:calc(100% + 0px)">
<img src="https://kypilkimen.ru/bangam/text.png" style="width:196px">
</div>
<div class="banner-button-margin" style="line-height:0;margin:10px 0px 10px 21px">
<div class="banner-button" style="line-height:0;background: rgb(31, 199, 255); animation:5s ease 0s infinite normal none running zoomIn;;">
<img src="https://kypilkimen.ru/bangam/button.png" style="width:135px">
</div>
</div>
</div>
</div>
</div>
<div class="banner-age">
<img src="https://kypilkimen.ru/bangam/age.png" style="width:16px">
</div>
</div>
</a>
</body>
</html>
+++++++++++++++++++++++++++
Так на сайте выглядит
https://kypilkimen.ru/igry-v-razrabotke/
Со смещением по страничке неразобрался. :(
++++++++++++
ZeroN5
> У тебя сайт позволяет внедрять непосредственно JavaScript? Или он сделан через конструктор и там всё делается только в виде ихних штатных блоков-модулей? (Если через конструктор, тогда ещё надо смотреть, какие настройки и в каких модулях позволяют делать рекламные банеры, но обычно имеет специальный модуль для рекламных банеров.)
Да простенький конструктор. Самый простой для детей.
Блоки баннеров жуткие!
В конструкторе есть модуль Скрипты. На них качаюсь. На перовй страничке. Разных скриптов по натыкал, с привязкой времени работы часов.
+++++++++++
ZeroN5
> "index.html" -- тут тоже код скопипащен неглядя...
Да это копипаст!
Ищу в инете то что мне интересно.
Засовываю и пытаюсь понять, как оно устроено.
Исправляю, что то....
Когда понимаю, что оно работает как мне хочется...
Начинаю искать, что то другое.
С простыми, разобраться не много времени надо.
Сложные коды, опыта мало, чтоб полностью разобрать.
Bondersan
> Теперь вкурить что вы описали наизусть....
Никто не учит наизусть -- https://htmlbook.ru/ в помощь:
- https://htmlbook.ru/samhtml -- самоучитель по основам HTML (на примере HTML4);
- https://htmlbook.ru/html5 -- описание актуальной версии HTML -- ща кругом (>90% сайтов) юзается HTML5;
- https://htmlbook.ru/html -- справочник по HTML-тегам;
--
- https://htmlbook.ru/samcss -- Самоучитель CSS (язык параметров оформления тегов);
- https://htmlbook.ru/css3 -- самоучитель по расширению CSS -- CSS3 (хз пригодится или нет, но щас тоже почти кругом юзается именно 3-я версия);
- https://htmlbook.ru/css - справка по CSS параметрам;
--
(По JavaScript тоже есть справочные сайты... но вроде при твоём коде такое ещё не особо нужно.)
Bondersan
> < html style="width:240px;height:300px" >
Большие куски кода выкладывай внутри BB-кода [ code=cpp ], а то парсер сайта глючит + так будет подсветка синтаксиса.
А HTML-код -- тем более, иначе парсер не понимает, где ты пытаешься оформлять свои посты, а где просто вывалил кусок HTML-кода... (например у меня твой блок < div> тега стал подсвечиваться как гиперссылка..., а после самого банера -- вообще каша из слоёв текста...)
#4720 (Правка: 1:14)
1:12, 1 ноя 2024
Спасибо!
Один за такое короткое время не прокачался бы!
Получилось, найти все ошибки с помощью вас.
Bondersan
html- и body-тег на div-тег так и не заменил...
+ так будет покрасивее...
− Скрыть
<iframe src="https://kypilkimen.ru/gd-banner/" style="width:250px; height:445px; border: 0" scrolling="no"></iframe>
+ ... а так совсем красиво (хоть и костыльно)
− Скрыть
<div style="width:250px; height:445px; overflow:hidden">
<iframe src="https://kypilkimen.ru/gd-banner/" style="width:250px; height:445px; border: 0; margin:-65px -20px 0" scrolling="no"></iframe>
</div>
Бомбически!
Спасибо, за уроки.
Мне еще качаться и качаться....