fle game engine - движок для создания игр
fle game engine - движок для создания игр


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
19 октября 2017
6:37
Вход Регистрация Забыли пароль ?

megainformatic - статья Тимонина Андрея - Таймер. Выводим время игры.
[к содержанию] [другие статьи Тимонина Андрея] Таймер. Выводим время игры. автор: Тимонин Андрей дата публикации на сайте Мега Информатик: 18.11.2012 Добро пожаловат
подробнее...

Теги

создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт

Статьи сайта

megainformatic - megainformatic cms Система Управления Контентом

megainformatic - Темы для WordPress

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - Макет дизайна Вашего сайта

скачать megainformatic cms

megainformatic - Итоги 2010 года

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - как создать инсталлятор для собственной cms

megainformatic - Новости - страница 2

Нововведения в megainformatic cms

Web Администрирование

Уроки Верстки

Система автоматизированной е-майл рассылки

Система автоматизированной е-майл рассылки

megainformatic - Выгрузка файла на сайт

megainformatic - выпадающее меню на html и css

megainformatic - Использование checkbox

Краеугольная особенность работы Web-form на примере смены состояния checkbox

Технологии WEB

Технологии WEB - AJAX-запросы

Часто Задаваемые Вопросы

Продукты

Проблемы с кодировками при отображении страниц

игра Нечто: Необъяснимое Нить Накала - "в плену желаний"

Система Автоматизации Доставки Электронных Заказов megainformatic cms e-pro

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

webinformatic: Музыкальная страничка трэкера

megainformatic - Создание музыки и звука

webinformatic: Создание музыки и звука: урок 2

megainformatic - Создание музыки и звука: урок 3 - настройка Impulse Tracker для работы в WinXP

megainformatic - Создание музыки и звука: урок 4 - Введение в Mod Plug Tracker

megainformatic - Создание музыки и звука: урок 5 - Первая композиция в Mod Plug Tracker

megainformatic - Создание музыки в Impulse Tracker 2.14 - урок 6 - Ввод Нот

megainformatic - Создание музыки в Impulse Tracker 2.14 Первая мелодия

megainformatic - Создание музыки в Impulse Tracker 2.14 Настройка параметров сэмплов

megainformatic - Создание музыки и звука: теория и практика создания трэкерской музыки

megainformatic - Инструкция по оплате услуг средствами WebMoney

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)

Введение в программирование игр на С++ для платформы DirectX 9 - Первый старт

Введение в программирование игр на С++ для платформы DirectX 9 - Меняем иконку приложения

Введение в программирование игр на С++ для платформы DirectX 9 Добавляем другую модель

Введение в программирование игр на С++ для платформы DirectX 9 Программирование игр в directx. Hello, World!

Введение в программирование игр на С++ для платформы DirectX 9 Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++ (часть 2)

Урок 2 Написание Win32-приложений. Обзор стартового кода Win32-приложения. Добавление ресурса текстовая строка

Урок 3 Создание Win32-приложений. Создание меню и простых диалоговых окон.

Урок 4 Создание Win32-приложений. Стандартные диалоги. Изучение сопутствующих конструкций языка. Консольные Win32-приложения. Указатели. Ссылочный тип. Массивы.

Урок 4 часть 2 Win32. Диалог выбора цвета, смена цвета фона окна приложения

Написание приложения DirectX9c + MFC в среде MSVS 2005

megainformatic - Создание компьютерных игр на основе DirectX в среде Delphi 6, 7

megainformatic - Создание компьютерных игр на основе DirectX в среде Delphi 6, 7 - Почему избраны DX8 и Delphi ?

megainformatic - Основы IDirectMusic8 в среде Delphi6-7

megainformatic - Основы DirectInput8 в среде Delphi 7

megainformatic - Основы DirectSound8 в среде Delphi6-7

     
 

Создаем выпадающее меню средствами html + css

В данном уроке мы попробуем создать следующее выпадающее меню - popup menu

 
     
 

Первым делом подключаем к странице файл стилей -

