HTML 中的布局和腳部

局和腳部是 HTML 頁面中兩個重要的區(qū)域。布局區(qū)域用于組織頁面上的內(nèi)容，而腳部區(qū)域通常包含與頁面內(nèi)容無關(guān)但重要的信息。

布局區(qū)域

布局區(qū)域用于將頁面上的內(nèi)容分組和排列。最常用的布局區(qū)域是：

主內(nèi)容區(qū)：包含頁面上的主要內(nèi)容。
側(cè)欄：包含與頁面內(nèi)容相關(guān)的額外信息，例如導(dǎo)航菜單或側(cè)邊欄。
腳部：包含與頁面內(nèi)容無關(guān)但重要的信息，例如版權(quán)信息或聯(lián)系方法。

腳部區(qū)域

腳部區(qū)域通常包含以下內(nèi)容：

版權(quán)信息：表明頁面的所有權(quán)歸于特定個人或組織。
聯(lián)系方式：提供與發(fā)送電子郵件或訪問其他網(wǎng)站的鏈接。
社交媒體鏈接：提供與頁面或組織的社交媒體帳號。

布局和腳部的組合

布局區(qū)域可以包含腳部區(qū)域。例如，以下代碼展示了如何將腳部區(qū)域包含在布局區(qū)域內(nèi)：

html

<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
</head>
<body>
  <div id="layout">
    <!-- ... -->
    <footer>
      <p>? 20 vicisslet 20 vicisslet</p>
      <p>聯(lián)系：...</p>
      <p>社交媒體：...</p>
    </footer>
  </div>
</body>
</html>

最佳實(shí)踐

使用合適的布局區(qū)域來組織頁面內(nèi)容。
在腳部區(qū)域中提供與頁面內(nèi)容無關(guān)但重要的信息。
保持腳部區(qū)域簡短且易于瀏覽。

結(jié)論

布局和腳部是 HTML 頁面中兩個重要的區(qū)域。通過了解布局和腳部區(qū)域的用法，您可以創(chuàng)建擁有清晰結(jié)構(gòu)和良好閱讀體驗(yàn)的頁面。

天9:00開始

2020湖北省公務(wù)員考試

可以打印準(zhǔn)考證了

距離8月22日省考筆試還有5天

你們都準(zhǔn)備好了嗎？

好消息來了！

今年省考筆試

黃石設(shè)置了5個考點(diǎn)！

少了舟車勞頓，更能安心備考

一定會讓你更安心地備考

黃石考區(qū)具體考點(diǎn)及路線導(dǎo)航如下

湖北工程職業(yè)學(xué)院考點(diǎn)

高速路出口（起）

至湖北工程職業(yè)學(xué)院（終）

考生可乘坐

8路、17路、25路、38路、42路

公交車到湖北工程職院站下車

步行至湖北工程職業(yè)學(xué)院

黃石市第二中學(xué)考點(diǎn)

高速路出口（起）

至黃石市第二中學(xué)（終）

考生可乘坐

5路、17路、21路

公交車到二中站下車

步行至黃石市第二中學(xué)

黃石市第七中學(xué)考點(diǎn)

高速路出口（起）

至黃石市第七中學(xué)（終）

考生可乘坐

1路、23路

公交車到七中站下車

步行至黃石市第七中學(xué)

黃石市第十四中學(xué)考點(diǎn)

高速路出口（起）

至黃石市第十四中學(xué)（終）

考生可乘坐

3路、6路、8路、9路、14路、24路

公交車到十四中站下車

步行至黃石市第十四中學(xué)

黃石市第十六中學(xué)考點(diǎn)

考生可乘坐

9路、14路、19路、25路、33路、

55路、62路公交車到十六中站下車

步行至黃石市第十六中學(xué)

省考倒計(jì)時

天

網(wǎng)上打印準(zhǔn)考證須知

繳費(fèi)確認(rèn)成功后，報(bào)考人員應(yīng)于指定時間登錄湖北省人事考試網(wǎng)下載打印準(zhǔn)考證。8月17日9:00至筆試前從該網(wǎng)站自行下載打印準(zhǔn)考證。筆試準(zhǔn)考證保存到公示擬錄用人員階段。

報(bào)考線下職位的人員，由招錄機(jī)關(guān)繳費(fèi)確認(rèn)并發(fā)放準(zhǔn)考證。面向村（社區(qū)）干部考錄鄉(xiāng)鎮(zhèn)（街道）公務(wù)員的職位，不收取報(bào)名費(fèi)，由各地公務(wù)員主管部門組織報(bào)名、下載打印準(zhǔn)考證。

