书写css代码。.related a:hover, .related a:active { opacity: 1; }.related a img { max-width: 100%; opacity: 0.8; border-radius: 4px; }.related a:hover img, .related a:active img { opacity: 1; }.related h3 { font-family: 'Microsoft YaHei', sans-serif; }.related a h3 { font-weight: 300; margin-top: 0.15em; color: #fff; }/* icomoon */.icon-zzsc-home-outline:before { content: '\e5000'; }.icon-zzsc-arrow-forward-outline:before { content: '\e5001'; } @media screen and (max-width: 50em) {.demo-1 .zzsc-header { background: none; }.demo-1 .zzsc-header h1 { font-size: 8vw; }.grid__item { width: 100%; }} @media screen and (max-width: 40em) {.zzsc-header h1 { font-size: 1.85em; }}

书写并添加js代码。  

代码整体结构。

查看效果。