コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > [インポート] DIV+CSS+jsで丸いタブを作成するeffect_html/css_WEB-ITnose

[インポート] DIV+CSS+jsで丸いタブを作成するeffect_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:30:29
オリジナル
1279 人が閲覧しました

做网站很多年.一直用TABLE布局网页,没有想到DIV+CSS的魅力如此之大,看了些资料.做了个简单而很使用的效果.圆角无刷新选项卡.单击以下地址预览(下载):

http://www.d000.cn/epark/attachments/file/css1.html

简单介绍一下重要代码:

1:圆角效果的实现

xhtml代码:

这句很简单,就是用这个标签在网页占八行的位置(上边4行,下边4行)

相关CSS:

/*圆角框*/
b.rtop, b.rbottom{
    display:block;
 background: #668995
}
b.rtop b, b.rbottom b{
    display:block;height: 1px;
    overflow: hidden;
 background: #81a6b3
}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

这段代码就很容易明白,就是填充每一行,然后设置不同的左右边距,就实现了圆角效果,相关CSS的设置可以参考CSS2.0中文手册.

2:选项卡效果的实现

                         


                         
                         
                         

               
   

          
  1. テスト 333333333



< /dd>

gt;gt;gt;gt;gt;

これを読むと、タブは現在各オプションの内容を DIV に配置するものであることがわかります。マウスをクリックすると、他のオプションはすべて非表示になります。他のオプションの場合、対応するオプションが表示されます。


CSS コードは次のとおりです。

.TopTen .hiddencontent
{
display: none;
}
.TopTen .activecontent

{

text-align: justify;

padding: 2px;

border: 0px Solid;

z-index: 2;

}
a.active {
background:#678995; }

JS コードは次のとおりです:

著者別の最新記事
最新の問題
Chrome での HTML Web ページのページネーション フルページの div コンテナの後にページネーションしようとしています。紹介ページを読み込むのと同じように、下にスクロールすると、一種のナビゲーション センターに入ることができます...
から 2024-04-02 23:26:08
0
1
404
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート