Главная   Регистрация   Фотообзоры   Контакты   RSS 2.0  
 

Навигация
Главная Самиздат Обратная связь Статьи Фотобзоры Гостевая книга
 

Найти


 

Наш вопрос
 
Оцените мой сайт
Всего ответов: 9
 
 
Друзья и партнёры
 
 
Кто ОнЛайн?
Четверг, 10.07.2025, 14:04
Вы-вошли как-Гость:
Группа "Гости"

Онлайн всего: 1
Гостей: 1
Пользователей: 0


 
 
Рекламный блок

 
 
 

Статьи и полезная информация

 

Главная » Статьи » Создание сайтов

Урок CSS . Создание всплывающего окна
Начнем с довольно простого, но весьма полезного урока CSS. Сейчас - мы попробуем создать всплывающее окно с помощью HTML и CSS.
Итак, приступим к созданию.

Мы не будем использовать изображения в этом уроке, а значит, по традиции, создаём файлы index.html и style.css.
В код html страницы записываем стандартный начальный код для HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
<title>Текст CSS. Урок CSS 25. Создание всплывающего окна</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

Теперь необходимо создать ссылку на открытие (вызов) нашего окна.
<a href="#" onclick="document.getElementById('wind').style.display='block'; return false;" title="Всплывающее окно">Открыть меню</a>

Замечу, что wind - название стиля блока с окном. Зададим его и закончим работу с файлом:
<div id="wind">
Содержание всплывающего окна.
<button type="button" value="закрыть" onclick="document.getElementById('wind').style.display='none'; return false;">
закрыть</button>
</div>
</body>
</html>


Здесь - всё. Теперь создадим в той же директории файл стилей style.css и запишем туда такие стили:

*/

a {
   text-decoration:none;
   color:#03508c;
   font-weight:bold;
   font-size:16px;
}

#wind {
       position: absolute;
    width:320px;
    left: 35%;
      top: 100px;
    border:solid #105a98 4px;
    display: none;
      z-index: 10;
    overflow: hidden;
    background-color:#348c03;
    color:#fff;
    text-align:center;
    padding:10px;
}

Стиль "a" здесь только для оформление ссылки, вызывающей окно.

Использовать эти окна можно для множества целей: создание меню для сайта, не занимающего места на странице, создание полей авторизации, регистрации, добавления комментариев и т.д.
---------------------------------------
Категория: Создание сайтов | Добавил: Prizrak13 (07.05.2009)
Просмотров: 595 | Теги: сайт, CSS, сайт дизайн, CSS-технология | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Выбираю
 

Ваш аккаунт
 
 
Флудилка
200

 
 
Нас Считают
 

Блог

 

Рекламный блок
 

 

 
Prizrak13 © GooD-OK 2008-2009
Конструктор сайтовuCoz-->