Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局基础知识实战案例--php培训第九期线上班
Blogger Information
Blog 19
fans 1
comment 0
visits 13357
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
flex布局基础知识实战案例--php培训第九期线上班
涤尘
Original
612 people have browsed it

网站管理后台首页

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>后台首页</title>
  5.     <style type="text/css">
  6.     * {
  7.     padding: 0;
  8.     margin: 0;
  9.     }
  10.     body {
  11.         height: 100vh;
  12.         display: flex;
  13.         flex-flow:column nowrap;
  15.     }
  17.     /*头部底部样式设置*/
  18.     header,footer {
  19.         box-sizing: border-box;
  20.         background-color: #ede;
  21.         text-align: center;
  22.         height: 40px;
  23.         padding: 7px;
  25.     }
  28.     main {
  29.         box-sizing: border-box;
  31.         background-color: #66ff33;
  32.         display: flex;
  33.         flex:1;
  34.     }
  37.     /*设置左边栏的*/
  38.     main > aside {
  39.         box-sizing: border-box;
  41.         width: 200px;
  42.         background-color: #808080;
  44.     }
  45.     /*左侧栏内容样式设置*/
  46.     main > aside > a {
  47.         text-decoration: none;
  48.         color: white;
  49.         margin: 15px;
  50.         display: flex;
  51.         justify-content: center;
  52.         align-items: center;
  54.     }
  56.     main > aside >a:hover {
  57.         background: linear-gradient( lightcyan, blue);
  58.     }
  59.     /*右侧内容设置*/
  60.     main > iframe {
  61.         box-sizing: border-box;
  63.         flex: 1;
  64.         background-color: lightblue;
  65.     }
  67.     </style>
  68. </head>
  69. <body>
  70. <header>全球最大的快消品连锁平台</header>
  71. <main>
  73. <aside>
  74.     <a href="">商品列表</a>
  75.     <a href="">订单列表</a>
  76.     <a href="">会员列表</a>
  77. </aside>    
  78.     <iframe srcdoc="<h2>欢迎你</h2>" frameborder="1" name="content" width="100%" height="100%"></iframe>
  81. </main>
  82. <footer>
  83. 本站技术支持PHP中文网
  84. </footer>
  85. </body>
  86. </html>
显示效果

手抄代码如下







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