Новые вкладки похожие на табы с помощью CSS.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tabs 3</title> <style> body { font: 0.8em arial, helvetica, sans-serif; } #header ul { list-style: none; padding: 0; margin: 0; } #header li { float: left; border: 1px solid #bbb; border-bottom-width: 0; margin: 0; } #header a { text-decoration: none; display: block; background: #eee; padding: 0.24em 1em; color: #00c; width: 8em; text-align: center; } #header a:hover { background: #ddf; } #header #selected { border-color: black; } #header #selected a { position: relative; top: 1px; background: white; color: black; font-weight: bold; } #content { border: 1px solid black; clear: both; padding: 0 1em; } h1 { margin: 0; padding: 0 0 1em 0; } </style> </head> <body> <div id="header"> <h1>Tabs</h1> <ul> <li><a href="#">This</a></li> <li id="selected"><a href="#">That</a></li> <li><a href="#">The Other</a></li> <li><a href="#">Banana</a></li> </ul> </div> <div id="content"> <p>Ispum schmipsum.</p> </div> </body> </html>
Страницы в тему: