前端技術分享:一個超級好用的CSS樣式表
大家可以經常逛一些程式設計師比較喜歡的論壇貼吧,你會有不一樣的驚喜呢,今天小千就來給大家分享一個在GitHub上面發現的超級好用的CSS樣式表,來看一看。
看名稱本以為是一個動畫庫,但是看下來才發現這是一個改變預設HTML元素樣式的css,而且不需要新增額外class!!
在網上其實有很多更改預設樣式的css庫,但是大多需要新增class,那麼多class每次還需要查文件,萬一寫上頭忘記加,一看頁面,一個大大的白眼送給自己
只需要在自己的專案中引用一個css檔案即可,而且提供了三種主題
1、Automatic:根據頁面中設定的prefers-color-scheme自動識別開啟深夜模式
2、Dark theme:深夜模式
3、Light theme:預設的正常白天模式
下面我們就來列舉一些谷歌中 預設樣式 and 美容後 的樣式對比
1、一般輸入框
<input type="text">
2、只讀輸入框
<input type="text" readonly placeholder="readonly輸入框">
3、禁用輸入框
<input type="text" disabled placeholder="disabled輸入框">
4、按鈕
<input type="submit">
<input type="button" value="按鈕">
5、捲軸
當然,water.css並不只對以上的內容進行了美化。當我們不想花費太長時間做一個demo頁面,但又不想做的太丑時,就可以選擇試一試這個css,最重要的是,不需要新增額外class呀!閉眼寫就完事了!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2762844/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 一些超級好用的CSS 屬性CSS
- CSS 級聯樣式表名稱解析CSS
- Web前端開發——CSS層疊樣式表(3)Web前端CSS
- 測試開發之前端篇-CSS層疊式樣式表前端CSS
- CSS樣式表繼承CSS繼承
- CSS Cascading Style Sheets 層疊樣式表:CSS瞭解 (一)CSS
- 好程式設計師web前端技術分享css盒模型程式設計師Web前端CSS模型
- CSS:層疊樣式表—positionCSS
- 【CSS】關於表單樣式CSS
- Web前端技術分享:學習HTML和CSS的5大理由Web前端HTMLCSS
- 分享一個UI設計超級好看的小程式UI
- 分享一個JDK批量非同步任務工具CompletionService,超好用JDK非同步
- 技術分享 | OceanBase 裡的 BUFFER 表
- WebKit Inside: CSS 樣式表的匹配時機WebKitIDECSS
- CSS指層疊樣式表(CascadingStyleSheets)CSS
- 前端工程師分享幾個CSS技巧前端工程師CSS
- CSS設定半個文字的樣式CSS
- 一文了解iOS超級簽名的技術原理iOS
- 技術分享 | MySQL 大表新增唯一索引的總結MySql索引
- 『真香警告』這33個超級好用的CSS選擇器,你可能見都沒見過。CSS
- 你不知道的 CSS - 層疊樣式表CSS
- 淺談CSS重構樣式表效能CSS
- web前端學習:CSS樣式設定技巧Web前端CSS
- 怎樣學習一個新的架構技術架構
- 前端技術面——(CSS3新特性)前端CSSS3
- 幾個超級實用的css程式碼片段CSS
- 前端技術演進(一):Web前端技術基礎前端Web
- CSS 第2個li元素樣式CSS
- CSS 第N個子元素樣式CSS
- 分享一些web前端開發好用的網站Web前端網站
- 技術新風口:超級AppAPP
- CSS樣式表的繼承性和層疊性CSS繼承
- 前端開發的福音!這個功能可直接從藍湖貼上css樣式前端CSS
- css樣式CSS
- 10個好用的的css框架CSS框架
- 分享一個仿照社群的程式碼顏色樣式 (Code scheme)Scheme
- 做一個天貓雙十一這樣級別的活動,技術難度有多大?
- 每天分享一個好用的Python庫-pyfigletPython