---
title: "CSS - 一紙忘憂"
canonical_url: "https://www.ikxin.com/zh-tw/tag/css"
locale: zh-tw
meta:
  "og:title": CSS
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# CSS

[![Flarum 修改搜尋框圖示按鈕的顏色](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/27/5d145c9e73152.png)](https://www.ikxin.com/zh-tw/article/flarum-search-icon-color)

## [Flarum 修改搜尋框圖示按鈕的顏色](https://www.ikxin.com/zh-tw/article/flarum-search-icon-color)

本教程純屬多餘，只是本人覺得改一下顏色比較好看而已，畢竟蘿蔔青菜各有所愛，可能也有人會喜歡原來的顏色，但還是記錄一下吧，萬一有人和我一樣喜歡改成別的顏色呢，先上圖 過程 先找到搜尋框的類名，F12 檢查元素 取得 .Search-input

[网站](https://www.ikxin.com/zh-tw/category/website) 2018.07.254430 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/flarum-search-icon-color#comments)

[Flarum](https://www.ikxin.com/zh-tw/tag/flarum) [ CSS](https://www.ikxin.com/zh-tw/tag/css)

[![美化 WordPress 後台的登入頁面](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/27/5d14d6a46336d.jpg)](https://www.ikxin.com/zh-tw/article/wordpress-admin-login)

## [美化 WordPress 後台的登入頁面](https://www.ikxin.com/zh-tw/article/wordpress-admin-login)

有沒有很多人都和我一樣，覺得 WordPress 預設的後台登入頁面太醜了？強迫症的我當然受不了，於是就四處尋找修改後台登入頁面的外掛。 後來想了下，為了改一個頁面就使用外掛會不會太大材小用了，所以我就想著利用 CSS 來實現修改後台登入頁

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.08.055661 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/wordpress-admin-login#comments)

[WordPress](https://www.ikxin.com/zh-tw/tag/wordpress) [ CSS](https://www.ikxin.com/zh-tw/tag/css) [ 美化](https://www.ikxin.com/zh-tw/tag/beautify)

[![線上壓縮解壓 HTML、JavaScript、CSS 等原始碼](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11e3fe93731.png)](https://www.ikxin.com/zh-tw/article/html-js-css-tools)

## [線上壓縮解壓 HTML、JavaScript、CSS 等原始碼](https://www.ikxin.com/zh-tw/article/html-js-css-tools)

前幾天本站發布了一個 HTML 線上執行的工具，來幫助大家學習前端 HTML，今天我繼續發布三個非常實用的小工具，分別是 HTML、JavaScript、CSS 的壓縮與解壓工具，可以幫助大家更好地優化自己的網站哦，示意圖在下方。 HTML

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.256856 人瀏覽 [1 則評論](https://www.ikxin.com/zh-tw/article/html-js-css-tools#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css) [ HTML](https://www.ikxin.com/zh-tw/tag/html) [ JavaScript](https://www.ikxin.com/zh-tw/tag/javascript)

[![使用純 HTML 5 + CSS 3 繪出 iPhone 6 手機模型](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11dac82c0e0.png)](https://www.ikxin.com/zh-tw/article/html-css-iphone6-model)

## [使用純 HTML 5 + CSS 3 繪出 iPhone 6 手機模型](https://www.ikxin.com/zh-tw/article/html-css-iphone6-model)

在 B 站看到一個 HTML5 作品，是利用純程式碼來繪出 iPhone 的渲染圖，覺得挺有意思的，就發出來給小夥伴們也參考參考，下面先來張效果圖： 差不多快 60 行的程式碼，也不到 60 行，純程式碼寫的，沒有用一張圖片素材，包括電池圖

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.114316 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/html-css-iphone6-model#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css) [ HTML](https://www.ikxin.com/zh-tw/tag/html)

## [CSS 實現自訂瀏覽器捲軸樣式](https://www.ikxin.com/zh-tw/article/css-scrollbar-styling)

今天訪問憧憬部落格時，發現他的網站瀏覽器預設側邊捲軸被修改成了自訂樣式。後來上網查詢了一下，得知該樣式可以透過 CSS 來設計。於是我自己搗鼓了一下，順便把 CSS 程式碼借了過來，本網站已經用上了，效果大家可以自己看看。 注意： 該樣式僅

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.084421 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/css-scrollbar-styling#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css)

## [「悼念」將整個網站頁面變成黑白兩色](https://www.ikxin.com/zh-tw/article/website-black-white)

記得去年知名歌手喬任梁去世的時候，百度圖片破天荒地給他搞了個黑白網頁，使得所有使用者在百度圖片搜尋喬任梁的時候都是顯示全站黑白的，對於一些需要悼念的日子，很多人也都想把自己的網站弄成全站黑白來表示自己的哀悼之情。 下面我就附上開啟全站黑白的

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.05.227415 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/website-black-white#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css) [ HTML](https://www.ikxin.com/zh-tw/tag/html)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/zh-tw#website","@type":"WebSite","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","inLanguage":"zh-TW","name":"一紙忘憂","url":"https://www.ikxin.com/zh-tw","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/zh-tw/tag/css#webpage","@type":"WebPage","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","name":"CSS","url":"https://www.ikxin.com/zh-tw/tag/css","isPartOf":{"@id":"https://www.ikxin.com/zh-tw#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/zh-tw/tag/css"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.