Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
17 января 2018
10:01
Вход Регистрация Забыли пароль ?

webinformatic - Как создать игру ? - Пишем игровой движок с нуля - DXUTMainLoop - цикл работы DirectX-приложения
Как создать игру ? - Пишем игровой движок с нуля - DXUTMainLoop - цикл работы DirectX-приложения [Содержание]  [Назад]  [Далее] Итак, если с общей схемой работы игрового движка Вам теперь всё ясно, то будем погружаться дальше. :)))
подробнее...

Теги

сайты, игры, дизайн, продвижение, php, html, css, my sql, c++, delphi, photoshop, 3ds max, fl studio, трекерская музыка, уроки

Статьи сайта

Robocop | ZX Spectrum | arcade game | Ocean Software Ltd, 1988

I, Ball | ZX Spectrum | arcade game | Firebird Software Ltd, 1987

Cray 5 | ZX Spectrum | arcade game | RetroWorks, 2011

Regeners, The | ZX Spectrum | arcade game | Reserve Co, 1995

Rolling Thunder | ZX Spectrum | arcade game | US Gold Ltd, 1988

Walker | ZX Spectrum | arcade game | Alien Factory, 1996

Mikie | ZX Spectrum | arcade game | Imagine Software Ltd, 1985

Batman: The Caped Crusader | ZX Spectrum | arcade game | Ocean Software Ltd, 1988

Barbarian | ZX Spectrum | arcade game | Melbourne House, 1988

Рекламодателям | Advertisers

Humphrey | ZX Spectrum | arcade game | Zigurat Software, 1988

TV-Game | ZX Spectrum | arcade game | Weird Science Software, 2004

Sgt. Helmet Zero | ZX Spectrum | arcade game | Ubhres Productions, 2009

Byte Me | ZX Spectrum | arcade game | Jonathan Cauldwell, 2011

Day in the Life, A | ZX Spectrum | arcade game | Micromega, 1985

Muncher, The | ZX Spectrum | arcade game | Gremlin Graphics Software Ltd, 1988

Microbot | ZX Spectrum | arcade game | Softek International Ltd, 1983

Gunfighter | ZX Spectrum | arcade game | Atlantis Software Ltd, 1988

Blizzard's Rift | ZX Spectrum | arcade game | Jonathan Cauldwell, 2007

MASK II | ZX Spectrum | arcade game | Gremlin Graphics Software Ltd, 1987

Navy Moves | ZX Spectrum | arcade game | Dinamic Software, 1988

Rastan | ZX Spectrum | arcade game | Imagine Software Ltd, 1988

Doom | ZX Spectrum | arcade game | ,

NARC | ZX Spectrum | arcade game | Ocean Software Ltd, 1990

Cybernoid II: The Revenge | ZX Spectrum | shooter game | Hewson Consultants Ltd, 1988

Marauder | ZX Spectrum | shooter game | Hewson Consultants Ltd, 1988

Operation Wolf | ZX Spectrum | shooter game | Ocean Software Ltd, 1988

Astro Marine Corps | ZX Spectrum | shooter game | Dinamic Software, 1989

Beach-Head II | ZX Spectrum | shooter game | US Gold Ltd, 1985

Midnight Resistance | ZX Spectrum | shooter game | Ocean Software Ltd, 1990

St. Dragon | ZX Spectrum | shooter game | Storm Software [2], 1990

Commando | ZX Spectrum | shooter game | Elite Systems Ltd, 1985

P-47 Thunderbolt | ZX Spectrum | shooter game | Firebird Software Ltd, 1990

Sea Dragon | ZX Spectrum | shooter game | Andrew Zhiglov, 2010

Light Force | ZX Spectrum | shooter game | Faster Than Light, 1986

Dark Star | ZX Spectrum | shooter game | Design Design Software, 1984

Alien Highway | ZX Spectrum | shooter game | Vortex Software, 1986

F.I.R.E. | ZX Spectrum | shooter game | Fuxoft, 1988

Action Force II | ZX Spectrum | shooter game | Virgin Games Ltd, 1988

Mr. Heli | ZX Spectrum | shooter game | Firebird Software Ltd, 1989

Tank | ZX Spectrum | shooter game | Ocean Software Ltd, 1987

Terra Cresta | ZX Spectrum | shooter game | Imagine Software Ltd, 1986

Zybex | ZX Spectrum | shooter game | Zeppelin Games Ltd, 1989

игры онлайн | games online | play online | zx-spectrum games

Lunattack, 3D | ZX Spectrum | shooter game | Hewson Consultants Ltd, 1984

Skyfox | ZX Spectrum | shooter game | Ariolasoft UK Ltd, 1985

Cerius | ZX Spectrum | shooter game | Atlantis Software Ltd, 1988

Beach-Head | ZX Spectrum | shooter game | US Gold Ltd, 1984

Airwolf II | ZX Spectrum | shooter game | Hit-Pak, 1987

Vectron | ZX Spectrum | shooter game | Insight Software, 1985

Game Over | ZX Spectrum | shooter game | Dinamic Software, 1987

Eliminator | ZX Spectrum | shooter game | Hewson Consultants Ltd, 1988

Coracle | ZX Spectrum | shooter game | Cronosoft [2], 2011

