學習筆記之HTML與CSS屬性用法

標籤：

1.  z-index 的屬性用法：

z-index屬性是用來設定元素的堆疊順序，z-index的屬性值可為負數、0 或 正數，屬性值越大，元素越接近使用者，越顯示於前面，如所示：

新手使用CSS中的這個屬性時，經常會忘記在前面要先聲明定位元素，即z-index屬性只適用於絕對位置容器，例如代碼：position: absolute;   z-index: 1;

2. role ：

html 裡面的 role 本質上是增強語義性，當現有的HTML標籤不能充分表達語義性的時候，就可以藉助role來說明。通常這種情況出現在一些自訂的組件上，這樣可增強組件的可訪問性、可用性和可互動性。

role的作用是描述一個非標準的tag的實際作用。比如用div做checkbox，那麼設定div 的 role=“checkbox”，協助工具輔助就可以認出這實際上是個checkbox

比如：

<div role="checkbox" aria-checked="checked"></div>

協助工具輔助就會知道，這個div實際上是個checkbox的角色，為選中狀態，role 更多的是起到註明作用，刪掉也沒有問題,只是為了可讀性,這是一種良好的編程習慣，要堅持。

3. data-toggle:

bootstrap架構中data-toggle="tab"屬性會取消a標籤預設行為
標籤： data-toggle tab bootstrap 取消預設行為
這幾天做公司項目用了bootstrap架構,在用導航組件的過程中,我發現在a標籤裡面添加data-toggle="tab"屬性之後,這個a標籤會失去預設行為,點擊a標籤的時候不會跳轉,即使有href屬性,但是它不管用.So,如果想要實現它導覽列的效果,又要能夠讓連結有效,只能去掉data-toggle="tab"屬性.但是動態切換導覽按鈕的active屬性就實現不了,但是實現了跳轉,active屬性還有什麼用呢?就算有也看不到。

原文：http://www.cnblogs.com/wdlhao/p/4504685.html

4. aria-haspopup :

aria-haspopup :true表示點擊的時候會出現菜單或是浮動元素； false表示沒有pop-up效果。
aria-expanded:表示展開狀態。預設為undefined, 表示當前展開狀態未知。其它可選值：true表示元素是展開的；false表示元素不是展開的。
Windows 8 中的 Internet Explorer 10 引入了 aria-haspopup 文件物件模型　(DOM) 屬性的新用法：在支援觸摸的裝置上類比懸停。
注意 此行為不適用於 Windows 7 中的 Internet Explorer 10。
此外，Internet Explorer 10 向現有 aria-haspopup 屬性添加新的行為，以類比具有隱藏互動式內容的頁面元素上的懸停。
在一個頁面元素上（例如菜單），將元素的 aria-haspopup 屬性設定為 "true"。當支援觸摸的裝置上的 Internet Explorer 10 使用者第一次點擊頁面元素時，使用者的體驗與將游標懸停在該元素上的使用者的體驗相同。在使用者點擊頁面上的其他位置、再次點擊該元素或導航到其他頁面前，該元素保留其懸停狀態。此外，onclick 事件的預設操作（例如連結的導航）不在第一次點擊頁面元素時執行。
啟用 aria-haspopup 屬性不更改針對使用滑鼠和鍵盤的訪問者的網頁行為。

 

學習筆記之HTML與CSS屬性用法