Page Title

Создание изменяющихся кнопок

С точки зрения конструкции, это очень простая страница. Она использует два жлемента div: один для списка ссылок в колонке слева и один для основного контента, который занимает остальную часть пространства.

                
<div class="MenuBar">
    <a href="#">Rollover Button 1</a>
    <a href="#">Rollover Button 2</a>
    <a href="#">Rollover Button 3</a>
    <a href="#">Rollover Button 4</a>
    <a href="#">Rollover Button 5</a>
    <a href="#">Rollover Button 6</a>
</div>
<div class="MainContent">  
    <h1>Wellcome.</h1>
    <p>...</p>
    <p>...</p>
</div>

Результат:

Rollover Button 1 Rollover Button 2 Rollover Button 3 Rollover Button 4 Rollover Button 5 Rollover Button 6

Welcome.

This page user rollover buttons in a basic two-columm layout. CSS is the glue that holds everything. It creates the rollovear offect and the page layout.

You could also reuse these buttons on several pages with templates or the server-side include feature.

Для начала применим один шрифт для всей страницы:

                
body {
    font-family: Verdana, sans-serif;
    font-size: small;
}

Далее с помощью компоновки, меню позиционируем в левой части страницы:

                
.MenuBar {
    position: absolute;
    top: 20px;
    left: 0px;
    margin: 15px;
}

Следующий код добавляет основному контенту дополнительный отступ с левой стороны, чтобы он не накладывался на меню:

                
.MainContent {
    margin-left: 165px;
    margin-top: 30px;
    margin-right: 20px;
}

Далее:

                
.MenuBar {
    display: block;
}

Мы использовали свойство display, позволяющее преобразовать каждый элемент a из строчного элемента в блочный. Таким образом, браузер помещает каждую ссылку на отдельный строке, чтобы вам не нужно было добавлять разрывы строк с помощью br.

Далее поменяем стиль, который отвечает за форматирование ссылок. Использовать для этого будем text-decoration и color, чтобы изменить стандартное форматирование ссылок (текст подчеркнут и синего цвета) на то, что нам больше нравится.

                
.MenuBar {
    display: block;
    
    text-decoretion: none;
    color: black;
}

Но настоящая магия произойдет, когда мы применим background. Еще помимо обычного фона, мы используем здесь градиент-фон.

                
background: radial-gradient(#142843,
#864362);

Свойства width и height определяют размер кнопки. Margin и padding отделяют кнопки одна от другой и создают отступ текста внутри.

                
width: 125px;
height: 23px;
margin-bottom: 5px;  
padding-top: 5px; 
padding-left: 7px;
}

Также добавим другие свойства, котрые меняют цвет ссылке при переходе по ней, или нажати на нее:


.MenuBar a:hover {
    background-color: #dfc9ed;
}

Еще бывают другие: activ и visited

Rollover Button 1 Rollover Button 2 Rollover Button 3 Rollover Button 4 Rollover Button 5 Rollover Button 6

Welcome.

This page user rollover buttons in a basic two-columm layout. CSS is the glue that holds everything. It creates the rollovear offect and the page layout.

You could also reuse these buttons on several pages with templates or the server-side include feature.

Кнопочки 2.0