<link rel="stylesheet" href="css/style.css" type="text/css" /> содержимое этого файла находится здесь - css/style.css

 
     
  в котором будем описывать необходимые классы и их свойства, влияющие на оформление нашего меню.  
     
  div#bm_main_container  
     
 

данный класс, описанный как уникальный по его id (о чём свидетельствует знак #) будет задавать у нас контейнер для содержимого страницы

в html опишем его как див -

<div id="bm_main_container">

</div>

 
     
  обратите внимание, что мы указали, что для данного блока див, свойства берутся не из класса (class), а из уникального элемента объявленного как id (#)  
     
  Теперь углубимся в рассмотрение кода для css и html  
     
  div#bm_main_container {
width: 1024px; /* задаем ширину контейнера для страницы 1024 пикселя */
background: #f2f2f2; /* цвет фона для контейнера будет бледно-серый */
margin: 0 auto; /* это нужно для размещения контейнера по центру страницы вне зависимости от ширины экрана */
}
 
     
 

в html внутри блока bm_main_container

<div id="bm_main_container">

<!-- описываем блок, представляющий строку меню -->

<div id="bm_category_container"></div>

</div>

 
     
 

в css добавляем

div#bm_category_container {
float: left; /* прижимаем блок меню к левой границе */
background: #fff; /* задаем белый фон */
width: 100%; /* располагаем меню во всю ширину */
height: 28px; /*высоту строки меню определяем в 28 пикселей */
border-top: 1px dashed #000; /* верхний и нижний бордюр черного цвета, выполненный штрихами*/
border-bottom: 1px dashed #000;
margin-bottom: 10px; /* внешний отступ под строкой меню 10 пикселей */
}

 
     
 

/* пункты меню будут элементами ненумерованного списка, поэтому уточняем их свойства

для самого блока ненумерованного списка - ul

*/

#bm_category_container ul {
margin: 1px 5px; /*внешний отступ сверху и снизу по 1 пикселю, слева и справа - по 5 */
padding: 0; /* без внутренних отступов */
}

/* для каждого из пунктов меню */
#bm_category_container li a {

float: left; /* прижать к левой границе */
display: block; /* отображать блоками - т. е. в начале и конце блока содержимое переносится, если не умещается в заданных размерах */
color: #901e78; /* для пунктов меню задаем пурпурный цвет */
padding: 5px 8px; /* внешние отступы сверху/снизу - 5 пикселей, слева/справа - 8 */
font-weight: bold; /* жирный шрифт */
font-family: Verdana, Geneva, sans-serif; /* определяем написание шрифта */
font-size: 14px; /* размер букв - 14 пиксель */
}

 
     
  в html описываем первый пункт меню и его элементы -  
     
 

<div id="bm_category_container">

<!-- открываем тег ненумерованного списка -->
<ul>

<!-- задаем блок для отображения пункта меню -->
<div id="header_wm">

<!-- подпункты будут ненумерованным списком -->
<ul class="models_wm">
<li>

<!-- описываем ссылку на пункт меню и некоторые дополнительные свойства стиля -->
<a style="text-decoration: none;" href="#">&bull;&nbsp;Пункт меню1</a>

<!-- подпункты будут также ненумерованным списком -->
<ul>

<!-- для упорядочения подпунктов применяем таблицу -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">

<!-- в первой строке выделяем названия столбцов для подгрупп-->
<tr>
<td><li>

<!-- и прописываем их названия -->
<a href="#">Подгруппа1</a>
</li></td>
<td><li><a href="#">Подгруппа2</a></li></td>
<td><li><a href="#">Подгруппа3</a></li></td>
</tr>

<!-- прописываем названия подпунктов меню -->
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>
</tr>
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>
</tr>
<tr>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт1</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт2</a></td>
<td><a style="color: #fff; font-weight: normal;" href="#">Подпункт3</a></td>

<!-- закрываем все открытые теги -->
</tr>
</table>
</ul>
</li>
</ul>
</div>

</ul>

