Воскресенье, 06.07.2025, 18:47
Приветствую Вас Гость | RSS

Мой сайт

Мини-чат
Наш опрос
Оцените мой сайт
Всего ответов: 56
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа

Каталог статей

Главная » Статьи » Статьи о HTML и CSS

Горизонтальное меню по типу кнопок
Мы делаем фон (прямоугольник с закруглёнными углами) на нём размещаем меню, между ссылок ставим картинку как бы пробел для кнопок, эта картинка конец одной кнопки и на чало второй. Всё просто, приступим к реализации.

В фотошопе я нарисовал такую заготовку

Далее с помощью инструмента "Раскройка" порезал картинку. Нам нужны 4 части, зачёркнутое выкидываем.

Html код - вставляем "Главная страница форума" куда вам надо:

Code
<div class="l"></div>  
<div class="p"></div>  
<div class='c'>  

<a href="/">Главная</a> <img src="images/x.jpg" alt="">  
<a href="/">Форум</a> <img src="images/x.jpg" alt="">  
<a href="/">Последние сообщения</a> <img src="images/x.jpg" alt="">  
<a href="/">Пользователи</a> <img src="images/x.jpg" alt="">  
<a href="/">Пользователи</a> <img src="images/x.jpg" alt="">  
<a href="/">rss - ленты</a>  

</div>

Css код в самый низ в Таблица стилей (CSS) или вашего *.css Файла .

Code
.l {background:url(images/l.jpg) no-repeat /*не растягивающийся бекгроунд*/;  
height:40px /*высота*/;  
width:24px /*ширина*/;  
float:left /*сам элемент с лева всё обтекание с права*/;}/*левая часть*/  

.p {background:url(images/p.jpg) no-repeat;height:40px;width:30px;float:right;}/*правая часть*/  
.c {background:url(images/c.jpg) repeat-x;height:40px;width:100%;} /*фон*/  

.c a, .c img {float:left;} /*ставим обтекание картинкам и ссылкам, для того чтобы всё было в ряд*/  
.c a {margin:13px 6px 0 5px;} /*выравниваем ссылки*/

всё что в /**/ можно убрать.

Также можно посмотреть демо по этой ссылки -> DEMO

Категория: Статьи о HTML и CSS | Добавил: ErIcSSon (19.03.2010)
Просмотров: 617 | Теги: типу, Горизонтальное, кнопок, по, меню | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:
Поиск