CSSで作るタブ - 1ドット画像を使ってタブの見本以下の画像のようなタブを作る。 HTMLタブ群はULタグで表し、LIタグを増やすとタブが増える。選択されているタブには、class="active"を指定する。 ポイント
<html> <body> <style type="text/css"> ul { margin: 0; padding: 0; list-style: none; background: transparent url(dot.gif) repeat-x center bottom; zoom: 100%; } ul:after { content: ""; clear: both; height: 0; display: block; visibility: hidden; } li { float: left; margin: 0 10px 0 0; padding: 5px; border: 1px solid #000; } li.active { border-bottom: 1px solid #fff; } p:after { content: "test"; } </style> <ul> <li>test1</li> <li>test2</li> <li class="active">test3</li> <li>test4</li> </ul> </body> </html> |
|