使用純CSS制作一個手風琴組件

本篇文章里，我們一起學習下如何使用 CSS checkbox hack 技巧制作一個響應(yīng)式的手風琴組件，這個組件完全基于CSS，沒有JavaScript腳本，基于窗口大小進行水平和垂直之間進行切換。為了讓大家更好理解，我將和大家一起一步步的進行完成。

手風琴樣式效果：

下圖是我們要制作的手風琴效果

本示例需要你具備一些關(guān)于flexbox的知識。

首先，我們先了解下什么是 CSS Checkbox Hack ？

CSS Checkbox Hack 允許你通過復選框（Checkbox）是否選中（或單選按鈕radio buttons）來控制某些特定的樣式。這里運用的是：checked 偽類選擇器，其意思就是”如果選中了表單（復選框、單選按鈕），則應(yīng)用相關(guān)樣式規(guī)則“

我們通常隱藏表單控件，然后結(jié)合<lable>來控制復選框或單選框的選擇，制作一些特殊的效果，因此用戶無法感知復選框的存在。

這是我的最愛，不僅可以完成本文的例子，還會制作一些更有趣例子，稍后會介紹到。

1、創(chuàng)建 HTML 標記結(jié)構(gòu)

在本練習中，我們從維基百科找一些四種不同類型的內(nèi)容介紹：動物、植物、空間和河流。然后我們創(chuàng)建相應(yīng)的單選按鈕，并為其分配內(nèi)容關(guān)鍵詞：

建立無序列表

接下來，我們設(shè)置一個包含4行的無序列表，每行列表<li>包含了標題項<lable>標簽和內(nèi)容項<div>標簽：

首先我們在標題選型卡外層定義標簽，這里的關(guān)鍵所在就是這個標簽，尤其是 for 這屬性，指向?qū)?yīng)表單的id的屬性，label 標簽不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內(nèi)點擊文本，就會觸發(fā)此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。這就是這個案例的關(guān)鍵所在。
<li>標簽里<div>內(nèi)容，我們用來定義選項卡里對應(yīng)的內(nèi)容。

基于上面的思路，整理后無需列表內(nèi)容如下：

2、定義相關(guān)樣式

準備好上述的HTML內(nèi)容后，我們來定義相關(guān)樣式，首先我們需要隱藏我們的幾個單選按鈕，我們可以使用left屬性，將其移除屏幕顯示區(qū)域，示例代碼如下：

接下來我們來定義手風琴整體外觀布局，讓其具有響應(yīng)式，用到了彈性盒子布局，設(shè)置display:flex, 同時又應(yīng)用到了CSS的自定義變量新屬性，方便我們進行統(tǒng)一設(shè)置和修改，示例代碼如下：

然后我們定義無需列表<li>標簽的樣式，也設(shè)置其為彈性盒子布局，示例代碼如下：

為了區(qū)分每個<li> 選型，讓其有分割的感覺，我們來定義其邊框?qū)傩裕纠a如下：

每個選項卡容器，讓標題默認在縱軸上進行布局，然后設(shè)置標題選項卡的寬度為70px，以及定義鼠標經(jīng)過的外觀樣式:

由于寬度有限，我們需要旋轉(zhuǎn)標題文字的方向，讓其由下往上垂直顯示，示例代碼如下：

最后我們來定義選項卡內(nèi)容文本的樣式，我們應(yīng)該默認第一個選項卡的內(nèi)容出于展示狀態(tài)，其它選項卡隱藏，這里我們先讓所有的選項卡默認隱藏，后面我們會使用 Checkbox Hack 讓選中的選項卡內(nèi)容處于展示狀態(tài)。示例代碼如下：

3、Checkbox Hack: 切換選型內(nèi)容

這部分代碼就像變魔法一般，當我們點擊每個標題選型卡內(nèi)容時就響應(yīng)顯示相關(guān)內(nèi)容，這里我們使用了 :checked 偽類，以及結(jié)合 CSS的后續(xù)同胞選擇器（~）以及緊鄰同胞選擇器（+）。

接下來我們來動手實踐吧，為了讓對應(yīng)選中的選項卡內(nèi)容可見，我們使用 display: flex 讓其可見，并使用 align-items: center 屬性讓文本內(nèi)容垂直居中。同時為了讓用戶區(qū)分選中了哪個選項卡，我們需要定義選項卡出于選中狀態(tài)時的標題顏色。

