真是不好意思，这几天生病了，一直没有时间提交作业，下面是关于作业的一些想法。
拿到老师给的demo视频的时候，就分析了一下老师的页面，顶部logo，搜索框，图标可以用页眉<header>来实现。
导航的位置刚刚好可以用<nav>标签。
至于下面的轮播图，就直接放在<main>标签了，也是最简单的，直接float:left;,第二张图片直接加个margin-left;或者直接float:right;应该也是可行的。
页面中引用了老师发的static字体包及相关素材。
开始想其实可以使用表格来实现布局的，不过既然当天学的css,也得用CSS试试，下面是效果图。
html代码(为了方便上传，我直接将css样式写入了html文档中，虽然，这并不是规范的)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>12月20日作业</title><link rel="stylesheet" href="static/css/reset.css"><link rel="stylesheet" href="static/font/iconfont.css"><style>.header-box{width: 1218px;height: 120px;margin: 0 auto;background-color: #fff;padding: 10px;box-sizing: border-box;position: relative;}.header-logo{display: inline-block;height: 76px;position: absolute;}.search-box{display: inline-block;position: absolute;right: 350px;top: 25px;}.search-box > input{width: 350px;height: 30px;padding: 5px;border: 1px solid #ccc;border-radius: 10px;}.search-box > input:hover{border: 3px solid #ccc;}.search-box > .search-icon{font-size: 2em;position: relative;left: -50px;top: 7px;}.more-icon{position: absolute;right: 0;top: 25px;}.more-icon > a:hover{color: red;}.more-icon > a > .iconfont{font-size: 3em;margin-left: 10px;}.nav-box{width: 1218px;height: 100px;margin: 0 auto;}.nav-box > .nav-item{width: 300px;height: 100px;text-align: center;display: inline-block;position: relative;}.nav-box > .nav-item > .icon-text{float: left;width: 130px;border-right: 1px solid #ccc;padding: 10px;box-sizing: border-box;display: inline-block;}.nav-box > .nav-item > .icon-text > .iconfont{float: left;font-size: 3em;color: red;}.nav-box > .nav-item > .icon-text > span{font-size: 1.2em;}.nav-box > .nav-item > .nav-list{width: 170px;position: absolute;left: 130px;top: 10px;}.nav-box > .nav-item > .nav-list > a{font-size: 1.1em;}.swiper{width: 1218px;height: 200px;margin: 0 auto;}.swiper > .swiper-left{float: left;}.swiper > .swiper-right{float: left;margin-left: 25px;}</style></head><body><header><div class="header-box"><div class="header-logo"><a href=""><img src="static/images/logo.png" alt="PHP中文网"></a></div><div class="search-box"><input type="text"><span class="iconfont search-icon"></span></div><div class="more-icon"><a href=""><span class="iconfont"></span></a><a href=""><span class="iconfont"></span></a><a href=""><span class="iconfont"></span></a><a href=""><span class="iconfont"></span></a><a href=""><span class="iconfont"></span></a><a href=""><span class="iconfont"></span></a></div></div></header><nav><div class="nav-box"><div class="nav-item"><div class="icon-text"><span class="iconfont"></span><span>资讯</span><span>学习</span></div><div class="nav-list"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div><div class="nav-item"><div class="icon-text"><span class="iconfont"></span><span>资讯</span><span>学习</span></div><div class="nav-list"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div><div class="nav-item"><div class="icon-text"><span class="iconfont"></span><span>资讯</span><span>学习</span></div><div class="nav-list"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div><div class="nav-item"><div class="icon-text"><span class="iconfont"></span><span>资讯</span><span>学习</span></div><div class="nav-list"><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a><a href="">器材</a></div></div></div></nav><main><div class="swiper"><div class="swiper-left"><a href=""><img src="static/images/2.jpg" alt=""></a></div><div class="swiper-right"><a href=""><img src="static/images/banner-right.jpg" alt=""></a></div></div></main></body></html>