Статьи. Монетизация Интернет ресурсов, бизнес и финансы


              Главная  
Вход Регистрация
   2   4   5   6   9   10   13   16   19   18  



Главное меню на CSS

Инструкции по созданию сайта и заработка с него. http://blogak.ru На всех сайтах, одной из основных деталей верстки - есть главное меню. Обычно оно размещено горизонтально, сразу под шапкой, или же является шапкой. В статье описывается как реализовать простенькое меню, с помощью CSS i HTML. 
Ничего сложного и нового, но надеюсь для новичков будет полезно, а знатокам - интересно. Как и в предыдущей статье, сначала покажу CSS код, а затем и HTML, в конечном итоге мы получим следующее:меню

И так таблицы CSS: 

<style type="text/css">
Code
#menu {
  font-size: 1em;
  height:2.5em;  
  color: #000;
  text-align:center;
  background-color: #232323;  
}
#menu div {
  width:44em;  
  margin: auto;
}

#menu a {
  display:block;  
  float:left;  
  color: #e8e8e8;
  background-color: #232323;
  text-align:center;  
  padding: 10px 18px;
  text-decoration: none;
}
#menu a:hover {
  height:1.1em;
  font-size: 1.2em;
  color: #000;
  background-color: #c959e3;
  border-radius:10px;
}
#go{
margin-top:150px;}
</style>

Даже не знаю что тут объяснять - настолько все просто. Единственное, на что обращу внимание, это размеры, которые задаются единицей em. 1em - равное ширине буквы М используемого шрыфта. Цвета можно всегда заменить на свои, и еще один параметр: border-radius - задает круглые углы, это параметр CSS3 он может в старых браузерах не работать, это нужно обязательно учесть.

Ну и HTML код:

 

Code
<div id="menu">
  <div>
  <a href="#">Головна</a>
  <a href="#">Новини</a>
  <a href="#">Ще щось</a>
  <a href="#">Приклад довгого тексту</a>
  </div>
</div>

тут еще проще - простой массив ссылок, даже не списком.

Вот так легко и быстро, можно написать интересное меню, которое, хоть и самое простое, но эффектно смотреться на любом статическом сайте, где не нужно перегрузок различными скриптами, графикой и другим ненужным дизайнерским хламом. Надеюсь был полезным.





 Категория: Создание сайтов. | Добавил: Figluk


Похожие статьи:
Статьи Разработка сайта на CMS Typo3.
Сегодня одним из наиболее мощных инструментов по ...
Статьи Проектирование структуры Web-сайта.
Вы решили приступить к созданию сайта Но не знает...
Статьи Приемы работы с файлами в PHP.
Вообще говоря, в PHP не существует функции, предназначенной именно для создания файлов. ...
Статьи Проверяем скорость загрузки сайта.
Посетителя сайта, в зависимости от его характера, может раздражать...
Статьи Девелоперы - дистанционное обучение.
Новый проект на не коммерческой основе Сервера иг...
Статьи В Интернете текст должен стать новостью!
Занимаясь разработкой текстов для сайтов професси...




Система сайтов PFS. Работа, бизнес и реклама. ©