Учебник для создания красивой, простой, горизонтальное CSS меню |

Учебник для создания красивой, простой, горизонтальное CSS меню

Это очень простой, горизонтальное CSS меню. Этот учебник поможет создать простой и привлекательной CSS меню с прохладной наведите эффект.

Прежде всего, давайте писать код CSS меню. Здесь идет код ..

  # NAV 
  ( 
  обивка: 0; 
  ) 

  # NAV Л.И. 
  ( 
  Дисплей: встроенный; 
  ) 

 # NAV ли в 
  ( 
  семейство шрифтов: Arial; 
  размер шрифта: 12px; 
  ; Текст-отделочные: нет; 
  поплавковый: слева; 
  обивка: 10px; 
  ; цвет фона: # 333333; 
  ; COLOR: # FFFFFF; 
  нижней границы: 1px; 
  ; границы снизу-COLOR: # 000000; 
  нижняя граница-стиле: твердый; 
  ) 

  # NAV LI A: наведите 
  ( 
  ; цвет фона: # 9B1C26; 
  обивка-вниз: 12px; 
  нижней границы: 2px; 
  ; границы снизу-COLOR: # 000000; 
  нижняя граница-стиле: твердый; 
  маржи: - 1px; 
  ) 

Вторая всех Давайте писать HTML списке для меня. Скажем у нас есть 7 ссылок, как показано на изображении, здесь идет код ..


 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Help </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> <ul ID = "nav"> <li> <a HREF = "#"> Главная страница </ A> </ LI> <li> <a HREF = "#"> О </ A> </ LI> <LI > <a HREF = "#"> Услуги </ A> </ LI> <li> <a HREF = "#"> Продукты </ A> </ LI> <li> <a HREF = "#"> Карта сайта </ A> </ LI> <li> <a HREF = "#"> Справка </ A> </ LI> <li> <a HREF = "#"> Обратная связь </ A> </ LI> < / UL>