</div>

 
     
  в css описываем следующее -  
     
 

/* последовательно описываем все необходимые свойства для оформления пункта меню и подпунктов */

/* сначала описываем свойства названия пункта меню */

#header_wm .models_wm {
list-style-type: none; /* стиль элемента списка - невидимый */
float: left; /* прижимать элемент к левой границе на странице */
}
#header_wm .models_wm li {

/* прижимать элемент к левой границе на странице */
float: left;

/* положение для элемента - относительное - в данном контексте определяет положение выпадающей вкладки с подменю */
position: relative;
}
#header_wm .models_wm li a {
float: left; /* прижимать элемент к левой границе на странице */
position: relative; /* положение относительное */
font-size: 1.2em; /* размер шрифта 1.2 от ширины буквы M */
color: #901e78; /* цвет пурпурный */
text-decoration: none; /* подчеркивание отключаем */
font-weight: bold; /* шрифт жирный*/
}

/* при наведении указателя мыши на данный пункт меню - */
#header_wm .models_wm li a:hover {
text-decoration: underline; /* включаем подчеркивание */
background: #901e78; /* цвет фона - пурпурный */
color: #fff; /* цвет букв - белый */

}

/* описываем свойства для подпунктов - */
#header_wm .models_wm ul {
list-style-type: none; /* значок элемента списка - отключаем */
display: none; /* показ блока - отключаем */
position: absolute; /* показ блока - положение - абсолютное */

padding: 10px; /* показ блока - положение - абсолютное */
background: url(../image/item1_bg.png); /* фоновое изображения для вкладки подменю, поскольку используем png, то вкладку можно сделать полупрозрачной, использовав полупрозрачное png изображение */
border: 2px #901e78 solid; /* по краям вкладки подменю выводим бордюр, который невидим, т. к. совпадает с цветом фона вкладки */


top: 24px; /* смещение сверху 24 пикселя */
left: -30px; /* смещение слева на -30 пикселей */
z-index: 10000; /* z-порядок с максимальным значением, чтобы вкладка отобразилась поверх остальных блоков страницы */
margin-left: 25px; /* внешний отступ слева 25 пикселей*/
}

/* подпункты меню - */
#header_wm .models_wm ul li {
color: #fff; /* цвет текста названия пункта белый */
width: 180px; /* ширину требуется указать, т. к. ИЕ7 отображает вкладку некорректно */

padding: 5px 0; /* внутренние отступы сверху/снизу - 5 пиксель, слева/справа - 0 */
font: 12px Verdana; /*шрифт - 12 пиксель, Verdana */
float: left;
/* привязка блока к левой границе */

}

/* поскольку подпункты - это ссылки, то нужно задать оформление и для них */

#header_wm .models_wm ul li a {
color: #fff; /* цвет текста названия ссылки белый */
font: 12px Verdana; /*шрифт - 12 пиксель, Verdana */
font-weight:bold; /* шрифт выделен жирным */
float: none; /* привязка блока нет */
}

/* при наведении указателя мыши на подпункт - */

#header_wm .models_wm ul li a:hover {
color: #ccc;
/* делаем цвет подпункта серым */
float: none; /* привязку убираем */
text-decoration: none; /* подчеркивание убираем */
}

/* этот элемент в описании ответствен за отображение вкладки подменю - при наведении указателя мыши на пункт меню активируется показ вкладки подменю представленной тегом ul, и отображается вкладка в виде блока */

#header_wm .models_wm li:hover ul {
display: block;
/* если попробовать закомментировать данное свойство или изменить его значение на другое, то всплывающая вкладка подпункта меню не появится */
}

 
     
  Остальные пункты и подпункты меню реализуются полностью аналогично, с тем лишь отличием, что для них устанавливаются собственные особенности - цвет вкладки, названия пунктов и прочее, что нужно.  
     
  Весь исходный код для данного урока Вы найдёте здесь - popup menu (html) и здесь - css/style.css (css).  
     
 

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



fle game engine - движок для создания игр
fle game engine - движок для создания игр


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