Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1027作业 :按自己想法完善pc端的布局页面(不要求细节)
Blogger Information
Blog 7
fans 0
comment 1
visits 4248
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1027作业 :按自己想法完善pc端的布局页面(不要求细节)
Vic
Original
561 people have browsed it

pc端的布局页面

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             box-sizing: border-box;
  10.          margin: 0;
  11.         padding: 0;
  12.         }
  14.         body{
  15.             display: flex;
  16.             flex-flow: column nowrap;
  17.         }
  19.     a{
  20.         text-decoration: none;
  21.     }
  23.     header{
  24.         background-color: aquamarine;
  25.             display: flex;
  26.             flex-flow: row nowrap;
  28.          height: 50px;
  29.         border: 1px solid black;
  30.     }
  34.     header > a {
  35.         flex: 1 1;
  36. text-align: center;
  37. align-self: center;
  38.     }
  40. header > a:last-of-type{
  41. color: chocolate;
  42. }
  44. header > a:hover{
  45.     color: crimson;
  46. }
  48. .box {
  49.     display: flex;
  50.     flex-flow: row nowrap;
  51.     min-height: 20em;
  52.     justify-content: center;
  53.     margin-top: 3em;
  54.     margin-bottom: 3em;
  56. }
  58. aside, main{
  59.     border: 1px solid;
  60.     text-align: center;
  64. }
  66. aside{
  67.       flex: 0 0 10em;
  68. }
  70. main{
  71.      flex: 0 0 30em;
  72.      margin-left: 2em;
  73.      margin-right: 2em;
  74. }
  77.         footer{
  78.               background-color: aquamarine;
  79.             display: flex;
  80.             flex-flow: column nowrap;
  81.          /* height: 80px; */
  82.         border: 1px solid black;
  84.         justify-content: center;
  85.         align-items: center;
  86.         }
  88.         footer > p{
  91.         }
  95.          @media screen and (max-width:880px){
  96.              .box{
  97.                flex-flow: column wrap;
  98.              }
  99.              aside{
  100.                   flex: 0 0 5em;
  101.                  margin-left: 2em;
  102.                  margin-right: 2em;
  103.              }
  104.              main{
  105.                flex: 0 0 20em;  
  106.              }
  107.          }
  109.          /* @media screen and (max-width:700px){
  110.              .box{
  111.                  flex-flow: column wrap;
  112.              }
  113.          } */
  116.     </style>
  117. </head>
  118. <body>
  119.     <header>
  120.          <a href="">LOGO</a>
  121.       <a href="">首页</a>
  122.       <a href="">视频教程</a>
  123.       <a href="">入门教程</a>
  124.       <a href="">社区问答</a>
  125.       <a href="">技术文章</a>
  126.       <a href="">登录</a>
  127.     </header>
  129. <div class="box">
  130. <aside>左侧栏</aside>
  131. <main>主栏</main>
  132. <aside>右侧栏</aside>
  133. </div>
  136.     <footer>
  137.         <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  138.         <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1</p>
  139.     </footer>
  140. </body>
  141. </html>

效果如下：

情况1：当浏览器宽度>880px时，画面如图：

情况2：当浏览器宽度<880px时，画面如图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：完成的不错嘛
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post