CSS

html {
    -webkit-filter: grayscale(100%) !important;
    -moz-filter: grayscale(100%) !important;
    -ms-filter: grayscale(100%) !important;
    -o-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) !important;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://zh.learnlayout.com/flexbox.html

https://www.w3schools.com/howto/howto_css_timeline.asp

一套广泛应用的CSS字体图标

http://fontawesome.dashgame.com/

下面这个可下载base64版本：

https://www.iconfont.cn/

 关键在于transform: translate(-50%, -50%);

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 参考：https://www.w3schools.com/howto/howto_css_image_text.asp

这两个背景图CSS样式很有用：

background-attachment:fixed, background-size:cover

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent

https://www.w3schools.com/CSSref/css3_pr_background-size.asp

width: calc(100% - 100px);

参考：https://www.w3schools.com/cssref/func_calc.asp

为了便于观察，我把边框尺寸做成不一样。 

 

<div style="position:relative">
  <div style="width:100px;height:100px;border:3px solid #f00">&nbsp;</div>

非程序员：

1. Wordpress（官网）
2. Discuz（官网，下载）

基础：