一、PC端通用布局解决方案
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>PC端布局的通用解决方案</title><style>/* 初始化 */* {margin: 0;padding: 0;box-sizing: border-box;}a {color: #666;text-decoration: none;}/* 将body转为flex */body {min-width: 680px;display: flex;/* 主轴垂直方向,不换行 */flex-flow: column nowrap;background-color: lightgrey;background-image: url("4.jpg");background-repeat: no-repeat;background-size: cover;}header,footer {height: 50px;border: 1px solid #000;background-color: #111;}/* 将页眉转为flex */header {display: flex;/* 所有项目在交叉轴方向上居中显示 */align-items: center;}header > a {flex: 0 1 100px;text-align: center;color: whitesmoke;}header > a:nth-of-type(n + 2) {margin: auto;}/* Logo */header > a:first-of-type {margin-right: 50px;margin-left: 50px;font-style: italic;font-size: 20px;}header > a:last-of-type {margin-left: auto;margin-right: 0;}/* 鼠标悬停时忽略logo */header > a:hover:not(:first-of-type) {color: coral;font-size: 1.2rem;}.container {min-height: 580px;margin: 10px auto;display: flex;justify-content: center;}.container > aside,.container > main {border: 1px solid #000;padding: 10px;}.container > aside {flex: 0 0 200px;background-image: url("3.jpg");background-size: cover;background-position: -63px;filter: blur(-1px);color: black;}.container > .astwo {background-image: url("5.jpg");background-size: cover;}.container > aside > .left {width: 200px;height: 500px;display: flex;flex-flow: column wrap;justify-content: space-evenly;font-size: 30px;}.container > aside > .left > p {width: 200px;text-align: center;}.container > main {flex: 0 0 600px;margin: 0 10px;}.container > main > .main-center {width: 100%;height: 100%;display: flex;flex-flow: column nowrap;justify-content: center;}.container > main > .main-center > .main-center-word {width: 100%;font-weight: bold;letter-spacing: 0.5rem;text-indent: 2.5rem;line-height: 2rem;}.container > .astwo {writing-mode: vertical-lr;writing-mode: tb-lr;font-size: 16px;letter-spacing: 0.5rem;text-indent: 2.5rem;line-height: 2rem;vertical-align: center;}footer {display: flex;flex-flow: column nowrap;text-align: center;height: 100px;}footer > p {font-size: 25px;color: pink;line-height: 100px;}</style></head><body><!-- 页眉 --><header><a href="">LOGO</a><a href="">首页</a><a href="">导航1</a><a href="">导航2</a><a href="">导航3</a><a href="">登录</a></header><!-- 主体 --><div class="container"><!-- 左边栏 --><aside><div class="left"><p class="pa">下沙篇</p><p class="pa">王权篇</p><p class="pa">月红篇</p><p class="pa">千颜篇</p></div></aside><!-- 主体内容区 --><main><div class="main-center"><div class="main-center-word">漫画的创作灵感来源于中国古典神话。小新认为，爱情是文艺创作的一个永恒主题。他把从角色中感受到的情绪用自己的理解展现出来，再加上中国神话，就创作出了《狐妖小红娘》这个“玄幻搞笑纯情虐恋”的故事。2010年，庹小新以“雪花啊”的名字在有妖气原创漫画梦工厂连载漫画《狐狸精调教手册》。2012年，被漫友旗下周刊热门杂志《漫画SHOW》邀请连载，并更名《狐妖小红娘》，故事基于《狐狸精调教手册》重新设计，但保留原来的人物（除了王富贵外，名字和造型略有改动）以及人物性格、故事背景。画面全部重画。但其后遭遇杂志停刊。2013年，《狐妖小红娘》登陆腾讯动漫频道， 成为平台主推连载作品。</div></div></main><!-- 右边栏 --><aside class="astwo">根据古典小说记载，世上有人有妖，妖会与人相恋，妖寿命千万年。人的寿命有限，人死了，妖活着。人会投胎转世，但投胎以后，不记得上辈子的爱。妖如果痴情的话，就去找狐妖“购买”一项服务，让投胎转世的人，回忆起前世的爱。</aside></div><!-- 页脚 --><footer><p>《狐妖小红娘》</p></footer></body></html>
运行图：