筆試內(nèi)容

報(bào)考面向村（社區(qū)）干部考試錄用鄉(xiāng)鎮(zhèn)（街道）公務(wù)員職位的，只進(jìn)行《綜合知識測試》一科考試。

其他職位均須參加《行政職業(yè)能力測驗(yàn)》和《申論》兩科考試。鄉(xiāng)鎮(zhèn)（街道）機(jī)關(guān)職位單獨(dú)命制《申論》題本。

報(bào)考公安機(jī)關(guān)職位的人員，還需參加公安專業(yè)科目考試。筆試有關(guān)要求詳見考試大綱。

筆試時間

8月22日上午 9：00-11：00 行政職業(yè)能力測驗(yàn)

8月22日下午14：00-16：30 申論

8月23日上午 9：00-11：00 公安專業(yè)科目考試

8月23日上午 9∶00-12∶00 綜合知識測試

防疫須知

2020湖北省公務(wù)員四級聯(lián)考筆試考生疫情防控須知

具體內(nèi)容如下

1.考生在備考過程中，要做好自我防護(hù)，注意個人衛(wèi)生，加強(qiáng)營養(yǎng)和合理休息，防止過度緊張和疲勞，以良好心態(tài)和身體素質(zhì)參加考試，避免出現(xiàn)發(fā)熱、咳嗽等異常癥狀。考試當(dāng)天要采取合適的出行方式前往考點(diǎn)，與他人保持安全間距。

2.考生應(yīng)至少提前1個小時到達(dá)考點(diǎn)，并自備口罩做好個人防護(hù)工作。考試期間，應(yīng)全程佩戴口罩，但在接受身份驗(yàn)證時須臨時摘除口罩。

3.考生入場前應(yīng)主動配合接受體溫檢測，出示健康碼(不限湖北省)，健康碼為綠碼及現(xiàn)場測量體溫正常(<37.3℃)，方可進(jìn)入考試區(qū)域。體溫測量若出現(xiàn)發(fā)熱等可疑癥狀的人員，應(yīng)至臨時等候區(qū)復(fù)測體溫。復(fù)測仍超過37.3℃的，經(jīng)考點(diǎn)現(xiàn)場醫(yī)療衛(wèi)生專業(yè)人員評估后，具備參加考試條件的，在隔離考場參加考試;不具備相關(guān)條件的，按相關(guān)疾控部門要求采取防控措施。

考前14天有國內(nèi)疫情中高風(fēng)險地區(qū)旅居史的考生，應(yīng)提供考前7天內(nèi)核酸檢測陰性結(jié)果報(bào)告。疫情風(fēng)險等級查詢可使用“國務(wù)院客戶端”微信小程序點(diǎn)擊“疫情風(fēng)險查詢”，或在微信小程序中搜索“疫情風(fēng)險等級查詢”，或登陸http://bmfw.www.gov.cn/yqfxdjcx/index.html,選擇查詢地區(qū)即可了解該地的疫情風(fēng)險等級。

4.考前3天有發(fā)熱癥狀的考生，應(yīng)在入場檢測體溫前主動向工作人員報(bào)告，經(jīng)考點(diǎn)現(xiàn)場醫(yī)療衛(wèi)生專業(yè)人員評估后，具備參加考試條件的，在臨時隔離考場繼續(xù)考試;不具備相關(guān)條件的，按相關(guān)疾控部門要求采取防控措施。

5.考生在進(jìn)入考場后及考試期間出現(xiàn)發(fā)熱癥狀的，應(yīng)主動告知監(jiān)考人員，經(jīng)考點(diǎn)現(xiàn)場醫(yī)療衛(wèi)生專業(yè)人員評估后，具備參加考試條件的，在臨時隔離考場繼續(xù)考試;不具備相關(guān)條件的，按相關(guān)疾控部門要求采取防控措施。

6.考試期間，考生要自覺遵守考試紀(jì)律，在考前入場及考后離場等聚集環(huán)節(jié)，應(yīng)服從考務(wù)工作人員安排有序進(jìn)行。進(jìn)出考場、如廁時須與他人保持1米以上距離，避免近距離接觸交流。考試過程中，因個人原因需要接受健康檢查或需要轉(zhuǎn)移到隔離考場而耽誤的考試時間不予補(bǔ)充延時。

7.請考生備齊個人防護(hù)用品，合理安排交通和食宿，注意飲食衛(wèi)生，預(yù)防中暑。

