Категории
| HTML [5] |
| CSS [5] |
| uCoz [44] |
| SEO, продвижение сайта [22] |
| Заработок в сети [0] |
| Веб-дизайн [0] |
| Разное [4] |
Мини-чат
Лента комментариев
Новое на сайте
-
- Новое на форуме
-
- Популярные файлы
-
- Самые популярные темы
| Главная » Файлы » CSS |
Оформление списков с помощью одного пикселя
Добавил: Gopn1k » Дата: 19.05.2024
В сегодняшнем уроке будет рассказано, как с помощью 1 пикселя преобразить любой список.
Однопиксельный фон способен многое изменить. К примеру с помощью repeat-x он может стать горизонтальной линией, с помощью repeat-y - вертикальной, repeat - полностью заполнит вашу страницу одним цветом.
Мы будем использовать тот самый пиксель для красивого оформления неупорядоченных списков.
Код HTML очень прост - только неупорядоченный список:
В CSS мы будем применять однопиксельное PNG изображение к списку, повторяя вертикально, и к элементам списка, повторяя горизонтально. Чтобы горизонтальная линия останавливалась перед элементом списка, якорю ссылки мы присваиваем белый фон.
[ Скриншот ] Метки:
Однопиксельный фон способен многое изменить. К примеру с помощью repeat-x он может стать горизонтальной линией, с помощью repeat-y - вертикальной, repeat - полностью заполнит вашу страницу одним цветом.
Мы будем использовать тот самый пиксель для красивого оформления неупорядоченных списков.
Код HTML очень прост - только неупорядоченный список:
Code
<ul id="project-list"><br><li><a href="#">Civil Engineering</a><br><ul><br><li><a href="#">Cowley Hall Parking Lot Recontruction</a></li><br><li><a href="#">Culver’s Home Office</a></li><br><li><a href="#">First Addition to Highland Addition</a></li><br><li><a href="#">Fox Point Apartments</a><br><ul><br><li><a href="#">East Side</a></li><br><li><a href="#">West Side</a></li><br></ul><br></li><br><li><a href="#">Metropolitan Place Phase II</a></li><br><li><a href="#">Oak Park Place of Baraboo</a></li><br><li><a href="#">Premier Coop</a></li><br><li><a href="#">Sleep Inn & Suites</a></li><br><li><a href="#">Tradewinds Business Center</a></li><br><li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li><br></ul><br></li><br><li><a href="#">Environmental Engineering</a></li><br><li><a href="#">Telecommunications Engineering</a><br><ul><br><li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li><br><li><a href="#">Oakland County/Radian Communications Michigan</a></li><br><li><a href="#">T-Mobile Site Deployment</a></li><br><li><a href="#">U.S. Cellular Network Development</a></li><br><li><a href="#">Western Wireless South Dakota</a></li><br></ul><br></li><br></ul>
В CSS мы будем применять однопиксельное PNG изображение к списку, повторяя вертикально, и к элементам списка, повторяя горизонтально. Чтобы горизонтальная линия останавливалась перед элементом списка, якорю ссылки мы присваиваем белый фон.
Code
<style type="text/css"><br>/*<br>CSS-Tricks Example<br>by Chris Coyier<br>http://css-tricks.com<br>*/<br>* { margin: 0; padding: 0; }<br>body { font: 16px Georgia, serif; }<br>a { text-decoration: none; }<br>ul { list-style: none; }<br>#page-wrap { width: 500px; margin: 0 auto; }<br>#project-list {<br>background:transparent url(images/graypixel.png) repeat-y scroll 15px 0;<br>width:340px;<br>}<br>#project-list li {<br>font-size:16px;<br>margin:15px 0 20px;<br>padding:0 0 0 10px;<br>}<br>#project-list li a {<br>background:white none repeat scroll 0 0;<br>color:#1F6DD9;<br>display:block;<br><br>padding:3px;<br>}<br>#project-list li a:hover {<br>color:#84B8FF;<br>}<br>#project-list li ul li {<br>background:transparent url(images/graypixel.png) repeat-x scroll 0 8px;<br>font-size:13px;<br>margin:4px 0 4px 5px;<br>padding:0 0 0 20px;<br>}<br>#project-list li ul li a {<br>padding:0 0 0 3px;<br>}<br>#project-list li ul li ul {<br>background:transparent url(images/graypixel.png) repeat-y scroll 15px 0;<br>margin-bottom:10px;<br>}<br>#project-list li ul li ul li {<br>margin-left:16px;<br>padding-left:10px;<br>}<br></style><br>
[ Скриншот ] Метки:
| Всего комментариев: 0 | |