---
title: "CSS - 一纸忘忧"
canonical_url: "https://www.ikxin.com/tag/css"
locale: zh-cn
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/article/flarum-search-icon-color)

## [Flarum 修改搜索框图标按钮的颜色](https://www.ikxin.com/article/flarum-search-icon-color)

本教程纯属多余，只是本人觉得改一下颜色比较好看而已，毕竟萝卜青菜各有所爱，可能也有人会喜欢原来的颜色，但还是记录一下吧，万一有人和我一样喜欢改成别的颜色呢，先上图 过程 先找到搜索框的类名，F12 审查元素 拿到 .Search-input

[网站](https://www.ikxin.com/category/website) 2018.07.254437 人浏览 [0 条评论](https://www.ikxin.com/article/flarum-search-icon-color#comments)

[Flarum](https://www.ikxin.com/tag/flarum) [ CSS](https://www.ikxin.com/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/article/wordpress-admin-login)

## [美化 WordPress 后台的登陆页面](https://www.ikxin.com/article/wordpress-admin-login)

有没有很多人都和我一样，觉得 WordPress 默认的后台登录页面太丑了？强迫症的我当然受不了，于是就四处寻找修改后台登录页面的插件。 后来想了下，为了改一个页面就用插件会不会太大材小用了，所以我就想着利用 CSS 来实现修改后台登录页面

[Web 前端](https://www.ikxin.com/category/web) 2017.08.055672 人浏览 [0 条评论](https://www.ikxin.com/article/wordpress-admin-login#comments)

[WordPress](https://www.ikxin.com/tag/wordpress) [ CSS](https://www.ikxin.com/tag/css) [ 美化](https://www.ikxin.com/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/article/html-js-css-tools)

## [在线压缩解压 HTML、JavaScript、CSS 等源码](https://www.ikxin.com/article/html-js-css-tools)

前几天本站发布了一个 HTML 在线运行的工具，来帮助大家学习前端 HTML，今天我继续发布三个非常实用的小工具，分别是 HTML、JavaScript、CSS 的压缩与解压工具，可以帮助大家更好地优化自己的网站哦，演示图在下方。 HTML

[Web 前端](https://www.ikxin.com/category/web) 2017.07.256862 人浏览 [1 条评论](https://www.ikxin.com/article/html-js-css-tools#comments)

[CSS](https://www.ikxin.com/tag/css) [ HTML](https://www.ikxin.com/tag/html) [ JavaScript](https://www.ikxin.com/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/article/html-css-iphone6-model)

## [使用纯 HTML 5 + CSS 3 画出 iPhone 6 手机模型](https://www.ikxin.com/article/html-css-iphone6-model)

在 B 站看到一个 HTML5 作品，是利用纯代码来画出 iPhone 的渲染图，觉得挺有意思的，就发出来给小伙伴们也参考参考，下面先来张效果图： 差不多快 60 行的代码，也不到 60 行，纯代码写的，没有用一张图片素材，包括电池图标和信

[Web 前端](https://www.ikxin.com/category/web) 2017.07.114324 人浏览 [0 条评论](https://www.ikxin.com/article/html-css-iphone6-model#comments)

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

## [CSS 实现自定义浏览器滚动条样式](https://www.ikxin.com/article/css-scrollbar-styling)

今天访问憧憬博客时，发现他网站的浏览器默认侧边滚动条被修改成了自定义样式。后来上网查询了一下，得知该样式可以通过 CSS 来设计。于是我自己捣鼓了一下，顺便把 CSS 代码借了过来，本站已经用上了，效果大家可以自己看看。 注意： 该样式仅限

[Web 前端](https://www.ikxin.com/category/web) 2017.07.084427 人浏览 [0 条评论](https://www.ikxin.com/article/css-scrollbar-styling#comments)

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

## [「悼念」将整个网站页面变成黑白两色](https://www.ikxin.com/article/website-black-white)

记得去年知名歌手乔任梁去世的时候，百度图片破天荒的给他搞了个黑白网页，使得所有用户在百度图片搜索乔任梁的时候都是显示全站黑白的，对于一些需要悼念的日子，很多人也都想把自己的网站弄成全站黑白来表示自己的哀悼之情。 下面我就附上开启全站黑白的教

[Web 前端](https://www.ikxin.com/category/web) 2017.05.227423 人浏览 [0 条评论](https://www.ikxin.com/article/website-black-white#comments)

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

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/tag/css#webpage","@type":"WebPage","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","name":"CSS","url":"https://www.ikxin.com/tag/css","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/tag/css"]}]}]}
```

## Sitemap

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