最后定義一個可選的外觀樣式，當每個單選按鈕獲取焦點時，我們?yōu)閘able標簽定義outline屬性，這個細節(jié)幫組我們增強組件的可訪問性。（accessibility）

以下是完成后的CSS代碼內(nèi)容：

4、響應(yīng)式處理

接下來我們來處理下，在小屏或可視窗口低于 650px 的情況，幸虧我們使用了彈性盒子布局，在這種情況下，我們讓手風琴垂直顯示，也就是每個選項卡縱向分布，每個選項卡的標題內(nèi)容橫向分布。示意圖效果如下：

對應(yīng)的代碼如何實現(xiàn)呢？首先我們需要更改無序列表讓其為縱向分布，flex-direction: column；然后更改選型卡的標題區(qū)域布局為橫向分布，flex-direction: row，示意代碼如下：

5、處理內(nèi)容有限的情況

在我們的案例中，每個選項卡的內(nèi)容都很多，看起來很漂亮。但是為了確保沒有足夠內(nèi)容支撐時，手風琴效果不走樣，我們需要進行一些樣式上的特殊處理，效果如下圖所示：

我們需要在每個當前選中狀態(tài)的選項卡里添加flex-grow: 1屬性，并不是所有的選項卡，讓當前選中的選項卡里占據(jù)所有剩余寬度，我們需要在li標簽上增加用戶自定義屬性（data-radio）方便我們來定義樣式。
接下來我們需要在選項卡的內(nèi)容部分添加 flex-grow: 1 的規(guī)則，讓選項卡的內(nèi)容比較少是也能占滿整個父元素容器的寬度。
最后為選項卡的內(nèi)容定添加內(nèi)容居中的屬性，示意代碼如下：justify-content: center

基于以上思路，我們調(diào)整后的html代碼如下，只是在li標簽上增加了自定義屬性（data-radio），代碼如下：

CSS部分修部分的代碼如下：

最終完成的代碼

1、HTML代碼部分：

2、CSS代碼部分：

小節(jié)

今天的案例就和大家聊到這里，通過本文，我們一起學習了如何使用 CSS checkbox hack 技術(shù)完成了一個純CSS手風琴效果， CSS checkbox hack 不僅能做手風琴效果，還有更多有趣的效果等待你挖掘，比如實現(xiàn)常見的導航切換、點擊按鈕彈出層的效果，不用寫一行JS代碼，是不是覺得CSS很神奇呢，在接下來的文章，我將會給大家繼續(xù)分享 CSS checkbox hack 的案例，敬請期待。

選按鈕

單選按鈕主要是讓網(wǎng)頁瀏覽者在一組選項里只能選擇一個。代碼格式如下。

其中type="radio"定義單選按鈕；name屬性定義單選按鈕的名稱，單選按鈕都是以組為單位使用的，在同一組中的單選項都必須用同一個名稱；value屬性定義單選按鈕的值，在同一組中域值必須是不同。

（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。

（2）在瀏覽器中打開文件，預覽效果圖如下所示，即可看到5個單選按鈕，用戶只能同時選擇其中一個。

復選框

復選框主要是讓網(wǎng)頁瀏覽者在一組選項里可以同時選擇多個選項。每個復選框都是一個獨立的元素，都必須有唯一的一個名稱。代碼格式如下。

其中type="checkbox"定義復選框；name屬性定義復選框的名稱，在同一組中的復選框都必須用同一個名稱；value屬性定義復選框的值。

（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。

（2）在瀏覽器中打開文件，預覽效果圖如下所示，即可看到5個復選框，其中【人生大事】和【廣告專區(qū)】復選框被選中。

讀本文約需要10分鐘，您可以先關(guān)注我們，避免下次無法找到。

HTML基礎(chǔ)教程上篇介紹了HTML的基礎(chǔ)知識及一些常用的標簽，本篇文章主要介紹HTML的樣式、表單、Table、框架等內(nèi)容。下面我們就一起來了解吧！

01 HTML樣式

所有的HTML可以通過設(shè)置其style屬性來設(shè)置標簽的樣式，下面我們就來演示幾個常用的HTML樣式設(shè)置。

1）設(shè)置標簽寬度與高度

