演示站：http://php.rc238.cn/0410

效果图

源码下载地址
http://php.rc238.cn/0410/0410.rar
HTML部分

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>PHP中文网</title>
  </head>
  <body>
    <!-- 顶部导航区 -->
    <header>
      <nav>
        <a href="https://m.php.cn/member/387631.html">
          <span class="iconfont big">&#xe634;</span>
        </a>
      </nav>
      <nav>
        <a href="https://m.php.cn">
          <img src="https://m.php.cn/static/images/logo.png" alt="php.logo" />
        </a>
      </nav>
      <nav>
        <button class="iconfont big" onclick="turn()">
          &#xe64f;
        </button>
      </nav>
    </header>
    <!-- 侧边栏 -->
    <aside id="aside">
      <section onclick="turnoff()"></section>
      <section>
        <div>
          <button class="iconfont white" onclick="turnoff()">
            &#xe64f;
          </button>
          <span>PHP中文网</span>
        </div>
        <div>
          <a href="https://m.php.cn/">
            <div>
              <span class="iconfont navicon">&#xe607;</span>
            </div>
            <p>首页</p>
          </a>
          <a href="https://m.php.cn/course.html">
            <div>
              <span class="iconfont navicon">&#xe609;</span>
            </div>
            <p>课程</p>
          </a>
          <a href="https://m.php.cn/article.html">
            <div>
              <span class="iconfont navicon">&#xe624;</span>
            </div>
            <p>文章</p>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/wenda.html">
            <div>
              <span class="iconfont navicon">&#xe703;</span>
            </div>
            <p>问答</p>
          </a>
          <a href="https://m.php.cn/blog.html">
            <div>
              <span class="iconfont navicon">&#xe67a;</span>
            </div>
            <p>博客</p>
          </a>
          <a href="https://m.php.cn/dic.html">
            <div>
              <span class="iconfont navicon">&#xe899;</span>
            </div>
            <p>词典</p>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/course/type/99.html">
            <div>
              <span class="iconfont navicon">&#xe898; </span>
            </div>
            <p>手册</p>
          </a>
          <a href="https://www.php.cn/xiazai/">
            <div>
              <span class="iconfont navicon">&#xeee8;</span>
            </div>
            <p>资源</p>
          </a>
          <a href="https://m.php.cn/search">
            <div>
              <span class="iconfont navicon">&#xe64b;</span>
            </div>
            <p>搜索</p>
          </a>
        </div>
      </section>
    </aside>
    <!-- 主体区 -->
    <main>
      <!-- 1轮播图 -->
      <section>
        <a href="https://m.php.cn/wenda/160048.html">
          <img src="https://m.php.cn/static/images/ico/3.jpg" alt="lunbop.jpg"
        /></a>
      </section>
      <!-- 2分类区 -->
      <section>
        <!-- 第一行 -->
        <div>
          <div>
            <a href="https://m.php.cn/course/list/1.html">
              <div>
                <span class="iconfont navbig">&#xe6a0;</span>
              </div>
              <p>HTML/CSS</p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/course/list/2.html">
              <div>
                <span class="iconfont navbig">&#xe810;</span>
              </div>
              <p>JavaScript</p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/course/list/3.html">
              <div>
                <span class="iconfont navbig">&#xe601;</span>
              </div>
              <p>服务端</p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/course/list/4.html">
              <div>
                <span class="iconfont navbig">&#xe625;</span>
              </div>
              <p>数据库</p></a
            >
          </div>
        </div>
        <!-- 第二行 -->
        <div>
          <div>
            <a href="https://m.php.cn/course/list/5.html">
              <div>
                <span class="iconfont navbig">&#xe63f;</span>
              </div>
              <p>移动端</p></a
            >
          </div>
          <div>
            <a href="https://m.php.cn/course/type/3.html">
              <div>
                <span class="iconfont navbig">&#xe898;</span>
              </div>
              <p>手册</p></a
            >
          </div>
          <div>
            <a href="https://m.php.cn/course/list/9.html">
              <div>
                <span class="iconfont navbig">&#xe668;</span>
              </div>
              <p>工具</p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/course/list/8.html">
              <div>
                <span class="iconfont navbig">&#xe60d;</span>
              </div>
              <p>直播</p></a
            >
          </div>
        </div>
      </section>
      <!-- 3推荐课程 -->
      <section>
        <p>推荐课程</p>
        <!-- 双图区 -->
        <div>
          <a href="https://m.php.cn/course/797.html">
            <div>
              <img
                src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"
                alt="wechat.jpg"
              />
            </div>
          </a>
          <a href="https://m.php.cn/course/801.html">
            <div>
              <img
                src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg"
                alt="aiqiyi.jpg"
              />
            </div>
          </a>
        </div>
        <!-- ci框架极速入门 -->
        <div>
          <div>
            <a href="https://m.php.cn/course/760.html">
              <img
                src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg"
                alt="jisu.jpg"
              />
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/course/760.html">CI框架30分钟极速入门</a>
            <div>
              <span>中级</span>
              <span>61234次播放</span>
            </div>
          </div>
        </div>
        <!-- 前端入门 -->
        <div>
          <div>
            <a href="https://m.php.cn/course/880.html">
              <img
                src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg"
                alt=""
              />
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/course/880.html">2018前端入门_HTML5</a>
            <div>
              <span>初级</span>
              <span>310025次播放</span>
            </div>
          </div>
        </div>
      </section>
      <!-- 4最新更新 -->
      <section>
        <p>最新更新</p>
        <div>
          <div>
            <a href="https://m.php.cn/course/1087.html"
              ><img
                src="https://img.php.cn/upload/course/000/000/015/5e0d6387e45cc764.png"
                alt=""
            /></a>
          </div>
          <div>
            <a href="https://m.php.cn/course/1087.html"
              >PHP快速操控Excel之PhpSpreadsheet</a
            >
            <p>
              老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
              php
              编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上
            </p>
            <div>
              <span>中级</span>
              <span>14960次播放</span>
            </div>
          </div>
        </div>
        <div>
          <div>
            <a href=""
              ><img
                src="https://img.php.cn/upload/course/000/000/015/5e0d82773b4fe808.png"
                alt=""
            /></a>
          </div>
          <div>
            <a href="https://m.php.cn/course/1086.html"
              >Thinkphp6.0正式版视频教程</a
            >
            <p>
              Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP6已经相对比较稳定了，所以php中文网在2020年再次重新录制课程，帮助快速入门！相关推荐：
              ThinkPHP6.0完全开发手册(注解版)
              https://www.php.cn/course/1049.html
            </p>
            <div><span>中级</span><span>48767次播放</span></div>
          </div>
        </div>
        <div>
          <div>
            <a href=""
              ><img
                src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg"
                alt=""
            /></a>
          </div>
          <div>
            <a href="https://m.php.cn/course/1078.html">2019python自学视频</a>
            <p>
              本课程适合想从零开始学习 Python
              编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程
            </p>
            <div><span>初级</span><span>36301次播放</span></div>
          </div>
        </div>
        <div>
          <div>
            <a href=""
              ><img
                src="https://img.php.cn/upload/course/000/000/015/5da7e9b7895ed229.png"
                alt=""
            /></a>
          </div>
          <div>
            <a href="https://m.php.cn/course/1077.html"
              >PHP开发免费公益直播课</a
            >
            <p>
              主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00
              主题：如何高效的学习一门新技术？ 具体内容：1. 2020了,
              还有哪些值得学习的新技术? 2.如何高效的学习前端开发?
              3.如果高效的学习PHP开发?4.phpStudy V8 新功能介绍与演示
              5.小皮面板功能介绍
            </p>
            <div><span>初级</span><span>6805次播放</span></div>
          </div>
        </div>
        <div>
          <div>
            <a href=""
              ><img
                src="https://img.php.cn/upload/course/000/000/014/5da6a50535529903.jpg"
                alt=""
            /></a>
          </div>
          <div>
            <a href="https://m.php.cn/course/1076.html"
              >从零开始到WEB响应式布局</a
            >
            <p>
              重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点
            </p>
            <div><span>初级</span><span>29063次播放</span></div>
          </div>
        </div>
        <div>
          <div>
            <a href=""
              ><img
                src="https://img.php.cn/upload/course/000/000/015/5da51b8ff1224244.png"
                alt=""
            /></a>
          </div>
          <div>
            <a href="https://m.php.cn/course/1075.html">PHP文件基础操作</a>
            <p>
              好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！
            </p>
            <div><span>中级</span><span>8837次播放</span></div>
          </div>
        </div>
      </section>
      <!-- 5最新文章 -->
      <section>
        <p>最新文章</p>
        <div>
          <div>
            <a href="https://m.php.cn/tool/sublime/447028.html">
              <p>sublime正则搜索替换修改数据的方法</p>
              <p>发布时间：2020-04-11</p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/tool/sublime/447028.html"
              ><img
                src="https://img.php.cn/upload/article/000/000/020/5e91923747dab842.jpg"
                alt=""
            /></a>
          </div>
        </div>
        <div>
          <div>
            <a href="https://m.php.cn/faq/447027.html">
              <p>为什么我的电脑只有c盘</p>
              <p>发布时间：2020-04-11</p></a
            >
          </div>
          <div>
            <a href="https://m.php.cn/faq/447027.html"
              ><img
                src="https://img.php.cn/upload/article/000/000/020/5e918fffe166f364.jpg"
                alt=""
            /></a>
          </div>
        </div>
        <div>
          <div>
            <a href="https://m.php.cn/cms/dedecms/447026.html">
              <p>dedecms如何添加并引入php文件</p>
              <p>发布时间：2020-04-11</p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/cms/dedecms/447026.html"
              ><img
                src="https://img.php.cn/upload/article/000/000/041/5e918a4ac6da9826.jpg"
                alt=""
            /></a>
          </div>
        </div>
        <div>
          <div>
            <a href="https://m.php.cn/faq/447025.html">
              <p>扩展分区转主分区的方法</p>
              <p>
                发布时间：2020-04-11
              </p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/faq/447025.html"
              ><img
                src="https://img.php.cn/upload/article/000/000/020/5e9179096b985669.jpg"
                alt=""
            /></a>
          </div>
        </div>
        <div>
          <div>
            <a href="https://m.php.cn/java/interview/447024.html">
              <p>2020全新Java面试题——容器（二）</p>
              <p>
                发布时间：2020-04-11
              </p>
            </a>
          </div>
          <div>
            <a href="https://m.php.cn/java/interview/447024.html"
              ><img
                src="https://img.php.cn/upload/article/000/000/041/5e9172bb26057270.jpg"
                alt=""
            /></a>
          </div>
        </div>
        <div>
          <a href="https://m.php.cn/article.html">更多内容 </a>
        </div>
      </section>
      <!-- 6最新博文 -->
      <section>
        <p>最新博文</p>
        <div>
          <a href="https://m.php.cn/blog/detail/20557.html">
            <span>Jquery+AJAX上传文件，无刷新上传并重命名文件</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/blog/detail/20547.html">
            <span>thinkphp5.6源码阅读1</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/blog/detail/20509.html">
            <span>Composer windows安装详细介绍</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/blog/detail/20508.html">
            <span>AI智能电销机器人源码 源码解读（1）—基础</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/blog/detail/20492.html">
            <span>利用css过滤实现玩网页夜模式适配</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/blog.html">
            <span>更多内容</span>
          </a>
        </div>
      </section>
      <!-- 7最新问答 -->
      <section>
        <p>最新问答</p>
        <div>
          <a href="https://m.php.cn/wenda/164957.html">
            <span>不出现tp6.0页面</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/wenda/164956.html">
            <span>数据库密码··</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/wenda/164955.html">
            <span>制定的学习计划在哪能找到 咋找不到呢?</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/wenda/164954.html">
            <span>数据库链接后怎么知道用哪个表啊</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/wenda/164953.html">
            <span>这个同步的东西</span>
            <span>2020-04-11</span>
          </a>
        </div>
        <div>
          <a href="https://m.php.cn/wenda.html">
            <span>更多内容</span>
          </a>
        </div>
      </section>
      <!-- 底部留空 -->
      <div></div>
    </main>
    <!-- 底部导航区 -->
    <footer>
      <a href="">
        <div>
          <span class="iconfont foot">&#xe607;</span>
          <p>首页</p>
        </div>
      </a>
      <a href="">
        <div>
          <span class="iconfont foot">&#xe63d;</span>
          <p>视频</p>
        </div>
      </a>
      <a href="">
        <div>
          <span class="iconfont foot">&#xe67e;</span>
          <p>社区</p>
        </div>
      </a>
      <a href="">
        <div>
          <span class="iconfont foot">&#xe602;</span>
          <p>我的</p>
        </div>
      </a>
    </footer>
  </body>
  <script type="text/javascript">
    //改变div的css属性
    function turnoff() {
      document.getElementById("aside").style.display = "none";
    }
    function turn() {
      document.getElementById("aside").style.display = "flex";
    }
  </script>
