Оформление списков с помощью одного пикселя

В сегодняшнем уроке будет рассказано, как с помощью 1 пикселя преобразить любой список.

Однопиксельный фон способен многое изменить. К примеру с помощью repeat-x он может стать горизонтальной линией, с помощью repeat-y - вертикальной, repeat - полностью заполнит вашу страницу одним цветом.



Мы будем использовать тот самый пиксель для красивого оформления неупорядоченных списков.

Код HTML очень прост - только неупорядоченный список:

• Civil Engineering
  
  
  
  • Cowley Hall Parking Lot Recontruction
  
  
  • Culver’s Home Office
  
  
  • First Addition to Highland Addition
  
  
  • Fox Point Apartments
    
    
    
    • East Side
    
    
    • West Side
    
    
    
    
  
  
  • Metropolitan Place Phase II
  
  
  • Oak Park Place of Baraboo
  
  
  • Premier Coop
  
  
  • Sleep Inn & Suites
  
  
  • Tradewinds Business Center
  
  
  • UW-Madison Nielsen Tennis Stadium
  
  
  
  


• Environmental Engineering


• Telecommunications Engineering
  
  
  
  • Nsight TeleServices (CellCom) Wisconsin
  
  
  • Oakland County/Radian Communications Michigan
  
  
  • T-Mobile Site Deployment
  
  
  • U.S. Cellular Network Development
  
  
  • Western Wireless South Dakota
  
  
  
  

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