整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
局和腳部是 HTML 頁(yè)面中兩個(gè)重要的區(qū)域。布局區(qū)域用于組織頁(yè)面上的內(nèi)容，而腳部區(qū)域通常包含與頁(yè)面內(nèi)容無(wú)關(guān)但重要的信息。
布局區(qū)域
布局區(qū)域用于將頁(yè)面上的內(nèi)容分組和排列。最常用的布局區(qū)域是：
腳部區(qū)域
腳部區(qū)域通常包含以下內(nèi)容：
布局和腳部的組合
布局區(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í)踐
結(jié)論
布局和腳部是 HTML 頁(yè)面中兩個(gè)重要的區(qū)域。通過(guò)了解布局和腳部區(qū)域的用法，您可以創(chuàng)建擁有清晰結(jié)構(gòu)和良好閱讀體驗(yàn)的頁(yè)面。
天9:00開(kāi)始
2020湖北省公務(wù)員考試
可以打印準(zhǔn)考證了
距離8月22日省考筆試還有5天
你們都準(zhǔn)備好了嗎？
好消息來(lái)了！
今年省考筆試
黃石設(shè)置了5個(gè)考點(diǎn)！
少了舟車(chē)勞頓，更能安心備考
一定會(huì)讓你更安心地備考
黃石考區(qū)具體考點(diǎn)及路線導(dǎo)航如下
01
湖北工程職業(yè)學(xué)院考點(diǎn)
高速路出口（起）
至湖北工程職業(yè)學(xué)院（終）
考生可乘坐
8路、17路、25路、38路、42路
公交車(chē)到湖北工程職院站下車(chē)
步行至湖北工程職業(yè)學(xué)院
02
黃石市第二中學(xué)考點(diǎn)
高速路出口（起）
至黃石市第二中學(xué)（終）
考生可乘坐
5路、17路、21路
公交車(chē)到二中站下車(chē)
步行至黃石市第二中學(xué)
03
黃石市第七中學(xué)考點(diǎn)
高速路出口（起）
至黃石市第七中學(xué)（終）
考生可乘坐
1路、23路
公交車(chē)到七中站下車(chē)
步行至黃石市第七中學(xué)
04
黃石市第十四中學(xué)考點(diǎn)
高速路出口（起）
至黃石市第十四中學(xué)（終）
考生可乘坐
3路、6路、8路、9路、14路、24路
公交車(chē)到十四中站下車(chē)
步行至黃石市第十四中學(xué)
05
黃石市第十六中學(xué)考點(diǎn)
考生可乘坐
9路、14路、19路、25路、33路、
55路、62路公交車(chē)到十六中站下車(chē)
步行至黃石市第十六中學(xué)
省考倒計(jì)時(shí)
5
天
網(wǎng)上打印準(zhǔn)考證須知
繳費(fèi)確認(rèn)成功后，報(bào)考人員應(yīng)于指定時(shí)間登錄湖北省人事考試網(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ù)員主管部門(mén)組織報(bào)名、下載打印準(zhǔn)考證。
筆試內(nèi)容
報(bào)考面向村（社區(qū)）干部考試錄用鄉(xiāng)鎮(zhèn)（街道）公務(wù)員職位的，只進(jìn)行《綜合知識(shí)測(cè)試》一科考試。
其他職位均須參加《行政職業(yè)能力測(cè)驗(yàn)》和《申論》兩科考試。鄉(xiāng)鎮(zhèn)（街道）機(jī)關(guān)職位單獨(dú)命制《申論》題本。
報(bào)考公安機(jī)關(guān)職位的人員，還需參加公安專業(yè)科目考試。筆試有關(guān)要求詳見(jiàn)考試大綱。
筆試時(shí)間
8月22日上午 9：00-11：00 行政職業(yè)能力測(cè)驗(yàn)
8月22日下午14：00-16：30 申論
8月23日上午 9：00-11：00 公安專業(yè)科目考試
8月23日上午 9∶00-12∶00 綜合知識(shí)測(cè)試
防疫須知
2020湖北省公務(wù)員四級(jí)聯(lián)考筆試考生疫情防控須知
具體內(nèi)容如下
1.考生在備考過(guò)程中，要做好自我防護(hù)，注意個(gè)人衛(wèi)生，加強(qiáng)營(yíng)養(yǎng)和合理休息，防止過(guò)度緊張和疲勞，以良好心態(tài)和身體素質(zhì)參加考試，避免出現(xiàn)發(fā)熱、咳嗽等異常癥狀。考試當(dāng)天要采取合適的出行方式前往考點(diǎn)，與他人保持安全間距。
2.考生應(yīng)至少提前1個(gè)小時(shí)到達(dá)考點(diǎn)，并自備口罩做好個(gè)人防護(hù)工作。考試期間，應(yīng)全程佩戴口罩，但在接受身份驗(yàn)證時(shí)須臨時(shí)摘除口罩。
3.考生入場(chǎng)前應(yīng)主動(dòng)配合接受體溫檢測(cè)，出示健康碼(不限湖北省)，健康碼為綠碼及現(xiàn)場(chǎng)測(cè)量體溫正常(<37.3℃)，方可進(jìn)入考試區(qū)域。體溫測(cè)量若出現(xiàn)發(fā)熱等可疑癥狀的人員，應(yīng)至臨時(shí)等候區(qū)復(fù)測(cè)體溫。復(fù)測(cè)仍超過(guò)37.3℃的，經(jīng)考點(diǎn)現(xiàn)場(chǎng)醫(yī)療衛(wèi)生專業(yè)人員評(píng)估后，具備參加考試條件的，在隔離考場(chǎng)參加考試;不具備相關(guān)條件的，按相關(guān)疾控部門(mén)要求采取防控措施。
考前14天有國(guó)內(nèi)疫情中高風(fēng)險(xiǎn)地區(qū)旅居史的考生，應(yīng)提供考前7天內(nèi)核酸檢測(cè)陰性結(jié)果報(bào)告。疫情風(fēng)險(xiǎn)等級(jí)查詢可使用“國(guó)務(wù)院客戶端”微信小程序點(diǎn)擊“疫情風(fēng)險(xiǎn)查詢”，或在微信小程序中搜索“疫情風(fēng)險(xiǎn)等級(jí)查詢”，或登陸http://bmfw.www.gov.cn/yqfxdjcx/index.html,選擇查詢地區(qū)即可了解該地的疫情風(fēng)險(xiǎn)等級(jí)。
4.考前3天有發(fā)熱癥狀的考生，應(yīng)在入場(chǎng)檢測(cè)體溫前主動(dòng)向工作人員報(bào)告，經(jīng)考點(diǎn)現(xiàn)場(chǎng)醫(yī)療衛(wèi)生專業(yè)人員評(píng)估后，具備參加考試條件的，在臨時(shí)隔離考場(chǎng)繼續(xù)考試;不具備相關(guān)條件的，按相關(guān)疾控部門(mén)要求采取防控措施。
5.考生在進(jìn)入考場(chǎng)后及考試期間出現(xiàn)發(fā)熱癥狀的，應(yīng)主動(dòng)告知監(jiān)考人員，經(jīng)考點(diǎn)現(xiàn)場(chǎng)醫(yī)療衛(wèi)生專業(yè)人員評(píng)估后，具備參加考試條件的，在臨時(shí)隔離考場(chǎng)繼續(xù)考試;不具備相關(guān)條件的，按相關(guān)疾控部門(mén)要求采取防控措施。
6.考試期間，考生要自覺(jué)遵守考試紀(jì)律，在考前入場(chǎng)及考后離場(chǎng)等聚集環(huán)節(jié)，應(yīng)服從考務(wù)工作人員安排有序進(jìn)行。進(jìn)出考場(chǎng)、如廁時(shí)須與他人保持1米以上距離，避免近距離接觸交流。考試過(guò)程中，因個(gè)人原因需要接受健康檢查或需要轉(zhuǎn)移到隔離考場(chǎng)而耽誤的考試時(shí)間不予補(bǔ)充延時(shí)。
7.請(qǐng)考生備齊個(gè)人防護(hù)用品，合理安排交通和食宿，注意飲食衛(wèi)生，預(yù)防中暑。
8.請(qǐng)考生盡早打印準(zhǔn)考證，打印前應(yīng)認(rèn)真閱讀本須知，承諾已知悉須知事項(xiàng)，并自愿承擔(dān)相關(guān)責(zé)任。凡隱瞞或謊報(bào)旅居史、接觸史、健康狀況等疫情防控重點(diǎn)信息，不配合工作人員進(jìn)行防疫檢測(cè)、詢問(wèn)、排查、送診等造成嚴(yán)重后果的，按照疫情防控相關(guān)規(guī)定嚴(yán)肅處理。
湖北省人事考試院
2020年8月5日
編輯丨胡 穎
來(lái)源 | 黃石廣電
審核丨徐道發(fā)
監(jiān)制丨向天笑
出品丨黃石日?qǐng)?bào)融媒體中心
聲明：轉(zhuǎn)載此文是出于傳遞更多信息之目的。若有來(lái)源標(biāo)注錯(cuò)誤或侵犯了您的合法權(quán)益，請(qǐng)作者持權(quán)屬證明與本網(wǎng)聯(lián)系，我們將及時(shí)更正、刪除，謝謝。
是否曾經(jīng)試著點(diǎn)擊或點(diǎn)擊一個(gè)元素(例如:按鈕、鏈接)，并且注意到只有單擊該元素的特定區(qū)域，它才會(huì)響應(yīng)？
必生這種情況是因?yàn)榭牲c(diǎn)擊區(qū)域未應(yīng)用于整個(gè)元素。為了更加清楚，請(qǐng)參見(jiàn)下圖，左圖可點(diǎn)擊區(qū)別(圈紅部分)明顯比右圖的小很多，所以右圖的實(shí)現(xiàn)用戶體驗(yàn)會(huì)更好。
對(duì)于本文，會(huì)介紹一些事例，并通過(guò)事例演示如何增加可點(diǎn)擊區(qū)別，提高用戶體驗(yàn)。
WCAG全稱Web Content Accessibility Guidelines 網(wǎng)頁(yè)內(nèi)容無(wú)障礙瀏覽準(zhǔn)則，簡(jiǎn)單的說(shuō)就是為了方便殘障人士（包括低視患者，盲人，聾人，學(xué)習(xí)障礙，行動(dòng)不便，認(rèn)知障礙....）訪問(wèn)Web內(nèi)容而制定的相關(guān)標(biāo)準(zhǔn)，可以使網(wǎng)站更加人性化。
舉個(gè)例子，在WCAG準(zhǔn)則2.3.2中規(guī)定：網(wǎng)頁(yè)不包含任何閃光超過(guò)3次/秒的內(nèi)容。
用戶應(yīng)該能夠使用臺(tái)式機(jī)/筆記本電腦上的鍵盤(pán)以及移動(dòng)設(shè)備或平板電腦上的觸摸屏來(lái)操作輸入。不要在移動(dòng)設(shè)備屏幕上將按鈕設(shè)置得太小，以免按下正確的按鈕。觸摸目標(biāo)的最小尺寸最好至少為44 x 44像素。
**費(fèi)茲法則（Fitts law)**是一個(gè)人機(jī)互動(dòng)以及人體工程學(xué)中人類活動(dòng)的模型；它預(yù)測(cè)了快速移動(dòng)到目標(biāo)區(qū)域所需的時(shí)間是目標(biāo)區(qū)域的距離和目標(biāo)區(qū)域大小的函數(shù)。
在下面的圖中，我模擬了兩個(gè)按鈕的不同情況。在左側(cè)，按鈕更小，更遠(yuǎn)，用戶需要更多的時(shí)間與它互動(dòng)。在右側(cè)，按鈕大小更大，更接近于它的同級(jí)輸入元素，這將使交互更容易、更快。
接著，我們?cè)賮?lái)看看一些更加真實(shí)例子。注意：記住WCAG準(zhǔn)則 和費(fèi)茲法則 的概念。
在需要時(shí)使用實(shí)際真實(shí)<button>(包含可點(diǎn)擊區(qū)域)非常重要。下面的示例來(lái)自我使用的在線銀行系統(tǒng)：
<div class="navig next" onclick="validateLogin()">Next</div>這是上面按鈕的HTML的GIF圖像。我把鼠標(biāo)懸停在按鈕上，光標(biāo)仍然是一個(gè)指針，這很好。不過(guò)，我也可以選擇文本和懸停時(shí)，有一個(gè)文本光標(biāo)!如果使用了正確的元素，就不會(huì)發(fā)生這種情況。
當(dāng)使用HTML<button>元素時(shí)，會(huì)獲得下面效果：
有些元素，我們需要添加 padding，原因有二：
之前在做導(dǎo)航的時(shí)候，犯了一個(gè)錯(cuò)誤，應(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。請(qǐng)注意，默認(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)擊的效果如下：
假設(shè)可點(diǎn)擊區(qū)域如下所示：
這種體驗(yàn)不是很好，鼠標(biāo)或手指指向屏幕上如此小的目標(biāo)會(huì)比較難。在下圖中，它的可點(diǎn)擊區(qū)域更大并且更易于交互。
事例源碼：https://codepen.io/shadeed/pen/PMygee
當(dāng)存在復(fù)選框或單選按鈕元素時(shí)，我希望可以單擊它或關(guān)聯(lián)的標(biāo)簽來(lái)激活/禁用它。
從用戶體驗(yàn)的角度來(lái)看，這是難以訪問(wè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ū)域變大。這樣，問(wèn)題得以解決，整個(gè)復(fù)選框或單選按鈕都是可單擊的，如下圖所
對(duì)于帶有類別的頁(yè)面，有時(shí)我會(huì)注意到列表鏈接沒(méi)有擴(kuò)展到其父頁(yè)面的整個(gè)寬度。也就是說(shuō)，可點(diǎn)擊區(qū)域僅在文本上，如下圖所示：
解決方法：
.nav-item a {
/*Other styles*/
padding: 12px 16px;
display: block;
}添加后，如下所示：
在最近的Twitter更新中，導(dǎo)航設(shè)計(jì)在可點(diǎn)擊區(qū)域大小方面存在問(wèn)題。最初，它僅與文本相關(guān)，如下面的屏幕截圖所示，但他們?cè)谑盏椒答伜髮⑵湫迯?fù)。
在某些情況下，需要在章節(jié)標(biāo)題的遠(yuǎn)端添加“查看更多”按鈕或箭頭。在下面的示例中，我將箭頭放置在假圓中，以便可以正確地使箭頭居中。
通常情況下，箭頭周?chē)拈g距可以使用padding或width和height。
僅通過(guò)改變?cè)氐膶挾群透叨然蚴褂胮adding，并不總是能夠使可點(diǎn)擊區(qū)域變大，這時(shí)候就需要偽元素救場(chǎng)了。
這個(gè)想法是，偽元素屬于其父元素，因此當(dāng)我們創(chuàng)建具有特定寬度和高度的偽元素時(shí)，它將充當(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 譯者：前端小智 來(lái)源：css-tricks
原文：https://css-tricks.com/enhancing-the-clickable-area-size/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
