CSS закругленные углы на сайте
Закругленные углы на сайте - эта тема часто встречается на просторах Рунета. Вебмастера решают ее по разному. Один из возможных способов ее решения - это CSS. С помощью CSS вполне можно сформировать бордюрчики которые будут сдвинуты по горизонтали и вертикали на один пиксель. Правильно их расположив и задав нужные цвета можно сделать например симпатичную панель с закругленными углами для меню сайта.
В данной статье представлен один из возможных вариантов обрамления меню, которое будет находиться на панели с закругленными углами. Для этого нам понадобятся по крайней мере два контейнера DIV вложенных один в другой и несколько тегов B. Как выглядит сама такая .html страница и ее код показано ниже.
<DIV class="outside">
<DIV class="inside">
<B class="a"></B>
<B class="b"></B>
<B class="c"></B>
<B class="d"></B>
<UL class="nav">
<LI class="nolink">
<U>Menu round</U>
</LI>
<LI><a href="http://acvarif.net.ru/lrub3part2/lrub3part2page1.html"> Link 1</a></LI>
<LI><a href="http://acvarif.net.ru">Link 2</a></LI>
<LI><a href="http://acvarif.net.ru">Link 3</a></LI>
</UL>
<B class="e"></B>
<B class="f"></B>
<B class="i"></B>
<B class="j"></B>
</DIV>
</DIV>
А ее CSS код еще ниже
/* Стиль для внешнего контейнера div */
.outside {
position:relative;
margin: 20px 0 0 20px;
width:200px;
}
/* Стили для внутреннего контейнера div */
.inside {
background:transporent;
margin:10px 8px 10px 9px;
padding:0;
}
.inside .a,.inside .j {
background:#000;
margin:0 5px;
}
.inside .a,.inside .b,.inside .c,.inside .d,.inside .e,
.inside .f,.inside .i,.inside .j {
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.inside .b,.inside .i {
border-width:0 2px;
margin:0 3px;
}
.inside .c,.inside .f {margin:0 2px;}
.inside .e,.inside .d {margin:0 1px;height:2px;}
.inside .b,.inside .c,.inside .d,.inside .e,.inside .f,.inside .i,
.inside .nav,.inside .nav .nolink {
border-left:#000 1px solid;
border-right:#000 1px solid;
}
.inside .nav {
text-align:left;
font:bold 12px arial;
margin:0;
padding:0;
}
.inside .nav li {
list-style-type:none;
margin:0;
padding:2px 0 0 11px;
}
.inside .nav a {
color:#777;
font:bold 11px verdana;
text-decoration:none;
}
.inside .nav a:hover {
color:blue;
text-decoration:underline;
}
.inside .nav .nolink {
border:0;
border-bottom:#000 1px solid;
padding:0 0 3px 5px;
text-decoration:none;
}
Для большей наглядности можно скачать панель меню с закругленными углами в виде тестовой страницы и просмотреть ее в любом браузере.
Электроника :
- Техника электроника (11)
- Полезная электроника (4)
- Электроника для всех (5)
- Техника для дома (6)
- Cхемотехника ПЛИС (11)
- Пректирование PCAD (4)
Программирование :
- Микроконтроллеры (9)
- ПЛИС VHDL Verilog (29)
- C++ Builder (7)
- Visual Studio C++ C# (7)
- Java programming (7)
- Matlab programming (4)
Сайтостроение :
- Сайтостроение HTML (5)
- Сайтостроение PHP (8)
- PHP CMS на файлах (3)
- Web инструменты (9)
- Полезное вебмастеру (11)
- SEO раскрутка сайта (4)
- PHP скрипты (3)
Реклама :
Книги и учебники :
- Шаблоны сайтов (6)
- Книги и учебники (2)
Компьютер и интернет :
Поиск по сайту :
Реклама :
Облако меток :
Бесплатная подписка :
Статистика :
- Популярность (3)
- Посещаемость (3)
- Поисковые запросы (3)