ТОР 5 статей: Методические подходы к анализу финансового состояния предприятия Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века Характеристика шлифовальных кругов и ее маркировка Служебные части речи. Предлог. Союз. Частицы КАТЕГОРИИ:
|
Грайворонский район<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Грайворонский район</title>
<style type="text/css"> body {background-image:url(цветы.jpg)!important} </style>
<link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="MyJS.js"></script> <script type="text/javascript" src="../jquery-2.1.4.js"></script>
</head> <body>
<span style="font-size:24px" > <a href="javascript:void(0)" onClick="Back();"> <<--Назад</a> <a href="javascript:void(0)" onClick="Next();"> Вперёд-->></a></span>
<div style="position:relative; font-size:50px; z-index:2; color:#A01309; text-align:center">Реки Грайворонского района</div> <div style="position:relative; top:-55; color:#FAB9DA;font-size:60px; z-index:1; text-align:center">Реки Грайворонского района</div>
<table class="tfirst" style="height:300px"> <tr > <td style="text-align:center"><img id="gray" src="грайворонка.jpg" width="300" alt="Грайворонка" title="Река Грайворонка"/> <p id="st1" style="text-indent:0px; text-align:center" >Река Грайворонка </p> </td>
<td style="text-align:center"> <img id="vors" src="ворсклица.jpg" width="300" alt="Ворсклица" title="Река Ворсклица"/> <p id="st2" class="withBorder" style="text-indent:0px; text-align:center">Река Ворсклица </p> </td>
<td style="text-align:center"><img id="loz" src="лозовая.jpg" width="300" alt="Лозовая" title="Река Лозовая"/> <p id="st3" style="text-indent:0px; text-align:center"> Река Лозовая </p> </td> </tr> </table>
<p>Пример использования селекторов (pr1)</p> <button onclick="addStyle1()">Сделать фон первого названия зелёным</button><br><br> <button onclick="addStyle2()">Обвести среднее название синей рамкой</button><br><br> <button onclick="addStyle3()">Сделать шрифт в первом и третьем названиях жирным</button><br> <br> <p>Визуальные эффекты(pr12)</p> <input type="button" value="Свернуть/Развернуть картинки" onclick="slideToggleImg();">
</body>
</html> Валуйский район <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Валуйский район</title>
<style type="text/css"> body {background-image:url(бабочки.jpg)!important} </style>
<link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="../jquery-2.1.4.js"></script> <script type="text/javascript" src="MyJS.js"></script>
</head> <body>
<span style="font-size:24px" > <a href="javascript:void(0)" onClick="Back();"> <<--Назад</a> <a href="javascript:void(0)" onClick="Next();"> Вперёд-->></a></span>
<div style="position:relative; font-size:50px; z-index:2; color:#660CDC; text-align:center">Реки Валуйского района</div> <div style="position:relative; top:-55; color:#D8C43D;font-size:60px; z-index:1; text-align:center">Реки Валуйского района</div>
<p class="bold24">Пример использования jQuery фильтров (pr4)</p>
<table style="background-image:url(фон1.jpg); font-size:20px" align="center" border="6" cellspacing="8"cellpadding="8" width="55%" height="40%" bordercolor="#470AB2">
<caption style="font-size:24px">Координаты рек </caption>
<tr> <th rowspan="2">Название</th> <th colspan="2">Координаты</th> </tr>
<tr> <th>с.ш.</th> <th> в.д.</th> </tr>
<tr> <td style="color:#790510">Валуй</td> <td>50° 33′ 01″</td> <td>38° 30′ 47″</td> </tr>
<tr> <td style="color:#790510">Ураева</td> <td>50° 07′ 51″</td> <td>38° 04′ 58″</td> </tr>
<tr> <td style="color:#790510">Козинка</td> <td>50° 14′ 43″</td> <td>37° 38′ 32″</td> </tr>
</table> <br> <center><input type="button" value="Поменять цвет таблицы" onclick="addColor2();"></center>
<br> <p class="bold24">Пример работы с CSS-стилями (pr5)</p> <div id="vkladki" style="text-align:center"> <div class="vkl" id="vkladka1" onClick="chang('#vkladka1');">Валуй</div> <div class="vkl" id="vkladka2" onClick="chang('#vkladka2');">Ураева</div> <div class="vkl" id="vkladka3" onClick="chang('#vkladka3');">Козинка</div> </div> <div style="clear: both"></div> <div id="content" style="font-size:18px;text-align: justify">Вдальнейшем здесь будет размещена информация о реках данного района</div> <div style="clear: both"></div>
<br>
<p>Визуальные эффекты (pr11)</p> <input type="button" value="Скрыть картинки" onclick="hideImg();"> <input type="button" value="Показать картинки" onclick="showImg();"> <br> <div style="text-align:center"> <img id="val" src="валуй.jpg" class="sizeimg" alt="Валуй" title="Река Валуй"/> </div>
<p class="bold24"> Река Валуй </p>
<br>
<div style="text-align:center"> <img id="uraeva" src="ураева.jpg" class="sizeimg" alt="Ураева" title="Река Ураева"/> </div> <p class="bold24"> Река Ураева </p>
<br>
<div style="text-align:center"> <img id="koz" src="козинка.jpg" class="sizeimg" alt="Козинка" title="Река Козинка"/> </div> <p class="bold24"> Река Козинка </p>
</body> </html>
Формы <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Формы</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="../jquery-2.1.4.js"></script> <script type="text/javascript" src="MyJS.js"></script>
</head> <body>
<center> <img src="кантик.gif" width="200" weight="47"> </center>
<div id="line"> <table class="tfirst">
<tr style="background-image:url(радуга.jpeg)"> <td class="bold24" width="160" height="47"><a href="Мониторинг малых рек главная.html" title="Главная">Главная</a></td>
<td class="bold24"><a href="Music Belgorod.html" title="Песня Белый город">Музыка</a> </td>
<td class="bold24"><a href="Video river.html" title="Видео">Видео</a> </td>
<td class="bold24"><a href="Список методов анализа.html" title="Список">Теория</a> </td>
<td class="bold24" width="270"><a href="Map.html" title="Карта">Навигационная карта</a> </td>
<td class="bold24"> <a href="Форма.html" title="Форма" >Формы</a> </td>
</tr> </table> </div>
<div id="line"> <table class="tfirst"> <tr style="background-image:url(лист.jpeg)"> <td width="160" height="200"> <h1 onmousedown="this.style.fontFamily='Arial'; this.style.color='#6F3D8D'" onmouseup="this.style.fontFamily='Monotype Corsiva'; this.style.color='#BA0606'"> Малые реки Белгородской области </h1> <br> <p style="text-indent:0px; text-align:center"> <a href="javascript:void(0)" onClick="Back();"> <<--Назад</a> <a href="javascript:void(0)" onClick="Next();"> Вперёд-->></a></p> </td> </tr> </table> </div>
<br>
<div>Пример использования иерархических селекторов</div> <button onclick="addStyle5()">Обвести все input-ы красной рамкой</button><br><br> <p class="bold24" style="text-align:left">Пример использования селекторов форм (pr3)</p> <form> <input type="button" id="b1" value="Поменять цвет полей для ввода и загрузки файлов" onclick="addColor1();"> <br><br> <input type="button" id="b2" value="Добавить рамку для изображений оценок(см.внизу страницы)" onclick="addStyle6();"> <br><br> <input type="button" id="b2" value="Поменять цвет кнопок button" onclick="addColor3();"> </form> <br> <p class="bold24" style="text-align:left">Пример использования фильтров форм</p> <button onclick="addStyle8()">Сделать цвет текста зелёным только у активных input-ов</button><br><br>
<table align="center"width="200" height="200" style="background-color:#B4E5FA; border:4px double #9F3207;"> <tr> <td> <div class="bold24">Авторизация</div> <br/> <form name="avtor"> Логин:<br/> <input name="login" type="text" size="25" maxlength="20" value=""/><br/> Пароль: <br/> <input name="pd" type="password" size="25" maxlength="30" value=""/><br/> <input name="remember" type="checkbox" value="yes"/> Запомнить <br/> <input type="submit" name="enter" value="Вход" onClick="Login();"/> </form>
</td> </tr> </table>
<p id="leftbold"> Шаг 1: </p> <p style="text-indent:0px"> Выберите реку, о которой хотите что-либо узнать: <select id="riverID" name="river" size="1" > <option value="Везёлка"> Везёлка </option> <option value="Нежеголь" selected> Нежеголь </option> <option value="Лопань"> Лопань </option> <option value="Уды"> Уды </option> <option value="Липовый Донец"> Липовый Донец </option> <option value="Грайворонка"> Грайворонка </option> <option value="Ворсклица"> Ворсклица </option> <option value="Лозовая"> Лозовая </option> <option value="Донецкая Сеймица"> Донецкая Сеймица </option> <option value="Ольшанка"> Ольшанка </option> <option value="Корень"> Корень </option> <option value="Валуй"> Валуй </option> <option value="Ураева"> Ураева </option> <option value="Козинка"> Козинка </option> </select> </p>
<p id="leftbold"> Шаг 2: </p> <form name="form1"> <fieldset> <legend> Ваши предложения </legend> <p> Если Вы на нашем сайте не нашли нужную Вам информацию, Вы можете написать об этом в комментарии, а также предложить, что ещё можно разместить на сайте. Мы обязательно рассмотрим Ваши предложения. </p> ФИО:<br/> <input type="text" name="yourfio" size="30"/> <br/> <br/> <input type="radio" name="Sex" value="Мужской"/> Mужчина<br/> <input type="radio" name="Sex" value="Женский"/> Женщина<br/> <br/> Комментарий:<br/> <textarea name="comment" id="comment" cols="48" rows="8"></textarea> <br/>
<br/> Также Вы можете прикрепить документ: <br/> <input name="send_f" type="file" size="30" maxlength="60"/><br/> <br/>
</fieldset> </form>
<p style="text-align:center"> <a href="javascript:void(0)" onClick="Check_all();"><img src="блокнот.png" title="Щёлкните по изображению, чтобы узнать Ваши введённые данные" alt="Блокнот" align="center" width="60" height="60" /> Проверить введённые данные</a> </p>
<form> <p style="text-align:center"> Оцените работу сайта: <input type="image" src="отлично1.jpeg" name="river1" align="middle" title="Отлично" width="100" height="100" onClick="OpenDoc();"> <input type="image" src="хорошо.jpg" name="river1" align="middle" title="Хорошо" width="120" height="100" onClick="Good();"> <input type="image" src="плохо1.jpg" name="river1" align="middle" title="Плохо" width="100" height="100" onClick="Bad();"> </p> </form>
</body> </html>
Стили css h1 { text-align: center; font-family: Monotype Corsiva, Arial; color: #BA0606; font-style:italic; }
h2{ text-align: center; background-color: #FAD899; color: #E967FA; }
body { background-image:url(romashka.jpg); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:link { color: #0000d0; }
a:visited { color: #900060; }
a:active { color: #AC37C6; }
.bold24{ font-size:24px; font-weight:bold; text-align: center; }
.tfirst { border:1px none #9F3207; border-collapse:separate; width:100%; height:100%; }
#line{ border-bottom-style:ridge; border-bottom-color:red; border-bottom-width:2mm; }
p { text-align: justify; font-size:24px; text-indent:60px }
ul.square{ list-style-type: square; font-size:24px; }
.leftimg{ float:left; margin: 5px 40px 50px 5px; width:150px; height:110px; }
.rightimg{ float:right; margin: 5px 5px 40px 30px; width:180px; height:130px; }
.kursiv{ font-style: italic; }
#leftbold{ font-size:24px; text-align: left; font-weight:bold; text-indent:0px }
ol.size24{ font-size:24px; }
.sizeimg{ width:60%; height:60%; }
.sizemap{ width:600px; height:400px; }
.like_p{ text-align: justify; font-size:24px; text-indent:60px }
#topline{ border-top-style:ridge; border-top-color:red; border-top-width:2mm; }
.vkl{ float:left; width:189px; height:28px; background:#94D354; color:#B22842; font-size:20px; border-right:1px solid white; padding-left:10px; }
#content{ width:600px; height:100px; background:#57AE01; }
.selected{ background:#57AE01; }
#green_sk{ width:100%; height:100px; background:#6FC14E; }
.white_flower{ float:left; width:80px; height:80px; background-image:url(flowers6.png); margin:1px; }
/*КАРУСЕЛЬ!!!!!!!!!!!!!!!!*/
.b-carousel { width: 948px; /* ширина всего блока */ margin: 50px auto; }
.h-carousel-wrapper { width: 888px; /* ширина области карусели */ position: relative; overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */ margin: 0 auto; /* выравниваем по центру относительно родительского блока */ }
.h-carousel-items { width: 10000px; /* устанавливаем большую ширину для набора элементов карусели, чтобы в неё всё поместилось */ position: relative; /* позиционируем блок относительно основной области карусели */ }
.b-carousel-block { float: left; /* выстраиваем все элементы карусели в ряд */ width: 210px; /* задаём ширину каждого элемента */ padding: 5px 6px; /* делаем отступы, чтобы элементы не сливались */ }
.a-carousel-image-link { /* тут чисто оформление содержимого */ display: block; width: 206px; height: 150px; overflow: hidden; border: 2px solid #fff; }
.b-carousel-button-left,.b-carousel-button-right { width: 28px; /* задаем ширину кнопок */ height: 30px; /* задаем высоту кнопок */ position: relative; top: 60px; /* позиционируем кнопки */ cursor: pointer; /* делаем кнопкам курсор в виде "пальца" */ }
.b-carousel-button-left { float: left; /* выравниваем левую кнопку по левому краю */ background: url(strelka22.PNG); /* картинка с левой кнопкой */ }
.b-carousel-button-right { float: right; /* выравниваем правую кнопку по правому краю */ background: url(strelka11.png); /* картинка с правой кнопкой */ }
/*Конец КАРУСЕЛИ!!!!!*/
JavaScript.js(MyJS.js) function Back(){ history.back(); }
function Next(){ history.forward(); }
function Login(){ var log=document.avtor.login.value; alert("Ваш логин:"+log+"!"); }
function Check_all(){ var str= prompt("Введите, что бы Вы хотели узнать о выбранной вами реке:"); var params="menubar=yes, location=yes, resizeble=yes, scrollbars=yes, status=yes, height=230, width=420"; var NewWin=window.open('',"NewWin", params); var hstr="<html><head><title>Ваши введённые данные</title></head><body bgcolor=#D6C2FA>"; NewWin.document.writeln(hstr);
NewWin.document.writeln("<h3><center>Ваши оставленные данные</center></h3>");
var log=document.avtor.login.value; NewWin.document.writeln("<p>Ваш логин: \""+log+"\"</p>");
var objSel = document.getElementById("riverID"); if (objSel.selectedIndex!= -1) { NewWin.document.writeln("<p>Вы выбрали реку: \""+objSel.options[objSel.selectedIndex].value+"\"</p>"); }
NewWin.document.writeln("<p>Вы хотете узнать следующую информацию о реке: \""+str+"\"</p>");
NewWin.document.writeln("<b><em>Раздел Ваши Предложения:</em></b>");
var fio=document.form1.yourfio.value; NewWin.document.writeln("<p>Ваше ФИО: \""+fio+"\"</p>");
var elements = document.getElementsByName("Sex"); for (var i=0; i<elements.length; i++) { if (elements[i].checked) { NewWin.document.writeln("<p>Ваш пол: \""+elements[i].value+"\"</p>"); } }
var com=document.getElementById('comment').value; NewWin.document.writeln("<p>Ваш комментарий: \""+com+"\"</p>");
var fstr=" </body></html>"; NewWin.document.writeln(fstr); }
function checkbox() {
for (i=0; eval("document.information.move_" + i + ".checked == false"); i++);
document.write (i); }
function GetElements(name)<!--для радио-кнопок--> { var elements = document.getElementsByName(name); for (var i=0; i<elements.length; i++) { if (elements[i].checked) { return elements[i].value; } } }
function Comment(){ var com=document.getElementById('comment').value; alert(com); }
function Hello(){ alert("Добро пожаловать на главную страницу!"); }
function OpenDoc(){ var params="menubar=yes, location=yes, resizeble=yes, scrollbars=yes, status=yes, height=100, width=132"; var Great=window.open('',"Great"); if (confirm("Вы хотите открыть Отлично.html (Ok) или ОценкаОтлично.html (Отмена)")) {Great.location="Отлично.html"; } else {Great.location="ОценкаОтлично.html"; } }
function Good(){ alert("Спасибо за Вашу оценку!"); }
function Bad(){ alert("Спасибо, что объективно оценили работу сайта. Будем исправлять недочёты."); }
function ChangeWeight(){ ter.style.fontSize="45px"; ter.style.color="#FF8603"; }
function ChangeWeightOther(){ ter.style.fontSize="33px"; ter.style.color="#2504B9"; }
function show(n){ var e1=document.all['g1'].style; if(n==1) e1.visibility='visible' else e1.visibility='hidden' }
function addStyle1(){ $("#st1").css("background", "#4FDB5F"); }
function addStyle2(){ $("p.withBorder").css("border", "5px dotted #0A02A0"); }
function addStyle3(){ $("#st1, #st3").css("fontWeight", "bold"); }
function addStyle4(){ $("#theory > *").css("border","3px double #62117A"); }
function addStyle5(){ $("form input").css("border","1px inset red"); }
function addColor1(){ $(":text,:password,:file").css("background", "#E6C9F8"); }
function addStyle6(){ $(":image").css("border", "4px ridge #A00A62"); }
function addColor3(){ $(":button").css("background", "#F18603"); }
function addColor2(){ $("tr:even").css("background-color", "#AEE1FA"); $("tr:odd").css("background-color", "#D0F8CE"); $("td:gt(2)").css("color", "blue"); $("tr:first").css("font-style", "italic"); }
function addStyle7(){ $("p:contains('вод')").css("text-decoration", "underline"); }
function addStyle8(){ $("input:enabled").css("color", "green"); }
function chang(s){ $('.selected').removeClass('selected'); $(s).addClass('selected'); }
function addHtml(){ var tp1=$("#song1").text(); $("#song2").text(tp1); }
function addWhiteSquare(){ $("#green_sk").prepend("<div class='white_flower'></div>"); }
function addSpisok(){ var jq=$('#user_text').val(); $('#jq').append('<li>'+jq+';</li>'); }
$(document).ready(init);
function init(){ $('#proh').bind('change', desc); }
function desc(){ var op=$('#proh').val(); switch (op) { case '1': $('#desc').text('Река Донецкая Сеймица, являясь левым притоком реки Сейм, берет своё начало на отрогах Среднерусской возвышенности в хуторе Муравка Белгородской области. Делая дугу, река с южного направления постепенно переходит на северное и вливается в Сейм в районе пос. Дежевка.'); break;
case '2': $('#desc').text('Длина реки составляет 31 км, площадь водосборного бассейна 279 км². Исток реки расположен западнее села Коньшино Губкинского района Белгородской области,в балке Большой Коньшинский Лог. Река Ольшанка впадает в реку Оскол в 345 км от устья последней в хуторе Заречное Чернянского района. Имеет приток Сухая Ольшанка, который впадает в нее в селе Кочегуры Чернянского района.'); break;
case '3': $('#desc').text('Корень — река в Белгородской области России, правый приток реки Нежеголь бассейна Северского Донца. Протяжённость реки от истока до устья — 70 км, площадь бассейна 768 км². Исток реки расположен между сёлами Новосёловкой и Коломыцевым в Прохоровском районе. Река протекает по трём районам: Прохоровскому, Корочанскому и Шебекинскому. При впадении реки Корень в реку Нежеголь в живописной долине расположен город Шебекино.'); break; } }
$(document).ready(init1);
function init1(){ $('li').hover( function(){$(this).css("background-image", "url(сиреневый.gif)");}, function(){$(this).css("background-image", "url(pinkbg.gif)");} ); }
function hideImg(){ $('#val,#uraeva,#koz').hide(); }
function showImg(){ $('#val,#uraeva,#koz').show(); }
function slideToggleImg(){ $('#gray').slideToggle(7000); $('#vors').slideToggle(5000); $('#loz').slideToggle(3000); }
function fadeOutImg(){ $('#olsh').fadeOut(5000); }
function fadeInImg(){ $('#olsh').fadeIn(5000); }
function fadeToImg1(){ $('#seym').fadeTo(4000, 0.3); }
function fadeToImg2(){ $('#koren').fadeTo(5000, 0.5); }
//КАРУСЕЛЬ!!!!!!!!!!!!!
$(document).ready(function(){ $(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию: $(".h-carousel-items").animate({left: "-222px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд. setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только послезавершения анимации. $(".h-carousel-items.b-carousel-block").eq(0).clone().appendTo(".h-carouselitems"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели $(".h-carousel-items.b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели $(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели }, 300); }); $(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию: $(".h-carousel-items.b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); //выбираем последний элемент набора, создаём его копию и помещаем в начало набора $(".h-carousel-items").css({"left":"-222px"}); // устанавливаем смещение набора -222px $(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку $(".h-carousel-items.b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его });});
//Конец КАРУСЕЛИ!!!!!!!!! Не нашли, что искали? Воспользуйтесь поиском:
|