Вчера я увидел пост, опубликованный GOO, используя UCWEB: кто сказал, что меню поплавок не может быть сосредоточено по горизонтали? и немного взлома.
У меня здесь более простой способ, сначала покажи:
На самом деле, я должен иметь еще один див снаружи, но я бросил его, чтобы сократить выбросы углерода.
Запустите кодовое поле
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<стиль типа = "text/css">
Body {font-family: verdana, arial, sans-serif; font-size: 12px; маржа: 120px auto; text-align: center;}
ul {margin: 0; Padding: 0; List-Style: none;}
#Navigation {Display: Inline Block; Border: Solid 1px Red; Padding: 20px;}
#navigation li {высота: 30px; float: left;}
#navigation li a {float: left; высота: 30px; линейная-высота: 30px; накладка: 0 23px; фон:#97c099;}
#navigation li a: Hover {founale:#59c099; Color: #ffff;}
</style>
<!-[if lte IE 7]> <style type = "text/css">#navigation {show: inline;} </style> <! [endif]->
<title> Комната меню плавания в одном методе </title>
</head>
<тело>
<ul id = "Навигация">
<li> <a href = "#"> Home </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>
</body>
</html>
[Ctrl+A All Soims: сначала вы можете изменить какой -то код, а затем нажмите запуск]
Самое главное - это предложение:
<!-[if lte IE 7]> <style type = "text/css">#navigation {show: inline;} </style> <! [endif]->
Чтобы позаботиться о нижней версии IE, здесь используются условные аннотации.
Навигация по скользящей двери развивалась из вышеуказанного кода:
Запустите кодовое поле
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<стиль типа = "text/css">
Body {font-family: verdana, arial, sans-serif; font-size: 12px; маржа: 120px auto; text-align: center;}
ul {margin: 0; Padding: 0; List-Style: none;}
#Navigation {Display: Inline Block; Padding: 20px; граница: твердый 1px red;}
#navigation li {высота: 30px; float: left;}
#navigation li a {float: left; fachine:#97c099 url (<a href = ") левая вершина без повторения; прокладки-лето: 27px; высота: 30px; переполнение: скрыто;}
#navigation li Span {height: 30px; float: left; founder: url (<a href = ") справа -352px без повторного перепора;
#navigation li a: hover,#navigation li.current a {background-position: left -176px; color:#009; фоновый цвет:#8597b5;}
#navigation li a: hover span,#navigation li.current a span {background -position: right -528px;}
#navigation li.current a {font-weight: bold;}
</style>
<!-[if lte IE 7]> <style type = "text/css">#navigation {show: inline;} </style> <! [endif]->
<TILE> Обновление в стиль скользящей двери в соответствии с вышеуказанным кодом </title>
</head>
<тело>
<ul id = "Навигация">
<li> <a href = "#"> <pan> home </span> </a> </li>
<li> <a href = "#"> <pan> News </span> </a> </li>
<li class = "current"> <a href = "#"> <pan> хранить </span> </a> </li>
<li> <a href = "#"> <pan> group </span> </a> </li>
<li> <a href = "#"> <pan> сообщество </span> </a> </li>
<li> <a href = "#"> <pan> справка </span> </a> </li>
</ul>
</body>
</html>
[Ctrl+A All Soims: сначала вы можете изменить какой -то код, а затем нажмите запуск]
Среди них необходимо объяснить эти два предложения, чтобы не считаться избыточным:
#navigation li a {overflow: hidden;} /* скрыть дополнительный 3px, что IE5.5 и 6, не является ошибкой 3PX! Потому что высота: 30px; высота линии: 33px; */
#navigation li Span {coursor: hand;}/* Позаботьтесь о ошибках, которые мышь на промежутке не похожа на форму рук. Кроме того, IE5.5 не поддерживает курсор: указатель;
После завершения, недостаток в том, что написание линии условных комментариев похоже на песок в ваших глазах для тех, кто обладает заболеваемостью XHTML. хе -хе!
В Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3.