CSS實現簡易tip提示層

ip提示層在網頁中經常用到，實現的方法也有很多，今天就來說一種簡易的實現方法！

效果圖：

實現代碼

html+css：

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標簽（組件），通過這些標簽避免你在項目中集成復雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標簽就能很方便的調用系統組件。

一、顏色選擇組件（Color Picker）

在項目中，你可能希望通過調色板組件動態調整顏色，這時你可以使用 <input type="color"> 就可以輕松調用一個調色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標簽（Blockquote）

在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調，這時你可以使用<blockquote> 標簽來強調你用的內容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個音頻播放器是一個費時費力又有挑戰性的工作，但是你現在可以使用<audio>標簽就能很輕松的調用。系統的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調用系統的音頻組件，我們還可以使用<video> 標簽調用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點擊標題展開對應的信息內容，這時 <details> 標簽就派上用場了，示例效果如下所示：

gif

項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復雜的樣式和交互需求，使用<input type="date"> 這個標簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個比較常見的組件，主要應用在數值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設置最小值、最大值以及當前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內容編輯（Content Editor）

為了讓內容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標簽（Picture Tag）

有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標簽的話，你需要做的工作就會許多，但是使用<picture> 標簽就能很輕松的完成在不同分辨率下顯示不同圖片的設置，調整瀏覽器的大小，就會根據窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進度條（Progress Bar）

進度條組件也是個很常見的組件，你可以使用<progress> 標簽就能輕松完成相關外觀的設置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結合輸入，能很方便的定位到下拉組件的內容，這時候你可以使用 <datalist> 標簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標經過此區域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結束語

今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

果圖:

使用場景: 使用React渲染后臺返回的數據, 遍歷以列表的形式展示, 可能內容簡要字段需要鼠標放上去才顯示的
可以借助DOM的自定義屬性和CSS偽類的attr來實現

所有代碼:

在線咨詢

上一篇：什么是HTML
下一篇：HTML 表格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商