Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Ламерские вопросы » Как встроить CSS и JS в HTML?

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

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

вопрос
Пожалуйста, помогите встроить 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
Юзер

Dron - 19 декабря 2015 00:11 -

Шаблон, который я использовал:
 <!DOCTYPE html>
<html>
<head>
  
</head>
 
<body>
 
<style>
 
 
</style>
 
 
</body>
 
</html>
scaver
Юзер

scaver - 19 декабря 2015 01:48 -

Между <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
Юзер

Dron - 19 декабря 2015 02:02 -

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

scaver - 19 декабря 2015 03:14 -

ну между <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" />
mastodontoff
Юзер

mastodontoff - 19 декабря 2015 10:54 - 

<!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>
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 18.06.2012 klaf  Шаблоны (TPL), Стили (CSS)
 07.03.2013 Гость  Стили (CSS)
 10.06.2013 Гость  Стили (CSS)
 24.12.2013 sk  Стили (CSS)
 21.04.2014 MrDreamer  Шаблоны (TPL), Стили (CSS)
 22.08.2014 alexcreew  Стили (CSS), jQuery
 24.12.2014 ale-eex  Шаблоны (TPL), Стили (CSS)
 17.07.2015 Drol  Стили (CSS)
 27.08.2015 AleksMey  Стили (CSS), Общие вопросы по PHP
 03.12.2015 Zooroo  Общие вопросы, Стили (CSS), Общие вопросы по PHP
  • mondolfo | Как вывесит в comments.tpl картинку с но ... 7
    Фото mondolfo
    mondolfo
    Как вывесит в comments.tpl картинку с новости?
    Вчера, 23:42
    кто-нибудь решил эту?
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 17:08
    Разъясните как вытащить id?
  • lutskboy | Вытащить все данные из определенного доп ... 1
    Фото lutskboy
    lutskboy
    Вытащить все данные из определенного доп поля?
    22-11-2024, 16:17
    в adminer можно.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 16:14
    выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
    js скрипт можно написать
    
<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 14:39
    Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 13:52
    где выводить? админка или сайт
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    21-11-2024, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
наверх