</html>

CSS 部分

@font-face {
  font-family: "iconfont";
  src: url("./font_icon/iconfont.eot");
  src: url("./font_icon/iconfont.eot?#iefix") format("embedded-opentype"),
    url("./font_icon/iconfont.woff2") format("woff2"),
    url("./font_icon/iconfont.woff") format("woff"),
    url("./font_icon/iconfont.ttf") format("truetype"),
    url("./font_icon/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  text-decoration: none;
  color: aliceblue;
}
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 15px;
}
body {
  max-width: 800px;
  background-color: #edeff0;
}
/* 顶部导航区 */
header {
  height: 5vh;
  background-color: #2d353c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: fixed;
  top: 0px;
  width: 100vw;
}
header nav {
  margin-right: 15px;
}
header img {
  width: 60%;
  height: 50%;
}
header button {
  border: none;
  background-color: transparent;
}
.big {
  font-size: 1.5rem;
  color: #edeff0;
}
/* 侧边栏 */
aside {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: row nowrap;
  display: none;
}
/* 侧边栏图标 */
.white {
  color: lightcyan;
  font-weight: bolder;
  font-size: 1.3rem;
}
aside > section:first-of-type {
  width: 35vw;
  background-color: black;
  opacity: 50%;
}
aside > section:last-of-type {
  background-color: #394148;
  width: 65vw;
}
/* 右边导航区 */
/* 第一行 */
aside > section:last-of-type > div:first-of-type {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  height: 6vh;
  align-items: center;
}
aside > section:last-of-type > div:first-of-type > button {
  border: none;
  background-color: transparent;
}
aside > section:last-of-type > div:first-of-type > span {
  width: 38vw;
  font-size: 1.4rem;
  color: #c0c2c3;
  font-weight: 600;
}
/* 排除第一行 */
aside > section:last-of-type > div:not(:first-of-type) {
  display: flex;
  flex-flow: row nowrap;
  height: 15vh;
  width: 100%;
  justify-content: space-around;
}
aside > section:last-of-type > div:not(:first-of-type) > a {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 25%;
}
aside > section:last-of-type > div:not(:first-of-type) > a > p {
  margin: auto;
  font-size: 1rem;
  color: #cfcfcf;
}
aside > section:last-of-type > div:not(:first-of-type) > a > div {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 27px;
  margin-top: 10px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
/* 导航区图标 */
.navicon {
  font-size: 2.5rem;
  font-weight: bolder;
}
/* 第二行图标颜色 */
aside > section:last-of-type > div:nth-of-type(2) > a:first-of-type > div {
  background-color: #57c98a;
}
aside > section:last-of-type > div:nth-of-type(2) > a:nth-of-type(2) > div {
  background-color: #fe9728;
}
aside > section:last-of-type > div:nth-of-type(2) > a:last-of-type > div {
  background-color: #4dd0e1;
}
/* 第三行图标颜色 */
aside > section:last-of-type > div:nth-of-type(3) > a:first-of-type > div {
  background-color: #64b5f6;
}
aside > section:last-of-type > div:nth-of-type(3) > a:nth-of-type(2) > div {
  background-color: #119b8e;
}
aside > section:last-of-type > div:nth-of-type(3) > a:last-of-type > div {
  background-color: #fe9728;
}
/* 第四行图标颜色 */
aside > section:last-of-type > div:nth-of-type(4) > a:first-of-type > div {
  background-color: #ff8a65;
}
aside > section:last-of-type > div:nth-of-type(4) > a:nth-of-type(2) > div {
  background-color: #ffb74d;
}
aside > section:last-of-type > div:nth-of-type(4) > a:last-of-type > div {
  background-color: #ef8383;
}
/* 内容主体 */
main {
  display: flex;
  flex-flow: column nowrap;
  width: 100vw;
}
main > section:first-of-type img {
  width: 100%;
}
main > section:nth-of-type(2) {
  margin-top: -3px;
  display: flex;
  background-color: #fff;
  flex-flow: column nowrap;
}
main > section:nth-of-type(2) > div {
  display: flex;
  flex-flow: row nowrap;
  height: 13vh;
  width: 98vw;
  justify-content: space-evenly;
}
main > section:nth-of-type(2) > div > div {
  margin-top: 5px;
  width: 80px;
  height: 80px;
  text-align: center;
}
main > section:nth-of-type(2) > div > div div {
  width: 50px;
  height: 50px;
  border-radius: 18px;
  margin: auto;
  display: flex;
  justify-content: center;
}
main > section:nth-of-type(2) div > div > a > div > span {
  align-self: center;
}
main > section:nth-of-type(2) p {
  margin-top: 5px;
  color: #888888;
  font-weight: bold;
  font-family: sans-serif;
}
.navbig {
  color: mintcream;
  font-size: 2rem;
}
main > section:nth-of-type(2) > div > div:first-of-type div {
  background-color: #81a7f2;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:nth-of-type(2) div {
  background-color: #f47a71;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:nth-of-type(3) div {
  background-color: #ee9139;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:nth-of-type(4) div {
  background-color: #7ab9f6;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:nth-of-type(5) div {
  background-color: #956fcd;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:nth-of-type(6) div {
  background-color: #57c1ee;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:nth-of-type(7) div {
  background-color: #f57d77;
  text-align: center;
}
main > section:nth-of-type(2) > div > div:last-of-type div {
  background-color: #84aaf2;
  text-align: center;
}
/* 推荐课程 */
/* 主体样式 */
main > section:nth-of-type(3) {
  width: 95vw;
  margin: auto;
  margin-top: 10px;
  display: flex;
  flex-flow: column nowrap;
}
main > section:nth-of-type(3) p {
  color: #888888;
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 1.3rem;
}
/* 后代元素 样式 */
main > section:nth-of-type(3) > div {
  margin-top: 10px;
}
/* 双图元素 */
main > section:nth-of-type(3) > div:first-of-type {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
main > section:nth-of-type(3) > div:first-of-type div {
  width: 42vw;
}
main > section:nth-of-type(3) > div:first-of-type div img {
  width: 100%;
}
/* 排除第一个div元素 */
main > section:nth-of-type(3) > div:not(:first-of-type) {
  background-color: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
main > section:nth-of-type(3) > div:not(:first-of-type) > div:first-of-type {
  width: 35vw;
  display: flex;
  align-items: center;
}
main
  > section:nth-of-type(3)
  > div:not(:first-of-type)
  > div:first-of-type
  img {
  width: 100%;
}
main > section:nth-of-type(3) > div:not(:first-of-type) > div:last-of-type {
  width: 50vw;
  padding-top: 5px;
}
main > section:nth-of-type(3) > div:not(:first-of-type) > div:last-of-type a {
  color: #888888;
  font-size: 1.1rem;
  font-family: sans-serif;
  font-weight: 300;
}
main > section:nth-of-type(3) > div:not(:first-of-type) > div:last-of-type div {
  margin-top: 8px;
}
main
  > section:nth-of-type(3)
  > div:not(:first-of-type)
  > div:last-of-type
  span:first-of-type {
  border-radius: 5px;
  padding: 2px;
  background-color: #595757;
  color: #fff;
  font-size: 0.9rem;
}
main
  > section:nth-of-type(3)
  > div:not(:first-of-type)
  > div:last-of-type
  span:last-of-type {
  color: #888888;
  font-size: 0.8rem;
}
/* 最新更新 */
main > section:nth-of-type(4) {
  width: 95vw;
  margin: auto;
  margin-top: 10px;
  display: flex;
  flex-flow: column nowrap;
}
main > section:nth-of-type(4) p {
  color: #888888;
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 1.3rem;
}
main > section:nth-of-type(4) > div {
  background-color: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: 15px;
}
main > section:nth-of-type(4) > div > div:first-of-type {
  width: 35vw;
}
main > section:nth-of-type(4) > div > div:first-of-type img {
  width: 100%;
}
main > section:nth-of-type(4) > div > div:last-of-type {
  width: 50vw;
  margin-top: 5px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
}
main > section:nth-of-type(4) > div > div:last-of-type a {
  color: #888888;
  font-size: 1.1rem;
  font-family: sans-serif;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
main > section:nth-of-type(4) > div > div:last-of-type p {
  color: #888888;
  font-size: 0.8rem;
  font-family: sans-serif;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
main > section:nth-of-type(4) > div > div:last-of-type > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 90%;
}
main
  > section:nth-of-type(4)
  > div
  > div:last-of-type
  > div
  > span:first-of-type {
  padding: 0px 2px;
  background-color: #595757;
  color: #fff;
  border-radius: 5px;
  font-size: 0.9rem;
}
main
  > section:nth-of-type(4)
  > div
  > div:last-of-type
  > div
  > span:last-of-type {
  color: #888888;
  font-size: 0.8rem;
}
/* 最新文章 */
main > section:nth-of-type(5) {
  margin: auto;
  display: flex;
  flex-flow: column nowrap;
}
main > section:nth-of-type(5) > p {
  color: #888888;
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 1.3rem;
  margin: 10px 10px;
}
main > section:nth-of-type(5) > div {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  height: 10vh;
  background-color: #fff;
  margin-bottom: 6px;
  width: 95vw;
}
main > section:nth-of-type(5) > div > div:first-of-type {
  padding: 10px 10px;
  width: 55vw;
}
main > section:nth-of-type(5) > div > div:first-of-type > a > p:first-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: bolder;
  color: #888888;
  margin-bottom: 5px;
}
main > section:nth-of-type(5) > div > div:first-of-type > a > p:last-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #888888;
  font-size: 0.8rem;
}
main > section:nth-of-type(5) > div > div:last-of-type {
  width: 30vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}
main > section:nth-of-type(5) > div > div:last-of-type img {
  width: 100%;
  max-height: 9vh;
}
main > section:nth-of-type(5) > div:last-of-type {
  height: 4vh;
  text-align: center;
}
main > section:nth-of-type(5) > div:last-of-type > a {
  color: #888888;
  margin: auto;
  font-weight: bolder;
}
/* 选中倒数两个 */
main > section:nth-last-of-type(-n + 2) {
  display: flex;
  flex-flow: column nowrap;
  width: 95vw;
  margin: auto;
}
main > section:nth-last-of-type(-n + 2) > p {
  color: #888888;
  font-family: sans-serif;
  font-weight: bolder;
  font-size: 1.3rem;
  margin: 10px 10px;
}
main > section:nth-last-of-type(-n + 2) > div {
  background-color: #fff;
  margin-bottom: 10px;
}
main > section:nth-last-of-type(-n + 2) > div > a {
  height: 6vh;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  color: #888888;
}
main > section:nth-last-of-type(-n + 2) > div > a > span:first-of-type {
  width: 65vw;
  font-size: 1rem;
  font-weight: bolder;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main > section:nth-last-of-type(-n + 2) > div:last-of-type > a {
  text-align: center;
  height: 4vh;
  font-weight: 100;
}
/* 底部留空 */
main > div:last-of-type {
  height: 8vh;
}
/* 底部导航 */
footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  width: 100vw;
  height: 5.5vh;
  background-color: #eeeeee;
  border-top: 1px solid lightgrey;
  position: fixed;
  bottom: 0px;
  text-align: center;
  margin: auto;
  padding: 5px 0px;
}
footer div {
  width: 23vw;
}
footer > a {
  text-decoration: none;
  color: #595757;
}
footer > a:first-of-type {
  text-decoration: none;
  color: #ff0000;
}
.foot {
  font-weight: bolder;
}

总结

实战巩固了所学内容，从刚开始敲代码的频频翻看笔记，到后面的行云流水，仿佛一切都是那么的理所当然。充分利用flex的布局方式，或水平或垂直，或允许换行或不允许换行。再设置项目主轴对齐方式交叉轴对齐方式。还有图标的运用字体属性，等等。。

CSS - 利用flex布局仿PHP中文网移动站

总结

相关文章