Space Harrier II | ZX Spectrum | shooter game | Grandslam Entertainments Ltd, 1990

Black Hawk | ZX Spectrum | shooter game | Creative Sparks, 1984

Predator 2 | ZX Spectrum | shooter game | Image Works, 1991

Уроки css - атрибут position

Сегодня Мы с Вами рассмотрим применение атрибута position

[к содержанию]

Приготовьтесь много экспериментировать, потому что настоящая верстка - это эксперименты, пробы и ошибки.

Особенно когда речь заходит о кроссбраузерности - т. е. одинаковом результате в разных браузерах.

Сначала приведу пример использования -



Красный блок - это DIV, описанный таким кодом -

<div style="float: left; width: 400px; height: 180px; background: #cc0011;">
</div>


Т. е. float: left - привязывание блока к левому краю контейнера (блока, его содержащего) - в нашем примере таким контейнером является внешний DIV, в котором находится данная статья.

Далее думаю понятно: width: 400px - ширина блока 400 пикселей
height: 180px - высота - 180, сразу дам совет если ваш блок планируется "резиновым" по высоте, тогда не указывайте атрибут height.

Соответственно цвет фона для блока - красный - background: #cc0011

Внутри красного блока DIV как видим расположен грязно-желтого цвета блок DIV.

Чтобы он остоял от левого края своего контейнера на 140 пикселей и от верхнего края на 50 пикселей зададим такой код -

<div style="position: relative; top: 50px; left: 140px; z-index: 1000; width: 200px; height: 80px; background: #aacc00;">
</div>


С шириной и высотой, а также цветом фона думаю Вам всё понятно, а вот новые атрибуты требуют пояснения

position: relative - задает расположение блока DIV "относительным" - т. е. смещения указанные у left и top задают относительное смещение внутри "родительского" контейнера - т. е. контейнера в котором расположен наш желый блок - по отношению в внешнему - красному блоку.

И вот тут таится главная ошибка всех НАЧИНАЮЩИХ ВЕРСТАЛЬЩИКОВ -

ИСПОЛЬЗОВАНИЕ position ТАМ, ГДЕ ЭТО СОВСЕМ НЕ НУЖНО.

!!! ПРАВИЛЬНО РЕШЕНИЕ ТАКОВО - используйте position там, где можно обойтись обычным float + margin. !!!

Т. е. блоки нужно выравнивать друг относительно друга с помощью атрибута margin - тот же самый пример более правильно записать так -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 140px; width: 200px; height: 80px; background: #aacc00;">
</div>

</div>


Внешне как видите никакой разницы. Но если использовать несколько блоков DIV внутри одного и того же контейнера, то разница будет ОЧЕНЬ ОЩУТИМА.

Посмотрим пример -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 60px; background: #22cc00;">
</div>

<div style="float: right; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

</div>


Пока всё просто :))))

А что если бы было вот так ?









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Как видим маленькому коричневому прямоугольничку не хватило места в контейнере и он буквально "выпал" из него.

Использование position позволяет избежать такого поведения -









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Но как видите приводит к тому, что места теперь уже хватило лишь 1 блоку.

Остальные блоки оказались совсем не там, где ожидалось.

Это самый большой камень преткновения в верстке - добиться с одной стороны универсальности, а с другой - правильного расположения блоков в любых ситуациях.

МЫ ПОДОШЛИ К ГЛАВНОМУ - вы наверное уже заметили использование нового атрибута - z-index





<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>






<div style="float: left; width: 400px; height: 180px; background: #cc0011; position: relative; top: 0; left: 0; z-index: 900;">

<div style="position: absolute; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: absolute; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: absolute; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>


z-index всегда применяется совместно с position, поскольку без него просто не работает,
а используется он для позиционирования блоков по оси z - т. е. блоки с меньшими z располагаются на заднем плане, а блоки с большим z - поверх них.

Именно для такого позиционирования и правильно применять атрибут position, а во всех остальных ситуациях старайтесь обходиться простыми float + margin как было показано выше или вообще сверстать нужную часть страницы не блоками DIV, а при помощи TABLE (таблицы).

Считать, что "ДИВНАЯ" верстка более современна, а "ТАБЛИЧНАЯ" якобы устарела - в корне неправильно !

Почему ?

Да потому что бывают такие ситуации в верстке, когда обойтись без таблиц просто невозможно, особенно в плане поддержки очень старых браузеров, таких как IE 6, IE 5.5 или ниже.

Простой пример - красивое оформление форм - с позиционированием элементов по левому, правому краю. (см. например ФОРМУ ВХОДА нашего сайта или ФОРМУ для отправки комментариев).

Главное правило тут такое - старайтесь применять верстку DIVами, а когда это невозможно - таблицами. Тогда ваша верстка будет более универсальной и в то же время - отвечать требованиям времени.

На сегодня наш урок закончен, материала вам думаю будет достаточно и для экспериментов и для осмысления.

Удачи !

[к содержанию]

X
игра Шарики на лифте Серия 1 Разгони Лифт / Balls on Lift Level 1 Run The Lift версия 0.9.2 05.10.2016 / version 0.9.2 05.10.2016
 

Оставленные комментарии



Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
Время загрузки: 2,1023