Как встроить CSS и JS в HTML?

Dron 18.12.2015 Все вопросы » Ламерские вопросы 1776

вопрос

Пожалуйста, помогите встроить CSS и JS в HTML. Сразу скажу, я в этом вообще ноль, но пару месяцев назад каким-то чудесным образом мне удалось это проделать самому, все работало. Сейчас попробовал снова и...никак, не помню каким образом мне удалось прикрутить ссылки.
Для объединения всего этого я воспользовался шаблоном, найденным в интернете:

Ссылка на то, что мне нужно сделать:
http://s-sd.ru/blog_studio_design/prostoj_effekt_parallaksa_dlya_izobrazheniya/
Ссылки на CSS и JS файлы:
JS - http://s-sd.ru/files/simple-effect-parallax-to-image/js/index.js
CSS - http://s-sd.ru/files/simple-effect-parallax-to-image/css/style.css
Картинка - http://patskot.com/dev/parallax/images/about.jpg
Как мне все это склеить?

Ответа пока нет

5 комментариев

Юзер

Dron - 2015-12-0319 декабря 2015 00:11 - #51147

Шаблон, который я использовал:

 <!DOCTYPE html>
<html>
<head>
  
</head>
 
<body>
 
<style>
 
 
</style>
 
 
</body>
 
</html>

Юзер

119

scaver - 2015-12-0319 декабря 2015 01:48 - #51148

Между <head></head> вставьте:


<link media="screen" href="{THEME}/css/style.css type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="{THEME}/js/index.js"></script>

Между <body></body> вставьте:


<section id="banner">
<div id="intro">
<h1>Заголовок</h1>
<p>Краткое описание.</p>
</div>
<img src="{THEME}/images/about.jpg" width="900" />
</section>

Файлы положите в шаблон:
abotut.jpg - папка images
index.js - папка js
style.css - папка css

Юзер

Dron - 2015-12-0319 декабря 2015 02:02 - #51149

Нет, вы не поняли! Нет возможности загрузить эти файлы и подключить все по-человечески. Нужно именно вшить эти файлы в один код. Прямые ссылки я оставил. Однажды я сделал это сам, но сейчас повторить не могу т.к я уже сказал, что я в этом ноль! Нужно все эти фалы соединить в один html-код.

Юзер

119

scaver - 2015-12-0319 декабря 2015 03:14 - #51151

ну между <head></head> используйте:
<style></style> в него вставляйте css из файла
<script type="text/javascript"></script> вставляйте код js из файла
между <body></body>


<section id="banner">
<div id="intro">
<h1>Заголовок</h1>
<p>Краткое описание.</p>
</div>
<img src="адрес картинки" width="900" />
</section>

Загрузите about.jpg на любой хостинг
Если это DLE используя раздел "Управление изображениями" загрузите картинку и укажите адрес в пути
<img src="адрес картинки" width="900" />

Юзер

124

mastodontoff - 2015-12-0319 декабря 2015 10:54 - #51154

<!DOCTYPE html>
<html>
<head>

<style>
body {background: #000000 url('bg.jpg') no-repeat center top;}
#banner{ width: 840px;height: 350px;margin: 40px auto;overflow: hidden;position: relative;text-align: center;font-family: 'PT Sans', sans-serif;border: 13px solid rgb(222, 222, 222); background-color: rgb(243, 244, 239);z-index: 20;}
#banner img{position: absolute;top: 0; left: 0; z-index: 5;}
#intro{ position: absolute; height: 100%; padding: 100px 0; z-index: 10;text-align: center;-moz-box-shadow: inset 0 0 30px #333333; -webkit-box-shadow: inset 0 0 30px #333333; box-shadow:inset 0 0 30px #333333;}
#intro h1{text-align: center;width: 840px;margin: auto;text-transform: uppercase;color: #333333; font-size: 28px;}
</style>

</head>
<body>
<section id="banner">
    <div id="intro">
        <h1>Parallax Hover</h1>
        <p>Aenean lacinia bibendum nulla sed consectetur. <br/>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    </div>
    <img src="http://patskot.com/dev/parallax/images/about.jpg" width="900" />
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    jQuery("#banner").mousemove(
        function(e){
            var offset = jQuery(this).offset();
            var xPos = e.pageX - offset.left;
            var yPos = e.pageY - offset.top;
            var mouseXPercent = Math.round(xPos / jQuery(this).width() * 100);
            var mouseYPercent = Math.round(yPos / jQuery(this).height() * 100);
            jQuery(this).children('img').each(
                function(){
                    var diffX = jQuery('#Parallax').width() - jQuery(this).width();
                    var diffY = jQuery('#Parallax').height() - jQuery(this).height();
                    var myX = diffX * (mouseXPercent / 1500);
                    var myY = diffY * (mouseYPercent / 1080);
                    var cssObj = {
                        'left': myX + 'px',
                        'top': myY + 'px'
                    }
                    jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'});
                }
            );
        }
    );
</script>

</body>
</html>

derebas | Нужо доработать плагин связанных новосте ... ¹

derebas
Нужо доработать плагин связанных новостей
23-12-2024, 22:42

1. --
2. Не будет работать с добавлением новостей, т.к. ID еще не существует, только переработка принципа самого доп. поля. Что касается существующего состояния, просто добавьте один query запрос при нажатии на + который и будет добавлять параметр в sql
3. стрипслэш
4. Скачал, попробывал, не заметил такой проблемы, возможно нужно в ajax уточнить параметр
5. Просмотрев модуль, изначально алерт идет об однократных связях, как туда может попасть "лишняя" новость не совсем понятно.

В любом случае обратитесь к teraMoune как к специалисту
non-stop | Как решить проблему индексации DLE в пои ... ⁴

non-stop
Как решить проблему индексации DLE в поиске Bing?
23-12-2024, 08:43

Проверил также количество страниц в поиске BING
site:adressayta.com

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

Мне кажется что причина в файле .httaccess
тк при попытке скармливания постранично - выдает ошибку перенаправления
URL перенаправления цели:https://........ ./index.php?do=static&page=406.&seourl=406.
Sud3n | Как решить проблему индексации DLE в пои ... ⁴

Sud3n
Как решить проблему индексации DLE в поиске Bing?
22-12-2024, 20:44

Ошибка, если посмотреть есть ли страничка в индексе
Но версия DLE у меня старая, сомневаюсь, что дело в версии
Sud3n | Как решить проблему индексации DLE в пои ... ⁴

Sud3n
Как решить проблему индексации DLE в поиске Bing?
22-12-2024, 20:42

У меня почему-то Bing вообще не индексирует сайт после добавления в Вебмастер
non-stop | Как решить проблему индексации DLE в пои ... ⁴

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.