28.10.2016, 16:59
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от krash_laiv
|
|
да хотя бы просто на 123 а там я подгоню
|
Суть в том, если прогноз для каждого ника идентичен - то нет проблем, а если разный, нужно для каждого его откуда-то брать, вот нужно либо элемент со списком на данной странице, либо список прогнозов формировать на иной странице и оттель закачивать на текущую и показывать аяксом |
|
28.10.2016, 18:54
|
|
Новичок на форуме
|
|
Регистрация: 23.10.2016
Сообщений: 9
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Гороскоп</title>
<style>
body{ background: url([url]https://avatanplus.com/files/effects/original/56c87816158ed152ff151648.jpg[/url]) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
button {
width: 300px;
height: 30px;
display: inline-block;
color: black;
font-size: 125%;
font-weight: 700;
text-decoration: none;
user-select: none;
padding: .25em .5em;
outline: none;
border: 1px solid rgb(250,172,17);
border-radius: 7px;
background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));
box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);
transition: box-shadow .2s, border-color .2s;
}
button:hover {
box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);
}
button:active {
padding: calc(.25em + 1px) .5em calc(.25em - 1px);
border-color: rgba(177,159,0,1);
box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);
}
</style>
</style>
</head>
<body>
<font size="+4" color="0B7FF1" align=center><center>Гороскоп</center></font>
<table border="0" width="1250" cellpadding="10">
<tr>
<td rowspan="3" width="600"><center>
<img src="http://www.teleport2001.ru/files/teleport/styles/news_node/public/images/2015/07/04/goroskop.jpg?itok=t8Adrx2Y" left="200">
</center>
</td>
<td width="200">
</center>
<font size="+4" color="0B7E1">
Фамилия
</font>
</center>
</td>
</tr>
<tr>
<td>
<button onclick="function sum (argument)" {
// body...
}" >
<center>
Александрова Анна(Дева)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Баландин Илья(Овен)
</center>
</button>
</td>
</tr>
<tr>
<td rowspan="26" align="center">
<font size="10" color="984fff44">
<h1 id="ty">
Прогноз
</h1>
</font>
</td>
</tr>
<td>
<button>
Бурданова Алёна(водолей)
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Вахрушев Евгений(весы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Гурьев Кирилл(весы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Давыденко Владимир(отсутствует дата рождения)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Ермакова Оливия(Козерог)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Игнатович Павел(стрелец)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Истомин Дмитрий(Скорпион)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Кабанова Александра(Весы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Кузмич Елена(нет даты рожедения)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Лямин Богдан(Скорпион)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Мирошниченко Станислав(Овен)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Пескова Елизавета(Овен)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Повареных Ангелина(Дева)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Полякова Полина(Рак)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Попова Юлия(Стрелец)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
ПаТиМеЙкЕр(Козерог)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Скороходов Роман(нет даты рождения)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Стариков Владимер(Рыбы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Сусанова алина(Весы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Усатов Родион(Стрелец)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Фокин Кирилл(Рыбы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Фокина Вика(Козерог)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Шнанаурин Олег(Рыбы)
</center>
</button>
</td>
</tr>
<tr>
<td>
<button>
<center>
Яшкова Ксения(Телец)
</center>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
стрелец-Ваши партнёры в данный период в большой степени зависят от вас.Не будьте слишком жестки, проявите по отношению к ним понимание, избегайте вспыльчивости, иначе в будущем (не таком уж и далеком) сами выроете себе яму и дадите против себя оружие.Если тот (та), кто находится с вами рядом, отличается повышенной обидчивостью, вы рискуете рано или поздно остаться в одиночестве.Вплоть до вечера для вас сохраняется опасность ссор, скандалов, потерь, недомоганий, велика и вероятность того, что вы сами спровоцируете негативную ситуацию.
Рак-Избегайте чересчур активного включения в чужие дела, осторожнее оказывайте услуги другим людям, иначе этот день доставит вам не только положительные, но и неприятные ощущения.В это время возрастает риск обострения заболеваний, особенно в результате переутомления, отравления, неправильного обращения с техникой. Отсутствие деликатности также способно вам навредить, поэтому не наступайте слишком грубо на чужие больные мозоли. Сознание своей правоты, как и понимание чужих ошибок, ещё не дает вам права вести себя резко, грубо, вызывающе.
Козерог-Ваши отношения с родственниками, деловыми партнёрами, коллегами, помощниками, клиентами, а также с идеологическими противниками в эти сутки могут обостриться до предела. Если вы успели обзавестись тайными врагами и недоброжелателями, они не преминут активизироваться: например, начнут плести против вас интриги или попытаются исподтишка ударить в самоё больное место. Рекомендуется внимательнее следить за ситуацией и вовремя принимать нужные меры. Не исключено также обострение хронического заболевания.
овен-Ваша удачливость в этот период не подлежит сомнению. Однако в данные сутки настоятельно рекомендуется принять меры, предохраняющие от внезапных ударов из-за угла.Вы можете столкнуться с предательством людей, которых уважаете, с непоследовательностью, авантюризмом и нечестностью бизнес-партнёров, особенно если ведете дела в других городах и странах.Для вас также велик риск получить дезинформацию. Это неподходящий момент для начала нового важного дела, для отправки писем, для оформления виз и проездных документов.
Дева-Партнёр по браку или деловой компаньон в эти сутки способен повести себя странным образом. Не исключено, что он (она) будет демонстрировать вам главным образом негативные стороны своего характера. Взаимное понимание в эти сутки крайне затруднено. Приведя в пользу своего мнения множество аргументов, вы рискуете так и остаться непонятым. Как вам, так и вашим близким в это время свойственны язвительность, критичность, быстрая смена настроений. Решение домашних проблем потребует и физического напряжения, и эмоциональной отдачи.
Рыбы-Фортуна на вашей стороне.Если вы знаете, чего хотите, преследуете достойные и оригинальные цели, то в конце концов победите (возможно, в эти сутки, а возможно, и на следующий день). Быстрая смена целей и настроений, разнообразные острые переживания могут привести вас к эмоциональному перевозбуждению и его логическому следствию - физическому или душевному переутомлению. Если вы хотите оставаться в форме до позднего вечера, постарайтесь ещё в начале дня правильно рассчитать свои силы, не стремитесь к невозможному.
Скорпион-Какие бы неприятности ни поджидали вас на пути к цели, вы можете надеяться на удачное завершение предпринятого дела. Однако удовлетворительных результатов вам придётся подождать. Возможно, вы увидите положительные плоды своих усилий лишь на следующий день.В данные сутки любые поездки, покупки, переговоры, авантюры могут оказаться сопряжены с беспокойствами, потерями, стрессами, а при дополнительных отягчающих обстоятельствах - и с прямой опасностью.От начала нового дела желательно воздержаться.!-->
вот полное содержание скрипта
|
|
29.10.2016, 03:40
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от krash_laiv
|
|
вот полное содержание скрипта
|
Что-то не все прогнозы.
Не надо так делать - блок Прогноз где-то внизу и виден только после прокрутки, а в него надо помещать. Уж тогда напротив фамилии должно помещаться, а не понять где. Да и вообще, и таблицы тут не нужно, и куча элементов, вместо которых вообще-то должен работать CSS.
Читайте о стилях. Список фамилий можно вывести и списком, а прогноз загружаемый для каждого при загрузке страницы, показывать/скрывать под ними.
Вместо (Дева) и т.п. можно отображать соответствующие знаки гороскопа, как в примере для двух.
Весь код управления с применением jQuery, это несколько строк:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body{
background: url(http://www.rudebox.org.ua/demo/animated-background-headers/css/../img/demo-1-bg.jpg) fixed;
background-size: cover;
font: 1em Arial;
}
h1 {
color: #fff;
text-align: center;
text-shadow: 0 0 .4em #000, 0 0 1em #000, 0 0 2em #000;
font: 3.5em serif;
}
ul {
width: 100%;
padding: 0;
list-style: none;
background: none;
}
li {
width: 50%;
min-height: 58px;
padding: 20px 20px 20px 90px;
margin: 10px auto;
background: rgba(255, 255, 255, .75);
border-radius: 5px;
}
.horo {
background-repeat: no-repeat;
background-position: 20px 20px;
}
.virgo {
background-image: url(data:image/gif;base64,R0lGODlhMgA6ALMAAKGQbfvrs//+2wICAurRm/Ddqm9jSllOO7alfs+1g+DEjod5XTUwJc3Dnh0aFUY+MCH5BAAAAAAALAAAAAAyADoAAAT/0A1Jp6346sy1HWAojmRpnqKEruCzLCpLxnJ5NACACEjtyw/BIcQQACY62smh/BWOIoNgURAIGiDHArD41RoLxnDSsAoCgsIEbTXMmj924HUOBKo9dKGKrTGzDCdSZnV2aAwAaXsBBEp/JAcBD5FuJ2WGdgVoCFJ7iwVwJgtWDysOl5l3AQ2anpqNI4+xDgYGDoErUqqema6rPwjBCKEiib13rp5GbyIPpRNWgbeWip+aAgQF2QRTLAs9IA1Yt10lO63J4oza3JUpNAU9pQZdOgjlUWfJe0IDewTZAuAy8SCRgYIDGJQCEK+BrRBBkO3rl+BONlDMJkjY0eMPRwaP/4JU2ydpAAJGBAIkkMGAFRYGgXAYGDjKikRPASVUBBgAyqwUIOgtaDAmCxUrCRic/MdOWzh2c344MEP0WxUrRLO80qYtgAIQ2RqkdPfOxFVCKmc2QwYQYIFx7LINrJEoHgC1JRqg/JftKwNGCgDCkRVrrokdbhskeOv0gdfACoh5EXHOLaemDiI1CNwn42TEi18xWJwt8+N4k1cACOBmgde3DFwrkBRJgQLUJQj76TYAwMoBBw44nj3Jq1ifqUkYQIArh1EGgQsscExgMfKyXsT8eRECACJtPaCDT34CJpODIQwc+BuYQmBwnn+AVPiASaDYAxJkG+M6geTJ8wl3Hv8IMBhwRzkMEBBZbv8RdMt6TJSj3gAA/dZbAYaRB9MQk4DUmwT4UUEALgYWhZ0PtZTywEw6laIFCLNV4oB05I1wUBcHHLSRG/W1oFJ3Fp4IxExdLCBcIN8AFwMl3WU42UEHFLliIAcQMIAL7qwI1E8+HHHXADCE4cADCsC0hYk1QnJEUr315oxSRRowoh8NdvdAgld2wYkzB3wFQHAYpRnLSr6B6QYnUVI45koGLGhKnWAeQaN3JoWxUgJdKDDEAfAJOkCZfwUCThJf9QnmbwihoJsJjZpkJT0ERpbAECPO+EyighZwgANRIVDfiiM6h8Ca8MFqwqokAOBnAEwwmiPEhq1WeYuuISCA5g8HCABTAD049+cBuj4AigMEHGphn04iS0RP+QnkTykETFKALQQMkcBKCRZ172QzvsouAFYmqBABADiAaW/x9nYuwfGNMFtCXq1xhIG3ENDDAowy/KmMCChA1gonrQHLakMAPIEC+Pp1L5WONjqrkCGYyqt/Axg46koGK1AKc70pIKFPjXa6RLOVMFBAmS1UgkC5wG2KsgrrEUGDulcuWXAJcsoIwgEJyAhpjcjW+UgHZG+Qhdllq+BABAA7);
}
.aries {
background-image: url(data:image/gif;base64,R0lGODlhMgA6ALMAAP70xPfntgICAu3crJmPcmVeS///4K2igdbPrMK1j9DBmDc0KuXRn01JPIB3YB0bFyH5BAAAAAAALAAAAAAyADoAAAT/8AlJp6346sy1FWAojmRpnmiqruUjoU0hL2y9Pgdg7PugEI2P7fQaOXiAZNIQGOwOQ+Io2NgplQaF4LBzRFmIx/G6RAgIBh3hayoKAAs0Wc1dAtxsIchQGJMHdVgFeSgAB1VkBgiBS16EIC4iRw0JaVgJcksGNI8mDjROWAgNVwZrnZAtOqVxaYqoqSUKllg+rkGwLYyJOlC5egVWmnMGuLB4VTwBBwnExr8iCGkODws5iQPPj5EiC45ctKWK2isLgCzJc+IBBJwsCwaOsSSZWOo8gAULeCQPBgwh+IWYVSoBAnWa0gRIcMCBPm4guJhJ8WBVowIIAwAIoDGhJR8N/xUk0RKwBDws7YRd0ciSo8uX9nTIEyjgpI4BD6QpabnxpcsBQAc0ARqAgQJ5KGwW87Ozp88mHIUGBQqApAiI3VwhMGeJo9OnUqdOLUqzhDQ+VVj2/BoVatipDIq2MAFvU6aWYN2KHcCAL4AE/U4s6PPACV6fUofu7cuAAQCkKgqYQfT0p+LFjPsGcHf1BIKjTJIgHno5aObGhuYKVph3r2m+fBtr5lwDTYB4R9yWBnpatuNT/cqCcMLnze7XsXnLHkDbRoEBgwSIfEtUdFGjypehEA6CgIIDgw0EvTKAQIEHBDgeYhwAcmcVdROYg+oQSJEFHLUUKNq+k21rGzFAU9ozJCkQly9tlJNEAw4kAZgJOfiSXmPNzaNCJQ0skARwJOTgiANNPPjIEeclEV0/InHigFAnBsdCMINoRA4IpIh4QABWPVJFEI5VeAYA0T0Ql3sjcBcCKTTEJZCGAIHQYI6qrYCRBHyZ0EyQCgQwIxsEDDDBXyU0KCIBqalg5HBQkMIhjRxFtx8DPr4HH5ACkFhklg8+F0CLjyzgGAgiaSPSYwI0MAAAaxLB3TVQYCTgVQ4QQAAFD5x3TEdBaJRoJ9w9wCAIhEFzJjSk/jJqqQG90MGqG7TKKgcRAAA7)
}
.horo:hover {
background-color: rgba(255, 255, 255, .85);
}
h2 {
margin: 0;
font-size: 1.3em;
}
h2 a {
float: right;
cursor: pointer;
font-size: .7em;
}
.forecast {
display: none;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var horoscope = {
//Овен
'aries' : 'Ваша удачливость в этот период не подлежит сомнению. Однако в данные сутки настоятельно рекомендуется принять меры, предохраняющие от внезапных ударов из-за угла.',
//Лев
'leo' : '?',
//Стрелец
'sagittarius' : 'Ваши партнёры в данный период в большой степени зависят от вас.Не будьте слишком жестки, проявите по отношению к ним понимание, избегайте вспыльчивости, иначе в будущем (не таком уж и далеком) сами выроете себе яму и дадите против себя оружие',
//Телец
'taurus' : '?',
//Дева
'virgo' : 'Партнёр по браку или деловой компаньон в эти сутки способен повести себя странным образом. Не исключено, что он (она) будет демонстрировать вам главным образом негативные стороны своего характера.',
//Козерог
'capricorn' : 'Ваши отношения с родственниками, деловыми партнёрами, коллегами, помощниками, клиентами, а также с идеологическими противниками в эти сутки могут обостриться до предела.',
//Близнецы
'gemini' : '?',
//Весы
'libra' : '?',
//Водолей
'aquarius' : '?',
//Рак
'cancer' : 'Избегайте чересчур активного включения в чужие дела, осторожнее оказывайте услуги другим людям, иначе этот день доставит вам не только положительные, но и неприятные ощущения.',
//Скорпион
'scorpio' : 'Какие бы неприятности ни поджидали вас на пути к цели, вы можете надеяться на удачное завершение предпринятого дела. Однако удовлетворительных результатов вам придётся подождать. Возможно, вы увидите положительные плоды своих усилий лишь на следующий день.',
//Рыбы
'pisces' : 'Фортуна на вашей стороне. Если вы знаете, чего хотите, преследуете достойные и оригинальные цели, то в конце концов победите (возможно, в эти сутки, а возможно, и на следующий день).'
};
$(function() {
$('li.horo').each(function() {
$('<div class="forecast"/>').text(horoscope[this.className.split(' ').pop()]).appendTo(this)
});
$('ul').on('click', 'a', function() {
var b = $(this);
b.closest('li').find('.forecast').slideToggle(500, function() {
b.text(['Скрыть', 'Прогноз'][+$(this).is(':hidden')])
})
});
});
</script>
</head>
<body>
<h1>Гороскоп</h1>
<ul>
<li class="horo virgo"><h2>Александрова Анна <small>(Дева)</small><a>Прогноз</a></h2></li>
<li class="horo aries"><h2>Баландин Илья <small>(Овен)</small><a>Прогноз</a></h2></li>
<li class="horo aquarius"><h2>Бурданова Алёна <small>(Водолей)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Вахрушев Евгений <small>(Весы)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Гурьев Кирилл <small>(Весы)</small><a>Прогноз</a></h2></li>
<li><h2>Давыденко Владимир <small>(отсутствует дата рождения)</small></h2></li>
<li class="horo capricorn"><h2>Ермакова Оливия <small>(Козерог)</small><a>Прогноз</a></h2></li>
<li class="horo sagittarius"><h2>Игнатович Павел <small>(Стрелец)</small><a>Прогноз</a></h2></li>
<li class="horo scorpio"><h2>Истомин Дмитрий <small>(Скорпион)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Кабанова Александра <small>(Весы)</small><a>Прогноз</a></h2></li>
<li><h2>Кузмич Елена <small>(отсутствует дата рождения)</small></h2></li>
<li class="horo scorpio"><h2>Лямин Богдан <small>(Скорпион)</small><a>Прогноз</a></h2></li>
<li class="horo aries"><h2>Мирошниченко Станислав <small>(Овен)</small><a>Прогноз</a></h2></li>
<li class="horo aries"><h2>Пескова Елизавета <small>(Овен)</small><a>Прогноз</a></h2></li>
<li class="horo virgo"><h2>Повареных Ангелина <small>(Дева)</small><a>Прогноз</a></h2></li>
<li class="horo cancer"><h2>Полякова Полина <small>(Рак)</small><a>Прогноз</a></h2></li>
<li class="horo sagittarius"><h2>Попова Юлия <small>(Стрелец)</small><a>Прогноз</a></h2></li>
<li class="horo capricorn"><h2>ПаТиМеЙкЕр <small>(Козерог)</small><a>Прогноз</a></h2></li>
<li><h2>Скороходов Роман <small>(отсутствует дата рождения)</small><a>Прогноз</a></h2></li>
<li class="horo pisces"><h2>Стариков Владимер <small>(Рыбы)</small><a>Прогноз</a></h2></li>
<li class="horo libra"><h2>Сусанова Алина <small>(Весы)</small><a>Прогноз</a></h2></li>
<li class="horo sagittarius"><h2>Усатов Родион <small>(Стрелец)</small><a>Прогноз</a></h2></li>
<li class="horo pisces"><h2>Фокин Кирилл <small>(Рыбы)</small><a>Прогноз</a></h2></li>
<li class="horo capricorn"><h2>Фокина Вика <small>(Козерог)</small><a>Прогноз</a></h2></li>
<li class="horo pisces"><h2>Шнанаурин Олег <small>(Рыбы)</small><a>Прогноз</a></h2></li>
<li class="horo taurus"><h2>Яшкова Ксения <small>(Телец)</small><a>Прогноз</a></h2></li>
</ul>
</body>
</html>
Последний раз редактировалось laimas, 29.10.2016 в 10:17.
|
|
|
|
