<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/public-reset.css"><link rel="stylesheet" type="text/css" href="font/iconfont.css"><link rel="stylesheet" type="text/css" href="css/main.css"></head><body><div class="container"><header class="nav-head"><a href="https://m.php.cn" class="myself"><img src="images/user_avatar.jpg" width="23" height="23"></a><a href="https://m.php.cn"><img src="images/logo.png" width="94" height="45"></a><span class="iconfont icon-liebiao"></span></header><main><header><a href="#"><img src="images/6.png" width="100%" height="100%"></a></header><nav><ul><li><a href="#"><img src="images/html.png" alt=""><span>偷懒的字</span></a></li><li><a href="#"><img src="images/JavaScript.png" alt=""><span>偷懒的字</span></a></li><li><a href="#"><img src="images/code.png" alt=""><span>偷懒的字</span></a></li><li><a href="#"><img src="images/sql.png" alt=""><span>偷懒的字</span></a></li></ul><ul><li><a href="#"><img src="images/app.png" alt=""><span>偷懒的字</span></a></li><li><a href="#"><img src="images/manual.png" alt=""><span>偷懒的字</span></a></li><li><a href="#"><img src="images/tool2.png" alt=""><span>偷懒的字</span></a></li><li><a href="#"><img src="images/live.png" alt=""><span>偷懒的字</span></a></li></ul></nav><section class="recommend"><h3>推荐课程</h3><article class=""><a href="#"><img src="images/5d242759adb88970.jpg"></a><a href="#"><img src="images/5d2426f409839992.jpg"></a></article><article><section><a href="#"><img src="images/5d2941e265889366.jpg"></a><section><a href="#">CI框架30分钟极速入门</a><span><i class="tip">中级</i>3000次播放</span><div style="height: 20.8px;"></div></section></section><section><a href="#"><img src="images/5aa23f0ded921649.jpg"></a><section><a href="#">2018前端入门_HTML5</a><span><i class="tip">中级</i>3000次播放</span><div style="height: 20.8px;"></div></section></section></article></section><section class="newcommend"><h3>最新更新</h3><article><section><a href="#"><img src="images/5d2941e265889366.jpg"></a><section><a href="#">CI框架30分钟极速入门</a><span>这里是一段说明</span><span><i class="tip">中级</i>3000次播放</span></section></section><section><a href="#"><img src="images/5aa23f0ded921649.jpg"></a><section><a href="#">2018前端入门_HTML5</a><span>这里是一段说明</span><span><i class="tip">中级</i>3000次播放</span></section></section></article></section></main><footer><a href="#"><i class="iconfont icon-shouyeshouye"></i><span>首页</span></a><a href="#"><i class="iconfont icon-icon_yulan"></i><span>视频</span></a><a href="#"><i class="iconfont icon-xiaoxitongzhi"></i><span>社区</span></a><a href="#"><i class="iconfont icon-huiyuan2"></i><span>我的</span></a></footer></div></body></html>
body{overflow-x: hidden;}footer{width: 100%;max-width: 960px;height: 50px;position: fixed;bottom: 0;background: rgb(238, 238, 238);display: flex;}footer>a{flex: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;}footer>a>i{color: #888888;font-size: 24px !important;}.container{width: 100vw;height: 100vh;min-width: 320px;max-width: 960px;margin:auto;position: relative;}.container > .nav-head{position: fixed;width: 100%;max-width: 960px;height: 50px;padding: 0 15px;box-sizing: border-box;background: rgb(45, 53, 60);display: flex;justify-content: space-between;align-items: center;}.container > .nav-head img{display: block;}.container > .nav-head > .myself img{border-radius: 50%;}.container > .nav-head > span{font-size: 26px;color: white;}main{width: 100%;max-width:960px;display: flex;flex-direction: column;overflow: auto;margin-bottom: 50px;}main > header{margin-top: 50px;height: 200px;}main > header > img{display: block;}main nav{display: flex;flex-direction: column;}main nav ul{display: flex;background: white;}main nav ul li{margin-top: 1.5vh;flex:auto;}main nav ul li a{display: flex;flex-direction: column;align-items: center;}main nav ul li a img{width: 56px;}main nav ul li a span{margin-top: 1vh;font-size: 16px;font-weight: bold;color: #888888;}main > .recommend,main > .newcommend{margin-top: 2vh;display: flex;flex-direction: column;}main > .recommend > h3,main > .newcommend > h3{color: #888888;padding: 10px;}main > .recommend article:first-of-type{padding: 0 10px;box-sizing: border-box;display: flex;}main > .recommend article:first-of-type a{margin: 5px;flex:auto;}main > .recommend article:first-of-type a img{width: 100%;height: 90px;}main > .recommend article:last-of-type,main > .newcommend article{display: flex;flex-direction: column;}main > .recommend article:last-of-type > section,main > .newcommend article > section{padding: 10px;margin-top: 1vh;box-sizing: border-box;background: white;display: flex;}main > .recommend article:last-of-type > section > a,main > .newcommend article > section > a{flex: 1 1 30%;}main > .recommend article:last-of-type > section > a > img,main > .newcommend article > section > a >img{width: 100%;height: 80px;}main > .recommend article:last-of-type > section > section,main > .newcommend article > section > section{margin-left: 1vw;flex: 1 1 70%;display: flex;flex-direction: column;justify-content: space-between;}main > .recommend article:last-of-type > section > section a,main > .newcommend article > section > section a{font-size: 16px;color:#888888;}main > .recommend article:last-of-type > section > section .tip,main > .newcommend article > section > section .tip{padding:2px;color: white;background: black;border-radius: 5px;font-style: normal;font-size: 12px;}main > .newcommend article > section > section span{font-size: 16px;color: #888888;}main > .newcommend article > section > section span:last-of-type{display: flex;justify-content: space-between;}
这次作业写的时候H5标签的用法可能不是非常正确，也算是一次尝试哈！
还有就是grid布局的作业确实难。没瞅明白，有些地方用grid布局明显就是麻烦了。
那个作业还得再拖一拖（写不来…..）我再研究研究怎么写，说起来grid布局也就这么点东西，但是就是用起来感觉有问题怪怪的！