CSSで作るタブ - CSSポジショニングを使ってタブの見本以下の画像のようなタブを作る。  HTMLタブ群はULタグで表し、LIタグを増やすとタブが増える。選択されているタブには、class="active"を指定する。 ポイント
<html>
<body>
<style type="text/css">
li {
list-style: none;
float: left;
margin: 0;
border-bottom: 1px solid #000;
}
li a {
display: block;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 10px 0 0;
}
li a span {
display: block;
border-bottom: 1px solid #000;
position: relative;
top: 1px;
padding: 5px;
}
li.active a span {
display: block;
border-bottom: 1px solid #fff;
position: relative;
top: 1px;
}
</style>
<ul>
<li><a><span>test1</span></a></li>
<li><a><span>test2</span></a></li>
<li class="active"><a><span>test3</span></a></li>
<li><a><span>test4</span></a></li>
</ul>
</body>
</html>
|
|