我們創(chuàng)建一個div標簽，然后設(shè)置其高度與寬度，但由于div標簽默認沒有顏色我們看不到效果，所以在設(shè)置其高度與寬度時，同時為其設(shè)置一個背景顏色，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- 給div寬度設(shè)置為一個長寬都為400px的正方形塊，同時背景色代碼塊為#46a6ff -->  
9.   <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>  
10. </body>  
11. </html>

2）設(shè)置字體類型與大小

我們在上面div塊中加入文字，并給加入的文字設(shè)置字體類型與大小，同時為其加粗，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- font-family是設(shè)置字體類型；font-size是設(shè)置字體大小；font-weight是給字體加粗  -->  
9.   <div style="width: 400px; height: 400px;  
10.         background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">  
11.     我是div塊  
12.   </div>  
13. </body>  
14. </html>

3）設(shè)置字體水平與垂直居中

上面我們給div加了字體樣式但并沒有居中，現(xiàn)在我們來看看怎么設(shè)置字體居中

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- text-align給文字設(shè)置水平居中；line-height將其值設(shè)為與height一致，文字內(nèi)容就可以垂直居中   -->  
9.   <div style="width: 400px; height: 400px;  
10.         background-color: #46a6ff; font-family: 'Microsoft YaHei';  
11.         font-size: 40px; font-weight: bold;  
12.         text-align: center; line-height: 400px">  
13.     我是div塊  
14.   </div>  
15. </body>  
16. </html>

02 HTML Table

在HTML頁面開發(fā)時我們經(jīng)常會用到表格進行數(shù)據(jù)展示，HTML的表格是由標簽<table>來定義的，每個表格均有若干行（<tr> 標簽定義），每行被分割為若干單元格（由<td> 標簽定義）。表格中常用的標簽與樣式屬性如下：

下面我們創(chuàng)建兩個表格示列，分別設(shè)置上述屬性具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- 表格示列1 -->  
9.   <table border="1" bordercolor="black" width="450" height="100">  
10.      <caption>表格示列1</caption>  
11.      <tr bgcolor="red" > <!-- tr為一行的起始與結(jié)束 -->  
12.        <th>Column 1</th> <!-- 表格頭 -->  
13.        <th>Column 2</th>  
14.        <th>Column 3</th>  
15.      </tr>  
16.   
17.     <tr bgcolor="cyan"> <!-- 設(shè)置表格背景色 -->  
18.       <td>Data 1</td> <!-- td單元格 -->  
19.       <td>Data 2</td>  
20.       <td>Data 3</td>  
21.     </tr>  
22.   
23.     <tr bgcolor="yellow">  
24.       <td colspan="2">New Data 1</td> <!-- 設(shè)置該單元格合并這一行上的兩列 -->  
25.       <td>New Data 2</td>  
26.     </tr>  
27.   </table>  
28.   
29.   <!-- 表格示列2 -->  
30.   <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設(shè)置單元格寬與高為百分比 -->  
31.      <caption> 表格示列2</caption>  
32.       <tr bgcolor="red" >  
33.         <th>Column 1</th>  
34.         <th>Column 2</th>  
35.         <th>Column 3</th>  
36.      </tr>  
37.   
38.      <tr>  
39.        <td rowspan="2">Data 1</td> <!-- 設(shè)置該單元格合并這一列上的兩行 -->  
40.        <td>Data 2</td>  
41.        <td>Data 3</td>  
42.      </tr>  
43.   
44.      <tr>  
45.       <td>Data 2</td>  
46.       <td>Data 3</td>  
47.      </tr>  
48.   </table>  
49. </body>  
50. </html>

03 HTML表單

HTML 表單是一個包含表單元素的區(qū)域，用于搜集不同類型的用戶輸入。HTML表單在我們?nèi)粘g覽網(wǎng)頁時很常見，比如各網(wǎng)站的登錄頁面，就是典型的HTML表單應(yīng)用。HTML表單常用的標簽元素有如下幾種：

1）Text input：字符輸入框，一般賬戶與密碼輸入都是用的該標簽

2）Text area：文本輸入框，一般需要輸入較多文本內(nèi)容使用

3）Radio button：單選框

4）Checkbox：多選框

5）Select box：選擇框

6）File select：文件選擇框

7）Buttons：按鈕

表單元素常用的屬性及值設(shè)置如下表所示：