8.請考生盡早打印準(zhǔn)考證，打印前應(yīng)認(rèn)真閱讀本須知，承諾已知悉須知事項(xiàng)，并自愿承擔(dān)相關(guān)責(zé)任。凡隱瞞或謊報(bào)旅居史、接觸史、健康狀況等疫情防控重點(diǎn)信息，不配合工作人員進(jìn)行防疫檢測、詢問、排查、送診等造成嚴(yán)重后果的，按照疫情防控相關(guān)規(guī)定嚴(yán)肅處理。

湖北省人事考試院

2020年8月5日

編輯丨胡穎

來源 | 黃石廣電

審核丨徐道發(fā)

監(jiān)制丨向天笑

出品丨黃石日報(bào)融媒體中心

聲明：轉(zhuǎn)載此文是出于傳遞更多信息之目的。若有來源標(biāo)注錯誤或侵犯了您的合法權(quán)益，請作者持權(quán)屬證明與本網(wǎng)聯(lián)系，我們將及時更正、刪除，謝謝。

是否曾經(jīng)試著點(diǎn)擊或點(diǎn)擊一個元素(例如:按鈕、鏈接)，并且注意到只有單擊該元素的特定區(qū)域，它才會響應(yīng)？

必生這種情況是因?yàn)榭牲c(diǎn)擊區(qū)域未應(yīng)用于整個元素。為了更加清楚，請參見下圖，左圖可點(diǎn)擊區(qū)別(圈紅部分)明顯比右圖的小很多，所以右圖的實(shí)現(xiàn)用戶體驗(yàn)會更好。

對于本文，會介紹一些事例，并通過事例演示如何增加可點(diǎn)擊區(qū)別，提高用戶體驗(yàn)。

WCAG準(zhǔn)則

WCAG全稱Web Content Accessibility Guidelines 網(wǎng)頁內(nèi)容無障礙瀏覽準(zhǔn)則，簡單的說就是為了方便殘障人士（包括低視患者，盲人，聾人，學(xué)習(xí)障礙，行動不便，認(rèn)知障礙....）訪問Web內(nèi)容而制定的相關(guān)標(biāo)準(zhǔn)，可以使網(wǎng)站更加人性化。

舉個例子，在WCAG準(zhǔn)則2.3.2中規(guī)定：網(wǎng)頁不包含任何閃光超過3次/秒的內(nèi)容。

用戶應(yīng)該能夠使用臺式機(jī)/筆記本電腦上的鍵盤以及移動設(shè)備或平板電腦上的觸摸屏來操作輸入。不要在移動設(shè)備屏幕上將按鈕設(shè)置得太小，以免按下正確的按鈕。觸摸目標(biāo)的最小尺寸最好至少為44 x 44像素。

費(fèi)茲法則

**費(fèi)茲法則（Fitts law)**是一個人機(jī)互動以及人體工程學(xué)中人類活動的模型；它預(yù)測了快速移動到目標(biāo)區(qū)域所需的時間是目標(biāo)區(qū)域的距離和目標(biāo)區(qū)域大小的函數(shù)。

在下面的圖中，我模擬了兩個按鈕的不同情況。在左側(cè)，按鈕更小，更遠(yuǎn)，用戶需要更多的時間與它互動。在右側(cè)，按鈕大小更大，更接近于它的同級輸入元素，這將使交互更容易、更快。

接著，我們再來看看一些更加真實(shí)例子。注意：記住WCAG準(zhǔn)則 和費(fèi)茲法則 的概念。

按鈕

在需要時使用實(shí)際真實(shí)<button>(包含可點(diǎn)擊區(qū)域)非常重要。下面的示例來自我使用的在線銀行系統(tǒng)：

<div class="navig next" onclick="validateLogin()">Next</div>

這是上面按鈕的HTML的GIF圖像。我把鼠標(biāo)懸停在按鈕上，光標(biāo)仍然是一個指針，這很好。不過，我也可以選擇文本和懸停時，有一個文本光標(biāo)!如果使用了正確的元素，就不會發(fā)生這種情況。

當(dāng)使用HTML<button>元素時，會獲得下面效果：

可通過鼠標(biāo)，鍵盤或觸摸訪問
可以通過鍵盤選中
有對應(yīng)的 JavaScript 方法

有些元素，我們需要添加 padding，原因有二：

讓它更美觀
讓它變大，這樣更容易被注意到

鏈接

之前在做導(dǎo)航的時候，犯了一個錯誤，應(yīng)該是給 a 標(biāo)簽添加 padding 而不是 li:

