效果图：
html文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="iconfont.css" /><link rel="stylesheet" href="php.css" /><title>pc端实战练习</title></head><body><!-- 页眉 --><header><a href=""><img src="./imgs/logo1.jpg" alt="图片加载失败" /></a><a href=""><img src="./imgs/logo.png" alt="图片加载失败" /></a><span class="iconfont"></span></header><!-- 轮播图 --><div class="carousel"><img src="./imgs/play.jpg" alt="图片加载失败" /></div><!-- 导航区 --><div class="nav"><div class="item"><a href=""><img src="./imgs/html1.png" alt="图片加载失败" /></a><p>HTML/CSS</p></div><div class="item"><a href=""><img src="./imgs/JavaScript.png" alt="图片加载失败" /></a><p>JavaScript</p></div><div class="item"><a href=""><img src="./imgs/code.png" alt="图片加载失败" /></a><p>服务端</p></div><div class="item"><a href=""><img src="./imgs/sql.png" alt="图片加载失败" /></a><p>数据库</p></div><div class="item"><a href=""><img src="./imgs/app.png" alt="图片加载失败" /></a><p>移动端</p></div><div class="item"><a href=""><img src="./imgs/manual.png" alt="图片加载失败" /></a><p>shouce</p></div><div class="item"><a href=""><img src="./imgs/tool2.png" alt="图片加载失败" /></a><p>工具</p></div><div class="item"><a href=""><img src="./imgs/live.png" alt="图片加载失败" /></a><p>直播</p></div></div><h2 class="title">推荐课程</h2><div class="one"><a href=""><img src="./imgs/81.jpg" alt="图片加载失败" /></a><a href=""><img src="./imgs/82.jpg" alt="图片加载失败" /></a></div><div class="two"><a href=""><img src="./imgs/ci.jpg" alt="图片加载失败" /></a><div class="two-one"><a href="">Cl框架30分钟极速入门</a><div class="two-two"><span>初级</span> <span>61266次播放</span></div></div></div><div class="two"><a href=""><img src="./imgs/html5.jpg" alt="图片加载失败" /></a><div class="two-one"><a href="">2018前端入门_HTML5</a><div class="two-two"><span>初级</span> <span>310381次播放</span></div></div></div><h2 class="title">最新更新</h2><div class="last-update"><div><a href=""><img src="./imgs/php.png" alt="图片加载失败" /></a></div><div class="g"><a href=""><h3>php快速操控Excel之PhpSpreadsheet</h3></a><p>老的PHPExcel已经停止更新了!目前最新的是使用phpOffice插件PhpSpreadsheet,用纯php编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：php运行环境需要php7.1以上</p><div><span>中级</span><span>15110次播放</span></div></div></div><div class="last-update"><div><a href=""><img src="./imgs/tp6.png" alt="图片加载失败" /></a></div><div class="g"><a href=""><h3>Thinkphp6.0正式版视频教程</h3></a><p>Thinkphp6.0从2019年10月244日正式发布，相对测试版，右很多变动，目前TP6已经相对比较稳定了，所有php中文网在2020年再次重新录制课程，帮助快速入门！相关推荐：ThinkPHP6.0完全开发手册（注解版）http://www.php.cn/course/1049.html</p><div><span>中级</span><span>48963次播放</span></div></div></div><div class="last-update"><div><a href=""><img src="./imgs/py.jpg" alt="图片加载失败" /></a></div><div class="g"><a href=""><h3>2019python自学视频</h3></a><p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程， 兄弟连课程</p><div><span>初级</span><span>36512次播放</span></div></div></div><div class="last-update"><div><a href=""><img src="./imgs/php1.png" alt="图片加载失败" /></a></div><div class="g"><a href=""><h3>PHP开发免费公益直播课</h3></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>6824次播放</span></div></div></div><div class="last-update"><div><a href=""><img src="./imgs/web.jpg" alt="图片加载失败" /></a></div><div class="g"><a href=""><h3>从零开始到WEB响应式布局</h3></a><p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p><div><span>初级</span><span>29227次播放</span></div></div></div><div class="last-update"><div><a href=""><img src="./imgs/php2.png" alt="图片加载失败" /></a></div><div class="g"><a href=""><h3>php快速操控Excel之PhpSpreadsheet</h3></a><p>老的PHPExcel已经停止更新了!目前最新的是使用phpOffice插件PhpSpreadsheet,用纯php编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：php运行环境需要php7.1以上</p><div><span>中级</span><span>8888次播放</span></div></div></div><h2 class="title">最新文章</h2><div class="j"><div><a href="">ps转化为智能对象有什么作用</a><p>发布时间:2020-4-12</p></div><div><a href=""><img src="./imgs/new-essay44.jpg" alt="" /></a></div></div><div class="j"><div><a href="">电脑win键在哪里</a><p>发布时间:2020-4-12</p></div><div><a href=""><img src="./imgs/new-essay3.jpg" alt="" /></a></div></div><div class="j"><div><a href="">mac如何升级系统版本</a><p>发布时间:2020-4-12</p></div><div><a href=""><img src="./imgs/apple.jpg" alt="" /></a></div></div><div class="j"><div><a href="">指令代码序列称为程序吗</a><p>发布时间:2020-4-12</p></div><div><a href=""><img src="./imgs/newessay-.jpg" alt="" /></a></div></div></body><div class="j"><div><a href="">p日期转换成年月日格式的方法</a><p>发布时间:2020-4-12</p></div><div><a href=""><img src="./imgs/new-essay1.jpg" alt="" /></a></div></div><div class="title3"><a href="">更多内容</a></div><h2 class="title">最新博文</h2><div class="blog"><a href=""><h4>css3:细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>CSS 中各类选择器的属性及应用</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>CSS3：弹性盒子flex布局</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>flex容器中的主轴方向与项目换行缩写、主轴，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>Jquery+AJAX上传文件，无刷新上传并重命名文件</h4></a></<a><span>2020-14-12</span></div><div class="title3"><a href="">更多内容</a></div><h2 class="title">最新问答</h2><div class="blog"><a href=""><h4>css3:细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>CSS 中各类选择器的属性及应用</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>CSS3：弹性盒子flex布局</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>flex容器中的主轴方向与项目换行缩写、主轴，交叉轴和多行容器交叉轴项目对齐以及以及flex属性的缩写和案例</h4></a></<a><span>2020-14-12</span></div><div class="blog"><a href=""><h4>Jquery+AJAX上传文件，无刷新上传并重命名文件</h4></a></<a><span>2020-14-12</span></div><div class="title3"><a href="">更多内容</a></div><footer><a href=""><span class="iconfont"></span><span>首页</span></a><a href=""><span class="iconfont"></span><span>视频</span></a><a href=""><span class="iconfont"></span><span>社区</span></a><a href=""><span class="iconfont"></span><span>我的</span></a></footer></body></html>
css文件
* {margin: 0px;padding: 0px;}html {width: 100vw;height: 100vh;font-size: 14px;font-family: Arial, Helvetica, sans-serif;}body {min-width: 360px;background-color: #edeff0;display: flex;flex-flow: column nowrap;}.iconfont {color: #ffffff;font-size: 30px;}body header {height: 40px;width: 100vw;background-color: #333;padding: 0 10px;position: fixed;top: 0px;width: 95vw;display: flex;justify-content: space-between;align-items: center;}header > a:first-of-type > img {width: 30px;border-radius: 50%;}header > a:last-of-type > img {width: 120px;}.carousel > img {margin-top: 40px;width: 100%;}.nav {height: 160px;display: flex;flex-flow: row wrap;padding: 10px 0;background-color: white;align-content: space-between;}.nav > .item {align-items: center;display: flex;flex-flow: column nowrap;flex: 1 0 25vw;}.nav a {text-align: center;}.nav img {width: 50%;}/* 标题 */h2 {color: #888;height: 50px;display: flex;flex-flow: column nowrap;justify-content: end;padding-left: 10px;}/* 推荐课程 */.one {display: flex;flex-flow: row nowrap;justify-content: space-between;padding: 10px;box-sizing: border-box;width: 100vw;display: flex;}.one img {width: 96%;}.two {margin: 10px 10px;padding: 10px;background-color: white;display: flex;flex-flow: row nowrap;}.two img {width: 138px;height: 80px;}.two-one > a {padding: 0 10px;display: flex;flex-flow: column nowrap;text-decoration: none;font-size: 16px;color: gray;}a:hover {color: lightcoral;}.two-two {padding: 10px;font-size: 12px;}.two-two > span:first-of-type {border: 1px solid black;color: white;background-color: black;border-radius: 40%;}.last-update {padding: 10px;margin: 10px;background-color: white;display: flex;flex-flow: row nowrap;justify-content: space-between;}.last-update img {width: 138px;height: 80px;}.g {padding: 0 10px;width: 195px;height: 80px;display: flex;flex-flow: column nowrap;justify-content: space-between;}.g a {text-decoration: none;}.g h3 {color: gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.g p {color: gray;font-size: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.g div {color: gray;padding-right: 10px;font-size: 12px;display: flex;flex-flow: row nowrap;justify-content: space-between;}.g > div > span:first-of-type {border: 1px solid;border-radius: 40%;color: white;background-color: black;}.j {width: 90vw;padding: 10px;margin: 10px;background-color: white;color: gray;display: flex;flex-flow: row nowrap;justify-content: space-between;}.j div:first-of-type {display: flex;flex-flow: column nowrap;justify-content: space-around;}.j img {width: 100px;height: 65px;}.j a {color: gray;text-decoration: none;}.j p {font-size: 12px;}.title3 {margin: 10px;padding: 5px;font-size: 16px;text-align: center;background-color: white;}.title3 > a {text-decoration: none;color: gray;}.blog {width: 90vw;color: gray;margin: 10px;padding: 10px;background-color: white;display: flex;flex-flow: row nowrap;justify-content: space-between;}.blog a {color: gray;text-decoration: none;}.blog h4 {width: 230px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}footer {background-color: #edeff0;color: #666;height: 60px;border: 1px solid lightgray;position: fixed;bottom: 0px;width: 100vw;display: flex;flex-flow: row nowrap;justify-content: space-evenly;}footer a {color: #666;text-decoration: none;/* margin: 5px 0px; */display: flex;flex-flow: column nowrap;/* justify-content: center; */align-items: center;}footer > a > span:first-of-type {font-size: 35px;color: #666;}footer > a > span:last-of-type {font-size: 10px;}
总结
