Community Learn Tools Library Leisure
search
English
Home > List of blog posts > PC端、移动端布局方案
Blogger Information
Blog 11
fans 0
comment 0
visits 8654
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
PC端、移动端布局方案
Haggi的糖果屋
Original
617 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>PC端布局的通用解决方案</title>
  7.     <style>
  8.       /* 初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       a {
  16.         color: #666;
  17.         text-decoration: none;
  18.       }
  20.       /* 将body转为flex */
  21.       body {
  22.         min-width: 680px;
  24.         display: flex;
  25.         /* 主轴垂直方向,不换行 */
  26.         flex-flow: column nowrap;
  27.         background-color: lightgrey;
  28.         background-image: url("4.jpg");
  29.         background-repeat: no-repeat;
  30.         background-size: cover;
  31.       }
  33.       header,
  34.       footer {
  35.         height: 50px;
  36.         border: 1px solid #000;
  37.         background-color: #111;
  38.       }
  40.       /* 将页眉转为flex */
  41.       header {
  42.         display: flex;
  43.         /* 所有项目在交叉轴方向上居中显示 */
  44.         align-items: center;
  45.       }
  47.       header > a {
  48.         flex: 0 1 100px;
  49.         text-align: center;
  50.         color: whitesmoke;
  51.       }
  52.       header > a:nth-of-type(n + 2) {
  53.         margin: auto;
  54.       }
  55.       /* Logo */
  56.       header > a:first-of-type {
  57.         margin-right: 50px;
  58.         margin-left: 50px;
  59.         font-style: italic;
  60.         font-size: 20px;
  61.       }
  63.       header > a:last-of-type {
  64.         margin-left: auto;
  65.         margin-right: 0;
  66.       }
  67.       /* 鼠标悬停时忽略logo */
  68.       header > a:hover:not(:first-of-type) {
  69.         color: coral;
  70.         font-size: 1.2rem;
  71.       }
  72.       .container {
  73.         min-height: 580px;
  75.         margin: 10px auto;
  77.         display: flex;
  78.         justify-content: center;
  79.       }
  80.       .container > aside,
  81.       .container > main {
  82.         border: 1px solid #000;
  83.         padding: 10px;
  84.       }
  86.       .container > aside {
  87.         flex: 0 0 200px;
  88.         background-image: url("3.jpg");
  89.         background-size: cover;
  90.         background-position: -63px;
  91.         filter: blur(-1px);
  93.         color: black;
  94.       }
  95.       .container > .astwo {
  96.         background-image: url("5.jpg");
  97.         background-size: cover;
  98.       }
  99.       .container > aside > .left {
  100.         width: 200px;
  101.         height: 500px;
  102.         display: flex;
  103.         flex-flow: column wrap;
  104.         justify-content: space-evenly;
  105.         font-size: 30px;
  106.       }
  108.       .container > aside > .left > p {
  109.         width: 200px;
  110.         text-align: center;
  111.       }
  112.       .container > main {
  113.         flex: 0 0 600px;
  114.         margin: 0 10px;
  115.       }
  116.       .container > main > .main-center {
  117.         width: 100%;
  118.         height: 100%;
  119.         display: flex;
  120.         flex-flow: column nowrap;
  121.         justify-content: center;
  122.       }
  123.       .container > main > .main-center > .main-center-word {
  124.         width: 100%;
  125.         font-weight: bold;
  126.         letter-spacing: 0.5rem;
  127.         text-indent: 2.5rem;
  128.         line-height: 2rem;
  129.       }
  130.       .container > .astwo {
  131.         writing-mode: vertical-lr;
  132.         writing-mode: tb-lr;
  133.         font-size: 16px;
  134.         letter-spacing: 0.5rem;
  135.         text-indent: 2.5rem;
  136.         line-height: 2rem;
  137.         vertical-align: center;
  138.       }
  140.       footer {
  141.         display: flex;
  142.         flex-flow: column nowrap;
  143.         text-align: center;
  144.         height: 100px;
  145.       }
  146.       footer > p {
  147.         font-size: 25px;
  148.         color: pink;
  149.         line-height: 100px;
  150.       }
  151.     </style>
  152.   </head>
  153.   <body>
  154.     <!-- 页眉 -->
  155.     <header>
  156.       <a href="">LOGO</a>
  157.       <a href="">首页</a>
  158.       <a href="">导航1</a>
  159.       <a href="">导航2</a>
  160.       <a href="">导航3</a>
  161.       <a href="">登录</a>
  162.     </header>
  164.     <!-- 主体 -->
  165.     <div class="container">
  166.       <!-- 左边栏 -->
  167.       <aside>
  168.         <div class="left">
  169.           <p class="pa">下沙篇</p>
  170.           <p class="pa">王权篇</p>
  171.           <p class="pa">月红篇</p>
  172.           <p class="pa">千颜篇</p>
  173.         </div>
  174.       </aside>
  175.       <!-- 主体内容区 -->
  176.       <main>
  177.         <div class="main-center">
  178.           <div class="main-center-word">
  179.             漫画的创作灵感来源于中国古典神话。小新认为，
  180.             爱情是文艺创作的一个永恒主题。他把从角色中感受
  181.             到的情绪用自己的理解展现出来，再加上中国神话，
  182.             就创作出了《狐妖小红娘》这个“玄幻搞笑纯情虐恋”的故事。
  183.             2010年，庹小新以“雪花啊”的名字在有妖气原创漫画梦工厂
  184.             连载漫画《狐狸精调教手册》。2012年，被漫友旗下周刊热
  185.             门杂志《漫画SHOW》邀请连载，并更名《狐妖小红娘》，
  186.             故事基于《狐狸精调教手册》重新设计，但保留原来的人物
  187.             （除了王富贵外，名字和造型略有改动）以及人物性格
  188.             、故事背景。画面全部重画。但其后遭遇杂志停刊。
  189.             2013年，《狐妖小红娘》登陆腾讯动漫频道， 成为平台主推连载作品。
  190.           </div>
  191.         </div>
  192.       </main>
  193.       <!-- 右边栏 -->
  194.       <aside class="astwo">
  195.         根据古典小说记载，世上有人有妖，妖会与人相恋，
  196.         妖寿命千万年。人的寿命有限，人死了，妖活着。人会投胎转世，但投胎
  197.         以后，不记得上辈子的爱。妖如果痴情的话，就去找狐妖“购买”一项服务，
  198.         让投胎转世的人，回忆起前世的爱。
  199.       </aside>
  200.     </div>
  202.     <!-- 页脚 -->
  203.     <footer>
  204.       <p>《狐妖小红娘》</p>
  205.     </footer>
  206.   </body>
  207. </html>

运行图：

Correcting teacher：GuanhuiGuanhui

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