<nav>
  <ul>
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><nav href="#">Products</nav></li>
    <li class="nav-item"><a href="#">Store</a></li>
    <li class="nav-item"><a href="#">Team</a></li>
  </ul>
</nav>

// css

.nav-item {
  padding: 12px 16px;
}

基于上面的HTML和CSS，可點(diǎn)擊的區(qū)域?qū)⒅皇俏谋荆缦聢D所示：

正確的方法是在a 標(biāo)簽本身上添加padding。請注意，默認(rèn)情況下，padding 需要塊元素才有效，而 a 標(biāo)簽是行內(nèi)元素，所以可以給 a 標(biāo)簽設(shè)置block，inline-element或 flex。

.nav-item a {
  display: block;
  padding: 12px 16px;
}

添加了上面的樣式后，可點(diǎn)擊的效果如下：

面包屑導(dǎo)航

假設(shè)可點(diǎn)擊區(qū)域如下所示：

這種體驗(yàn)不是很好，鼠標(biāo)或手指指向屏幕上如此小的目標(biāo)會比較難。在下圖中，它的可點(diǎn)擊區(qū)域更大并且更易于交互。

事例源碼：https://codepen.io/shadeed/pen/PMygee

復(fù)選框和單選按鈕

當(dāng)存在復(fù)選框或單選按鈕元素時，我希望可以單擊它或關(guān)聯(lián)的標(biāo)簽來激活/禁用它。

從用戶體驗(yàn)的角度來看，這是難以訪問和糟糕的。在 HTML 中，可以使用for屬性將標(biāo)簽與輸入框綁定在一起。

<input type="checkbox" id="option1">
<label for="option1">Option 1</label>

或者可以將輸入框放置在標(biāo)簽內(nèi)：

<label for="option1">
    Option 1
    <input type="checkbox" id="option1">
</label>

然后，在<label>元素上添加padding，以使可點(diǎn)擊區(qū)域變大。這樣，問題得以解決，整個復(fù)選框或單選按鈕都是可單擊的，如下圖所

側(cè)邊欄

對于帶有類別的頁面，有時我會注意到列表鏈接沒有擴(kuò)展到其父頁面的整個寬度。也就是說，可點(diǎn)擊區(qū)域僅在文本上，如下圖所示：

解決方法：

刪除<li>元素的 padding，并將其移動到<a>元素
通過添加display: block使a標(biāo)簽的寬度等于其父鏈接的寬度。

.nav-item a {
    /*Other styles*/
    padding: 12px 16px;
    display: block;
}

添加后，如下所示：

真實(shí)案例

在最近的Twitter更新中，導(dǎo)航設(shè)計(jì)在可點(diǎn)擊區(qū)域大小方面存在問題。最初，它僅與文本相關(guān)，如下面的屏幕截圖所示，但他們在收到反饋后將其修復(fù)。

章節(jié)標(biāo)題

在某些情況下，需要在章節(jié)標(biāo)題的遠(yuǎn)端添加“查看更多”按鈕或箭頭。在下面的示例中，我將箭頭放置在假圓中，以便可以正確地使箭頭居中。

通常情況下，箭頭周圍的間距可以使用padding或width和height。

使用偽元素來增加可點(diǎn)擊區(qū)域

僅通過改變元素的寬度和高度或使用padding，并不總是能夠使可點(diǎn)擊區(qū)域變大，這時候就需要偽元素救場了。

這個想法是，偽元素屬于其父元素，因此當(dāng)我們創(chuàng)建具有特定寬度和高度的偽元素時，它將充當(dāng)其父元素的單擊/觸摸/懸停區(qū)域。

在下圖中，我在菜單按鈕中添加了:after偽元素:

.menu-2:after {
  content: "";
  position: absolute;
  left: 55px;
  top: 0;
  width: 50px;
  height: 50px;
  background: #e83474;
  /*Other styles*/
}

事例源碼：https://codepen.io/shadeed/pen/BXXjEg?editors=0100

作者：Ahmad Shadded 譯者：前端小智來源：css-tricks

原文：https://css-tricks.com/enhancing-the-clickable-area-size/

在線咨詢

上一篇：HTML屬性及實(shí)例
下一篇：HTML 音頻(Audio)

您的項(xiàng)目需求

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

整合營銷服務(wù)商

HTML 中的布局和腳部

WCAG準(zhǔn)則

費(fèi)茲法則

按鈕

鏈接

面包屑導(dǎo)航

復(fù)選框和單選按鈕

側(cè)邊欄

真實(shí)案例

章節(jié)標(biāo)題

使用偽元素來增加可點(diǎn)擊區(qū)域

您的項(xiàng)目需求