Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 CSSを使ったタブメニュー


よくトップページなどに使われているタブメニューを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】 css2 | トラックバック(-) |
コメント(0)

comment
投稿













管理者にだけ表示を許可する






| ホーム |
ブログ内検索

RSSフィード

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

TB_People

カレンダー

05 | 2021/06 | 07
- - 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 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

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

TB_People

カレンダー

05 | 2021/06 | 07
- - 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 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview