一、布局方式
1、內容與tab分離
內容1內容2
內容3內容4
ul,li
.container
.tab-content
.t程式設計客棧ab-content .item
.tab-control
.tab-control ul
.tab-control li
.tab-control li:hover
.tab-control a
.tab-control a::after
.tab-content .item:target
2、內容與tab一體
ul,li,p
.container
.container ul
.container .item
.container .item .title
.container .item .content
.ml1
.ml2
.ml3
.active
.container .item:hover
.container .item:hover .title
利用負margin，將內容區對齊，然後內容去新增背景色，避免不同tab對應的區域透視重疊。
二、css實現互動
1、錨點實現（target）
(1)針對布局一：item從上往下排列，父元素tab-content加上overflow:hidden。利用錨點，點選不同a標籤的時候，具有對應id的item會切換到tab-content的檢視中，然後利用hover給tab按鈕加上切換樣式。
內容1www.cppcns.comquot;>內容2
內容3內容4
ul,li
.container
.tab-content
.tab-content .item
.tab-control
.tab-control ul
.tab-control li
.tab-control li:hover
.tab-control a
.tab-control a::after
上述方法只是利用了錨點切換，沒有使用：target。修改css
ul,li
.container
.tab-content
.tab-content .item
.tab-control
.tab-control ul
.tab-control li
.tab-control li:hover
.tab-control a
.tab-control a::after
.tab-content .item:target
item使用絕對定位，然後使用:target修改元素z-index達到切換效果（其實也可以通過控制元素的display來達到切換效果）
（2）針對布局二：
ul,li,p
.container
.container ul
.container .item
.container .item .title
.container .item a
.container .item .content
.ml1
.ml2
.ml3
.active
.container .item:target
.container .item:target .title
2、hover實現
（1）針對布局一：
無法簡單的通過css實現
（2）針對布局二：
ul,li,p
.container
.container ul
.container .item
.container .item .title
.container .item .content
.ml1
.ml2
.ml3
.active
.container .item:hover
.container .item:hover .title
3、label與:checked實現
（1）針對布局一：
內容1內容2
內容3內容4
ul,li .container
.tab-content
input
.tab-content .item
.tab-control
.tab-control ul
.tab-control li
.tab-control li:hover
.tab-control label
.tab-control label::after
.tab-content .radio-item
.tab-content .radio-item:checked+.item
利用css :checked與+（選擇緊接在另乙個元素後的元素，而且二者有相同的父元素）選擇符。
（2）針對布局二：
ul,li,p
.container
.container ul
.container .item
.container .item .title
.container .item .content
.ml1
.ml2
.ml3
.radio-item
.radio-item:checked~.title
.radio-item:checked~.content
本文標題: css實現tab布局的簡單例項(必看)
本文位址:
ViewPager實現Tab布局
android.support.v4.view.viewpager android id id content android layout width fill parent android layout height 0dp android layout weight 1 android.sup...
CSS例項 CSS實現的等高網頁布局
為了讓網頁更美觀 協調，有的時候需要用到左右等到布局，傳統的等高布局是用 j ascript 實現的，現在來看看 silence 發明的真正的 css 實現的等高布局。為了讓網頁更美觀 協調，有的時候需要用到左右等到布局，傳統的等高布局是用 j ascript 實現的，現在來看看 silence 發...
CSS布局例項
接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統 方法實現的布局，用div也可以實現。技術有乙...