html网页实现查询功能实现,CSS与媒体查询实现网页导航功能（附代码）

这次给大家带来CSS与媒体查询实现网页导航功能(附代码)，CSS与媒体查询实现网页导航功能的注意事项有哪些，下面就是实战案例，一起来看一下。

附上效果图，如果大家感觉不错，请参考实现代码：

代码如下，复制即可使用：

Document

body {

background: #801638;

}

body,

body > * {

margin: 0;

padding: 0;

font-family: 'Roboto', sans-serif;

font-weight: normal;

}

* {

transition: all .3s ease 0s;

}

/* Background colours */

p + p article:nth-child(1) {

background: #c22326;

}

p + p article:nth-child(2) {

background: #f37338;

}

p + p article:nth-child(3) {

background: #fdb632;

<