Я могу рассеять отделения приблизительно страница случайным образом с помощью только HTML и CSS?
я хочу иметь поле в центре страницы и несколько полей, рассеянных вокруг, с различными размерами, случайными положениями и никаким перекрытием.
Я думаю, что это не возможно сделать только с HTML и CSS и javascript/html, DOM необходим.
Вы видели примеры этого? У Вас есть какая-либо подсказка или часть кода, который может быть полезным? Не возражайте, если это не решит целую проблему, то решение для одной из подпроблем (например, никакое перекрытие) будет полезно также!
Спасибо сопроводительный текст http://img99.imageshack.us/img99/3563/scattered.jpg
4 ответа
Если размер фиксирован, идеально центрируется диван не сложно. Хитрость заключается в том, чтобы применить негативную маржу:
#centered {
width: 400px; height: 200px;
position: absolute; top: 50%; left: 50%;
margin-left: -200px; margin-top: -100px;
}
Теперь, чтобы позиционировать другие Divs относительно этого центрированного DIV, вы используете положение: родственника .
Пример HTML Snippit:
<div id="centered">
<div id="other"></div>
</div>
и в дополнение к вышесказанному, следующие CSS:
#other {
width: 200px; height: 100px;
position: relative; top: -150px; left: 180px;
}
добавляют границу или цвет фона, чтобы лучше посмотреть на примере:
div {
border: 1px solid black;
}
, если это не статическая страница, И вы хотите рандомизировать на каждой нагрузке страницы, вы можете либо использовать JavaScript, либо некоторые сценарии серверов для создания и стилей Divs динамически.
Я не знаю, как делать флэш-взаимодействия (и мне также интересно), но для html/javascript можно использовать Chickenfoot .
И чтобы получить безголовый + скриптовый браузер, работающий на Linux, вы можете использовать Qt webkit library . Вот пример использования .
-121--1117543-Конструктор копирования имеет следующую форму:
class example
{
example(const example&)
{
// this is the copy constructor
}
}
В следующем примере показано, где он вызывается.
void foo(example x);
int main(void)
{
example x1; //normal ctor
example x2 = x1; // copy ctor
example x3(x2); // copy ctor
foo(x1); // calls the copy ctor to copy the argument for foo
}
Я предполагаю, что вы хотите рандомизировать каждую загрузку страницы, чтобы разные пользователи видели разные вещи. Если это так, это невозможно только для HTML и CSS. CSS разработан таким образом, чтобы быть детерминированным и воспроизводимым последовательным путем, что противоположно тому, что вы здесь делаете.
Однако разумным способом обойти это было бы связать таблицу стилей с динамической страницы, которая сама обслуживает случайные CSS. Например, введите следующее:
<link rel="stylesheet" type="text/css" href="styles.php"/>
, где styles.php - страница PHP, генерирующая случайный CSS.
Я не могу быть сделан только с HTML и CSS, ваши варианты:
- создать лист стиля каждый раз с помощью языка бокового сервера, такой как PHP, и подавать контент, предварительно приведенный к браузеру
- Лист стиля и модифицируйте DOM через JavaScript
как для не совпадающих деталей, вы должны сделать немного математики / геометрии: генерировать координаты для вершин, убедившись, что они не падают в ранее созданную коробку (скучно, но довольно легко ) И используйте позиции: абсолют , чтобы разместить их.
Насколько ваш вопрос идет: нет, его невозможно сделать, просто используя HTML и CSS.