結(jié)合上表我們創(chuàng)建一個表單示列，按照上表的屬性值進行設(shè)置，具體操作如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8. <form>  
9.   <h4>Input輸入框</h4>  
10.   用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>  
11.   密碼 : <input type="password" name="user_pass" ><br>  
12.   <h4> Radio單選框:（name值設(shè)置時必須一致）</h4>  
13.     <input type="radio" name="r_gender"> Male  
14.     <input type="radio" name="r_gender"> Female  
15.     <input type="radio" name="r_gender" checked> Infant  
16.   <h4> Check box多選框 :（name值設(shè)置時必須不一樣）</h4>  
17.     <input type="checkbox" name="c_male" checked> Male  
18.     <input type="checkbox" name="c_female"> Female  
19.     <input type="checkbox" name="c_infant"> Infant  
20.   <h4> Select box :選擇框（單選）</h4>  
21.     <select name="s_box">  
22.       <option value="s_male">Male</option>  
23.       <option value="s_female" selected>Female</option>  
24.       <option value="s_infant">Infant</option>  
25.     </select>  
26.   <h4> Select box :擇框（多選）</h4>  
27.   <!-- 選擇項默認展示4個，其它的選擇內(nèi)容需要通過鼠標滾動 -->  
28.   <select name="s_box" size="4" multiple>  
29.     <option value="s_male" selected>Male</option>  
30.     <option value="s_female" selected>Female</option>  
31.     <option value="s_infant">Infant 1</option>  
32.     <option value="s_infant" selected>Infant 2</option>  
33.     <option value="s_infant">Infant 3</option>  
34.     <option value="s_infant">Infant 4</option>  
35.   </select>  
36.   <h4> Text文本輸入框</h4>  
37.     <textarea rows="10" cols="80" name="txt_area">文本框  
38.        HTML基礎(chǔ)教程  
39.        表單示列  
40.     </textarea>
41.   </form>
42. </body>
43. </html>

下面我們再創(chuàng)建一個button的表單示列，具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!-- 設(shè)置表單提交方式為get, 跳轉(zhuǎn)的url為"http://www.baidu.com" -->  
10.   <form method="get" action="http://www.baidu.com">  
11.     <h4> Buttons按鈕表單示列</h4>  
12.     用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>  
13.     密碼 : <input type="password" name="user_pass" ><br>  
14.     <!-- 點擊在游覽器上方顯示Say Hello -->  
15.     <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>  
16.     <!-- 點擊跳轉(zhuǎn)到百度 -->  
17.     <input type="submit" name="b_submit" value="百度走起"/>  
18.     <!-- 點擊重置會重置表單內(nèi)輸入的內(nèi)容 -->  
19.     <input type="reset" name="b_reset" value="重置"/><br>  
20.   </form>  
21.   
22. </body>  
23. </html>

04 HTML框架iframe

使用HTML框架可以在同一個瀏覽器窗口中顯示多個頁面，iframe的語法格式如下所示

1. <iframe src="URL">  
2.   <!-- URL指向不同的頁面 -->  
3. </iframe>  
我們現(xiàn)在創(chuàng)建一個iframe框架使用示列具體如下
1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎(chǔ)教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>iframe使用示列一(簡單的iframe使用)</h4>  
10.   <!-- 給iframe顯示區(qū)域設(shè)置寬度為800，高度為200，同時去掉其邊框 -->  
11.   <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>  
12.   
13.   <br/>  
14.   <br/>  
15.   
16.   <h4>iframe使用示列二(通過點擊指定鏈接在iframe中顯示)</h4>  
17.   <!-- a標簽中的target名稱必須與iframe的name一致都為qq -->  
18.   <a href="http://www.qq.com" target="qq">點擊我在iframe中顯示qq頁面</a>  
19.   <iframe name="qq" width="800" height="200" frameborder="0"></iframe>  
20. </body>  
21. </html>

05 總結(jié)

至此我們《HTML基礎(chǔ)教程》就全部講完了，有任何問題都可以在文章后面留言。最后如果喜歡本篇文章不要忘了點贊、關(guān)注與轉(zhuǎn)發(fā)哦！

-END-

@IT管理局專注計算機領(lǐng)域技術(shù)、大學生活、學習方法、求職招聘、職業(yè)規(guī)劃、職場感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇，和你一同成長。

文章推薦：

程序員都必掌握的前端教程之HTML基礎(chǔ)教程（上）

在線咨詢

上一篇：自定義代碼生成器（上）
下一篇：“遠特聚聯(lián)”遭異地凍結(jié)賬戶宣傳“輕松賺錢”卻暗藏涉嫌傳銷風險

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商