5%
|
|
Код:
<div id="page-wrap">
<div id="home-button" class="button">
<img src="http://funkyimg.com/i/GK4u.png" alt="about" class="button">
</div>
<div id="about-button" class="button">
<img src="http://funkyimg.com/i/GK4t.png" alt="about" class="button">
</div>
<div id="contact-button" class="button">
<img src="http://funkyimg.com/i/KxYk.png" alt="contact" class="button">
</div>
<div class="clear"></div>
<div id="content">
<div id="home">
<p><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание</title>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 4px 0; /* Отступы вокруг картинки */
}
.centerimg {
float:center; /* Выравнивание по левому краю */
margin: 2px 2px 2px 0; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<p><img src="http://s8.uploads.ru/PJWck.png" alt="Казино-отель Caesars" width="200" height="137" class="leftimg">
Город на северо-востоке США, в штате Нью-Джерси, известный своими казино, азартными играми, песчаными пляжами, торговыми центрами и отличным видом на Атлантический океан.Город является крупнейшим после Лас-Вегаса центром игорной индустрии, и также вместе с Лас-Вегасом одним из двух городов страны, где строительство казино разрешено на суше. Атлантик-Сити считается «игорной столицей Восточного побережья» и является вторым после Лас-Вегаса по количеству казино. Атлантик невозможно представить без знаменитой набережной, вдоль которой расположены сразу 8 больших отелей-казино. Вымощенная деревянными досками набережная, носящая название boardwalk, имеет длину более 6 км. Именно здесь сконцентрированы основные городские достопримечательности, развлечения, ночная жизнь, заведения питания и магазины. Немаловажно, что в то время как все большее число пляжей по соседству становятся платными, пляжи Атлантик-Сити не требуют платы за вход.
<img src="http://funkyimg.com/i/GK4K.png" alt="Климат" width="583" height="70" class="centerimg"></p>
</body>
</html></p>
</div>
<div id="about">
<p><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание</title>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 4px 0; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<p><img src="http://s8.uploads.ru/ZNslt.png" alt="Казино-отель Caesars" width="200" height="137" class="leftimg">
Атлантик-Сити ежегодно посещают около 35 миллионов туристов. Вся экономическая и деловая жизнь города базируется на игорном и гостиничном бизнесе, а также на туризме и индустрии развлечений. Кроме того, здесь регулярно проводятся всевозможные международные выставки и конференции. Как практически в любом игорном городе, в городе достаточно высок уровень преступности, что связанно с наплывом огромного количества разного рода мошенников. Кроме того, здесь существует резкий контраст между туристическими районами и бедными кварталами.Особенно это ощущается в «черных» кварталах, жители которых зачастую проявляют неоправданную агрессию. В связи с этим настоятельно рекомендуется избегать ночных прогулок в одиночку и сомнительных знакомств, а также внимательно следить за своими личными вещами. Поскольку Атлантик-Сити представляет собой «город-казино» цены на его недвижимость завышены примерно на 30 % по сравнению с рыночной ценой.</p>
</body>
</html> </p>
</div>
<div id="contact">
<p><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание</title>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 4px 0; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<p><img src="http://s9.uploads.ru/rDo8x.png" alt="Мафия" width="200" height="137" class="leftimg">
Город разделают между собой 3 влиятельные семьи: Веттори - криминал, Дрейки (Дармоди) - темные лошадки и Бредли - политика. Веттори - знамениты своими не стандартными и не всегда честными методами работы. Глава семейства Веттори на протяжение многих лет выстраивал свой бизнес, зачастую грязный, нелегальный с примесью алых капель крови и пустых гильз на асфальте. Дрейки - крупная семья разбросанная по всему миру. Поговариваю, замешанные как в политике и в экономике, так и шоу-бизе. Куда более законопослушные, на но, что они способны на самом деле и как далеко могут зайти в погоне за властью неизвестно никому. Бредли - правящая семья, известны в политических кругах, наведу и всегда при параде, но обложка этой американской мечты, скрывает не менее грязные способы борьбы за власть. Не имеют союзников, всегда сами по себе и готовы бороться до последнего. Три семьи, так непохожи друг на друга, и так схожи во многих взглядах, что мешает им существовать в мире и покое друг с другом? Ответ один. Власть!
</p>
</body>
</html></p>
</div>
</div>
</div>
<style>
.clear {
clear: both;
}
#page-wrap {
width: 600px;
background: #fae1bd;
margin: -18px auto;
padding: 20px 11px;
border-bottom: 7px solid #f49712;
}
.button {
float: left;
margin: auto auto 10px auto;
}
#home {
display: block;
padding: 10px 10px 3px 10px;
background: #7ab8ff;
}
#home-button {
opacity: 1.0;
border-bottom: 1px solid #7ab8ff;
}
#about {
display: none;
padding: 10px 10px 3px 10px;
background: #81cd81;
}
#about-button {
opacity: 0.5;
border-bottom: 1px solid #81cd81;
}
#contact {
display: none;
padding: 10px 10px 3px 10px;
background: #e99556;
}
#contact-button {
opacity: 0.5;
border-bottom: 1px solid #e99556;
}
</style>
<script type="text/javascript">
$(function(){
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){
$clicked = $(this);
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
var idToLoad = $clicked.attr("id").split('-');
$("#content").find("div:visible").fadeOut("fast", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
</script>