| Kosten | Суббота, 16 Июня 2018, 03:06 | Сообщение 1 |
| Оформление любого элемента, это важная часть в построение сайта. Что как пример прbведу горизонтальное меню. Не знаю, ранее мне такой стиль нравился, хоть сейчас полностью на чистом стиле идут навигаций, но здесь предоставлю на одной ссылке в дизайн, что очень много решает в самом стиле навигаций. Многим людям нужны центрированные меню на своем веб сайте, но для новичков CSS эта задача кажется невозможным.
Если вы выполните поиск в Интернете, вы найдете несколько методов центрирования, но большинство из них полагаются на хаки CSS, JavaScript и также стилистика CSS, что не будет поддержки от браузеров (display:inline-block;пример). В этом сообщении узнаем секретный метод достижения центрированных вкладок, который не использует хаки CSS и будет работать во всех обычных веб браузерах. Он также совместим с моими идеальными макетами.
Ниже вы увидите четыре горизонтально ориентированных вкладки в этом столбце текста, вторая вкладка установлена как активная. Попробуйте изменить размер окна браузера и измените размер текста страницы, чтобы увидеть, как меню всегда остается центрированным и интерактивным.
Фокус на мой метод центрирования заключается в том, как плавающие элементы расположены относительно друг от друга. Чтобы это объяснить, позвольте мне сначала описать, как элемент может изменять свои размеры при плавании.
Если теперь мы поместим div влево, он автоматически уменьшится, чтобы соответствовать ширине содержимого внутри себя. Он теперь только такой же широкий, как текст «Div». Это сокращение является ключом к процессу центрирования, это помогает нам перемещать наше меню в нужное количество в центр.
Некоторые важные примечания:
Этот метод центрирующих меню является солидным, но есть несколько вещей, о которых вы должны знать.
1. Поскольку элемент ul находится частично на странице, ваше окно браузера будет прокручиваться сбоку, если вы не включите overflow:hidden;правило в div «centeredmenu», это отрубит нависающий div.
2. Поскольку элемент ul не выравнивается с вкладками, вы не можете добавить к нему какой-либо видимый стиль. Оставьте элемент ul без цвета фона и без рамки, чтобы он был полностью невидим. Сделайте все свои стили для вкладок на ли и только на элементах.
3. Если вам нужно стилизовать первую или последнюю вкладку по-разному с другими, добавьте класс к первому и последнему элементу li, чтобы они могли быть нацелены индивидуально.
Так выглядит навигация:
Центрированное меню HTML
HTML, используемый для центрированных меню, семантически структурирован и очень прост. Структура - это просто список ссылок в одном div.
Код <div id="aredtuklpas-naveqatunsag"> <ul> <li class="first"><a href="#">zornet.ru #1</a></li> <li class="active"><a href="#">Скрипты сайта</a></li> <li><a href="#">Дизайн</a></li> <li class="last"><a href="#">Стили</a></li> </ul> </div>
Центрированное меню CSS
Ниже CSS используется для центрирования вкладок на странице. Ниже приведено объяснение того, как это работает.
Код #aredtuklpas-naveqatunsag {
clear: left;
float: left;
width: 100%;
background: #3e76a0 url(http://zornet.ru/ABVUN/sarunolas/roundbar-blue.gif) 0 25% repeat;
font-family: Trebuchet MS, Helvetica, sans-serif;
border-bottom: 1px solid #336fa5;
overflow: hidden;
}
#aredtuklpas-naveqatunsag ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#aredtuklpas-naveqatunsag ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#aredtuklpas-naveqatunsag ul li.first {
border-left:1px solid #49A9FF;
}
#aredtuklpas-naveqatunsag ul li.last {
border-right:1px solid #99D8FF;
}
#aredtuklpas-naveqatunsag ul li a {
display: block;
margin: 0;
padding: .4em .8em;
color: #312f2f;
text-decoration: none;
border-left: 1px solid #c7e9ff;
border-right: 1px solid #396892;
line-height: 1.3em;
}
#aredtuklpas-naveqatunsag ul li.active a {
background:url(http://zornet.ru/ABVUN/sarunolas/roundbar-blue.gif) 0 75% repeat;
font-weight:bold;
}
#aredtuklpas-naveqatunsag ul li a:hover {
background:url(http://zornet.ru/ABVUN/sarunolas/roundbar-blue.gif) 0 75% repeat;
}
#aredtuklpas-naveqatunsag ul li a span {
display:block;
}
Эти центрированные вкладки полностью совместимы с изменяемым по размеру текстом. Изменчивый текст имеет важное значение для доступности страниц.
Люди с нарушениями зрения могут сделать текст более крупным, чтобы читать их было легче. Становится все более важным сделать ваш сайт совместимым с изменяемым текстом, потому что люди ожидают более высокий уровень доступности в интернете.
Демонстрация
| | Страна: (RU) |
| |
