歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  代碼如下,復制即可使用:
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <!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.4389979.live/html/h55052.shtml

河南十一选五大小 最新手机赚钱软件 新疆11选5开奖结 大唐棋牌大厅官方网站 湖南赛车开奖结果走势图 安徽11选5历史开奖结果 平码3中3公式规律 四川血战到底麻将算法 福彩官网论坛 江苏快3是正规平台吗 app自助领取彩金