导航功能怎么用html实现,CSS与媒体查询实现网页导航功能

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

Document

body{

background:#801638;

}

body,

body>*{

margin:0;

padding:0;

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

font-weight:normal;

}

*{

transition:all.3sease0s;

}

/*Backgroundcolours*/

p+particle:nth-child(1){

background:#c22326;

}

p+particle:nth-child(2){

background:#f37338;

}

p+particle:nth-child(3){

background:#fdb632;

}

p+particle:nth-child(4){

background:#027878;

}

p+particle:nth-child(5),

p+p{

background:#801638;

}

/*Mainlayout*/

html,

body,

p+p{

width:100vw;

height:100vh;

}

p+p{

list-style:none;

position:relative;

display:flex;

flex-direction:row;

flex-wrap:nowrap;

align-items:stretch;

overflow:hidden;

}

/*Articles*/

p+particle{

flex:initial;

width:20%;

height:100%;

text-align:center;

color:#fff;

text-decoration:none;

vertical-align:bottom;

box-sizing:border-box;

padding:2vh1vw;

position:relative;

}

/*BigHeadings*/

body>p:first-child{

position:fixed;

bottom:8vh;

background:#fff;

width:100%;

text-align:center;

padding:.5rem;

z-index:2;

}

body>p:first-childh1,

body>p:first-childh2{

margin:0;

padding:0;

}

/*Hoverinteraction*/

p+p:hoverarticle{

flex:initial;

width:10%;

}

p+particle:hover{

width:60%;

}

article>p{

opacity:0;

transition:opacity.2sease0;

}

p+particle:hover>p{

opacity:1;

transition:opacity.3sease.3s;

}

/*navigation*/

p+particle>h2{

bottom:2vh;

position:absolute;

text-align:center;

width:100%;

margin:0;

font-size:3vh;

}

/*Articlelayouts*/

articlep{

text-align:left;

width:58vw;

}

articlepp,

articlepph2,

articleph3{

margin:001em0;

}

articlepp{

width:40vw;

}

@media(max-width:900px){

p+particle{

padding:2vh3vw;

}

p+particle>h2{

transform:rotate(90deg);

bottom:23vh;

min-width:12em;

text-align:left;

transform:rotate(-90deg);

transform-origin:000;

opacity:1;

}

p+particle:hover>h2{

opacity:0;

}

articlepp{

width:50vw;

}

articlep{

max-height:calc(72%);

overflow-y:auto;

}

}

我在这,谁敢动我。

我是你们大哥的头

大哥的小弟一

大哥的小弟一

身高180

体重120

大哥的小弟二

大哥的小弟二

身高160

体重100

大哥的小弟三

大哥的小弟三

身高175

体重180

大哥的小弟四

大哥的小弟四

身高180

体重110

大哥的小弟五

大哥的小弟五

身高180

体重150