代码如下，复制即可使用：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
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;
}
}
</style>
</head>
<body>
<p>
<h1>我在这,谁敢动我。</h1>
<h2>我是你们大哥的头</h2>
</p>
<p>
<article>
<h2>大哥的小弟一</h2>
<p>
<h3>大哥的小弟一</h3>
<p>身高180</p>
<p>体重120</p>
</p>
</article>
<article>
<h2>大哥的小弟二</h2>
<p>
<h3>大哥的小弟二</h3>
<p>身高160</p>
<p>体重100</p>
</p>
</article>
<article>
<h2>大哥的小弟三</h2>
<p>
<h3>大哥的小弟三</h3>
<p>身高175</p>
<p>体重180</p>
</p>
</article>
<article>
<h2>大哥的小弟四</h2>
<p>
<h3>大哥的小弟四</h3>
<p>身高180</p>
<p>体重110</p>
</p>
</article>
<article>
<h2>大哥的小弟五</h2>
<p>
<h3>大哥的小弟五</h3>
<p>身高180</p>
<p>体重150</p>
</p>
</article>
</p>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55052.shtml
