源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="static/font/iconfont.css"><style type="text/css">*{margin: 0;padding:0;}a{text-decoration: none;}li{list-style: none;}header .container{max-width: 1200px;margin: 0 auto;padding: 0 15px;box-sizing: border-box;}.head{height:79.6px;line-height: 79.6px;overflow: hidden;}.logo,.searchbox,.shareico{float: left;}.searchbox{position: relative;margin: 0px 50px 0px 350px;}.searchbox span{position: absolute;right: 10px;}input[name="search"]{width: 300px;height: 30px;line-height: 30px;padding:0 5px;border:1px solid rgba(220, 220, 220);border-radius: 10px;}.shareico .iconfont{font-size: 36px;color: rgba(63, 63, 63);padding: 0 5px;}nav ul li{display: inline-block;margin-right: 30px;}.lefttitle,.cate{display: inline-block;font: 16px/32px '微软雅黑';}.cate{border-left:3px solid #efefef;padding-left:10px;margin-left: 5px;}.lefttitle,.cate a{color: rgba(112, 112, 112);}.lefttitle p,.cate p{line-height: 25px;}.lefttitle .iconfont{font-size: 45px;line-height: 53.5px;color: red;}.lefttitle div{display: inline-block;}.banner{margin-top: 10px;overflow: hidden;}.banner .bigbanner{width: 65%;float: left;}.banner .smallbanner{width: 34%;float: right;}.banner img{width: 100%;height: 300px;}</style></head><body><header><div class="container"><!-- 三大件 --><div class="head"><div class="logo"><img src="static/images/logo.png" alt=""></div><div class="searchbox"><form action=""><input type="text" name="search"><span class="iconfont icon-sousuo2"></span></form></div><div class="shareico"><span class="iconfont icon-huiyuan1"></span><span class="iconfont icon-danmu1" ></span><span class="iconfont icon-fabu" ></span><span class="iconfont icon-fangda" ></span><span class="iconfont icon-huiyuan2" ></span><span class="iconfont icon-dianzan" ></span></div></div><nav><ul><li><div class="lefttitle"><div><span class="iconfont icon-gongdan"></span></div><div><p>资讯</p><p>学习</p></div></div><div class="cate"><p><a href="#">器材</a><a href="#">大师</a><a href="#">学院</a><a href="#">实战</a></p><p><a href="#">大赛</a><a href="#">裤子</a><a href="#">影视</a><a href="#">其他</a></p></div></li><li><div class="lefttitle"><div><span class="iconfont icon-renwujincheng"></span></div><div><p>爱好</p><p>姐妹</p></div></div><div class="cate"><p><a href="#">有品</a><a href="#">图片</a><a href="#">喝水</a><a href="#">飞机</a></p><p><a href="#">坦克</a><a href="#">气球</a><a href="#">毛线</a><a href="#">其他</a></p></div></li><li><div class="lefttitle"><div><span class="iconfont icon-gongdan"></span></div><div><p>软件</p><p>技能</p></div></div><div class="cate"><p><a href="#">学习</a><a href="#">爱国</a><a href="#">敬业</a><a href="#">友善</a></p><p><a href="#">富强</a><a href="#">互助</a><a href="#">仁义</a><a href="#">其他</a></p></div></li><li><div class="lefttitle"><div><span class="iconfont icon-DOC"></span></div><div><p>编程</p><p>美女</p></div></div><div class="cate"><p><a href="#">吃饭</a><a href="#">周易</a><a href="#">黄山</a><a href="#">合肥</a></p><p><a href="#">上海</a><a href="#">杭州</a><a href="#">北京</a><a href="#">其他</a></p></div></li></ul></nav><div class="banner"><div class="bigbanner"><img src="static/images/2.jpg"></div><div class="smallbanner"><img src="static/images/banner-right.jpg"></div></div></div></header></body></html>
当我看到这个大作业的时候我是觉得很简单的，flex布局可以刷刷的搞定，后来老师说要用原生浮动和定位！当然也是简单,但是其中的导航部分我花了一部分时间，写了三种方法….发现都好麻烦，于是乎还是好好加标签。
还有一个最无奈的地方就是….命名真的不知道要起什么名字！最后希望老师在下发的素材中有更多像右边小姐姐这么好看的图！