ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:

Грайворонский район

⇐ Предыдущая 12

<html>

<head>

<title>Грайворонский район</title>

body {background-image:url(цветы.jpg)!important}

</style>

</head>

<body>

<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>

<tr >

<p id="st1" style="text-indent:0px; text-align:center" >Река Грайворонка </p>

</td>

<p id="st2" class="withBorder" style="text-indent:0px; text-align:center">Река Ворсклица </p>

</td>

<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>

<title>Валуйский район</title>

body {background-image:url(бабочки.jpg)!important}

</style>

</head>

<body>

<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>

<caption style="font-size:24px">Координаты рек </caption>

<tr>

<th rowspan="2">Название</th>

<th colspan="2">Координаты</th>

</tr>

<tr>

</tr>

<tr>

<td style="color:#790510">Валуй</td>

</tr>

<tr>

<td style="color:#790510">Ураева</td>

</tr>

<tr>

<td style="color:#790510">Козинка</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>

<p class="bold24"> Река Валуй </p>

<br>

</div>

<p class="bold24"> Река Ураева </p>

<br>

</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>

<title>Формы</title>

</head>

<body>

</center>

<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>

<h1 onmousedown="this.style.fontFamily='Arial';

this.style.color='#6F3D8D'" onmouseup="this.style.fontFamily='Monotype Corsiva';

this.style.color='#BA0606'"> Малые реки Белгородской области </h1>

<br>

<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>

<tr>

<td>

<div class="bold24">Авторизация</div>

<br/>

Логин:<br/>

Пароль: <br/>

<input name="remember" type="checkbox" value="yes"/> Запомнить <br/>

</form>

</td>

</tr>

</table>

<p style="text-indent:0px"> Выберите реку, о которой хотите что-либо узнать:

<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>

</select>

</p>

Ваши предложения

</legend>

<p> Если Вы на нашем сайте не нашли нужную Вам информацию, Вы можете написать об этом в комментарии, а также предложить, что ещё можно разместить на сайте. Мы обязательно рассмотрим Ваши предложения.

</p>

ФИО:<br/>

<br/>

<input type="radio" name="Sex" value="Мужской"/> Mужчина<br/>

<input type="radio" name="Sex" value="Женский"/> Женщина<br/>

<br/>

Комментарий:<br/>

<br/>

Также Вы можете прикрепить документ: <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>

Оцените работу сайта:

<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(); // выбираем последний элемент карусели и удаляем его

});});

//Конец КАРУСЕЛИ!!!!!!!!!

⇐ Предыдущая 12

Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных