Home

Page 268
Page 268
background image

Глава 16 

268 

ul.menu li { 
borderbottom: Ipx dotted #ccc; /*нижняя граница*/  

Подзаголовки ссылок могут обрабатываться по отдельности; в данном примере они 

сдвинуты слева. 

Подзаголовки: 

/*форматирование подзаголовков списков*/  
ul.menu ul { 
/*поле служит для сдвига текста*/  
marginleft: 10рх; 
backgroundcolor: #ЕЕЕ; /*другой цвет фона*/  
width: 200рх;  

/*меньшая ширина*/ 

Подзаголовки получают совершенно иначе форматированную нижнюю границу 

которая заполняется цветом фона. 

ul.menu ul li { 
borderbottom: lpx solid #fff; /*нижняя граница*/  

Каждый элемент списка может быть сформатирован отдельно, поскольку каждый 

дескриптор li имеет свой собственный класс. 

.level1 iteml, .level1 item2 parent, .level1 item3 parent,  
.level1 item4 

Действительные ссылки 

Теперь перейдем к самим ссылкам. Форматирование касается дескриптора, кото#

рый позиционируется в списке ul классом .menu.  

Все ссылки должны выглядеть так: 

ul.mainmenu а {? 
  textdecoration: none;  /*ссылка без подчеркивания*/  
  color: #6В5Е588;  

/*цвет шрифта*/ 

  fontsize: llpx;  

/*размер шрифта*/ 

  paddingleft: 10рх;  

/*расстояние от текста до рамки*/ 

Наведение курсора мыши изменяет фон и цвет шрифта ссылки. Рут настроила это 

следующим образом: 

ul.menu а:hover

 { 

  color: #САС303;  
  textdecoration: none; 

И, наконец, ссылка на текущую активную страницу специально подсвечивается с 

помощью следующего класса: 

.menu li#current а

 { 

  color: #В22819;  

/*цвет шрифта*/ 

Теперь все готово. 


Copyright © 2018 Файлообменник mega.dp.ua

Использование любых материалов сайта возможно только с разрешения автора.