Next Home  Prev
No,214 comment 0
よくトップページなどに使われているタブメニューをcssだけで作ってみました。
この例ではHPを4ページ作ってそれぞれリンクを貼りました。
cssで.box .box2それぞれを float:left; で横並びにし
.box2の下線をなくしてそれぞれのページのメニューのリンクに当てます。
DEMO



続きはそれぞれのページです
1ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box2"><a href="tabutest1.html">1</a></div><div class="box"><a href="tabutest2.html">2</a></div><div class="box"><a href="tabutest3.html">3</a></div><div class="box"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>1page</h1>
</div>
</body>
</html>


2ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><a href="tabutest1.html">1</a></div><div class="box2"><a href="tabutest2.html">2</a></div><div class="box"><a href="tabutest3.html">3</a></div><div class="box"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>3page</h1>
</div>
</body>
</html>

3ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><a href="tabutest1.html">1</a></div><div class="box"><a href="tabutest2.html">2</a></div><div class="box2"><a href="tabutest3.html">3</a></div><div class="box"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>3page</h1>
</div>
</body>
</html>

4ページ

<html>
<head>
<style>
#main {
width: 336px;
height: 300px;
border : 1px solid #ccc;
}
.box {
width: 80px;
height: 30px;
float :left;
border : 1px solid #000;
background-color : #ccc;
margin-right:1px;
margin-left:1px;
}
.box a {
display:block;
color:#000000;
font-size : 13px;
/*text-decoration:none;*/
text-align : center;
font-weight: bold;
font-size : 16px;
padding-bottom: 7px;
padding-top: 7px;
}
.box2 {
width: 80px;
height: 30px;
float :left;
border-top : 1px solid #ccc;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
border-bottom : 0px solid #ccc;
margin-right:1px;
margin-left:1px;
}
.box2 a { display:block;
padding-bottom: 7px;
padding-top: 7px;
text-align : center;
color:red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="main">
<div class="box"><a href="tabutest1.html">1</a></div><div class="box"><a href="tabutest2.html">2</a></div><div class="box"><a href="tabutest3.html">3</a></div><div class="box2"><a href="tabutest4.html">4</a></div>
<br clear=left>
<h1>4page</h1>
</div>
</body>
</html>
2014年12月24日14時43分22秒/css2 /コメント:0 /トラックバック:-/▲ページトップへ戻る

コメント


コメント index
    絵文字

    非公開コメント

    Next Home  Prev

    カテゴリー

    どりーみー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

    *最新記事のRSS
    *最新コメントのRSS
    *最新トラックバックのRSS

    TB_People

    カレンダー

    10 | 2018/11 | 12
    - - - - 1 2 3
    4 5 6 7 8 9 10
    11 12 13 14 15 16 17
    18 19 20 21 22 23 24
    25 26 27 28 29 30 -

    iconカテゴリ

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク

     

    カテゴリー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

    *最新記事のRSS
    *最新コメントのRSS
    *最新トラックバックのRSS

    TB_People

    カレンダー

    10 | 2018/11 | 12
    - - - - 1 2 3
    4 5 6 7 8 9 10
    11 12 13 14 15 16 17
    18 19 20 21 22 23 24
    25 26 27 28 29 30 -

    iconカテゴリ

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク