歡迎點擊「算法與編程之美」↑關注我們！
本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
歡迎加入團隊圈子！與作者面對面！直接點擊！
1.選項卡介紹
在平時瀏覽網頁時，大家經常會使用選項卡來切換頁面，在設計網頁的過程中，也常用選項卡來整合內容，美化頁面效果。簡而言之，選項卡就是設置選項的模塊，每個選項卡代表一個活動的區域，點擊不同的區域，即可展示不同的內容。
2.思路
平常的選項卡製作時，總要引入JavaScript才能實現切換效果，本次選項卡的製作主要是通過CSS來實現的。
用div來頁面佈局，實現矩形效果，完成導航欄和選項卡頁面效果。
用a標籤來對選項卡的導航欄和內容界面進行設置。
使用:nth-child(n)和class方法來對頁面進行切換。
3.過程
（1）首先創建一個div盒子模型，用作導航欄模塊。
<div> <a href="#">風景圖片</a> <a href="#">最新資訊</a> <a href="#">熱點HOT</a> <a href="#">瀏覽記錄</a> </div> |
（2）用CSS對導航欄的寬高，字體進行設置。（當行高和盒子高度上下一致時，會使單行文字上下居中）
.tab{ width:1200px; height: 575px; margin:50px auto; } a{ display:block;/*行內元素變爲塊級元素*/ float:left; width: 300px; height: 75px; background-image: url(../img/1.png); background-repeat:no-repeat; background-position: center; text-align: center; line-height:75px; color:white; text-decoration:none; font-family:"楷體"; font-size:18px; font-weight:bold; } |
（3）創建一個div作爲選項卡內容框架，並用CSS來設置頁面切換效果。其中，nth-child(n)選擇器匹配父元素中的第n個子元素，元素類型沒有限制。（n可以是一個數字，一個關鍵字，或者一個公式）a:hover~.pic表示a標籤和.pic是兄弟關係，不是包含關係。
<div></div> .pic{ height: 575px; background-image: url(../img/n1.jpg); } a:hover{ color:#ffcc00; background-image: url(../img/2.png); } a:hover~.pic{ background-image: url(../img/n1.jpg); } a:nth-child(2):hover~.pic{ background-image: url(../img/n2.jpeg); } a:nth-child(3):hover~.pic{ background-image: url(../img/星球.jpg); } a:nth-child(4):hover~.pic{ background-image: url(../img/3.jpg); } |
效果圖如下：
圖1
圖2
END
編 輯 | 王楠嵐
責 編 | 楊 曦
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！