HTML部分
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 引入图标库 --> <link rel="stylesheet" href="static/font/iconfont.css"> <link rel="stylesheet" href="index.css"> <title>1220作业</title></head><body><div class="header"> <!--logo 搜索框 快速入口--> <div class="top"> <div class="logo"> <a href=""><img src="static/images/logo.png" alt=""></a> </div> <div class="search"> <input id="search"> <label for="search" class="iconfont icon-jinduchaxun"></label> </div> <div class="shortcut"> <a href="" class="iconfont icon-huiyuan1"></a> <a href="" class="iconfont icon-danmu1"></a> <a href="" class="iconfont icon-fabu"></a> <a href="" class="iconfont icon-fangda"></a> <a href="" class="iconfont icon-huiyuan2"></a> <a href="" class="iconfont icon-dianzan"></a> </div> </div> <!--主导航--> <div class="nav"> <div class="nav-class"> <span class="iconfont icon-DOC"></span> <div class="title"> <span>资讯</span> <span>学习</span> </div> <div class="links"> <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-class"> <span class="iconfont icon-DOC"></span> <div class="title"> <span>爱好</span> <span>姐妹</span> </div> <div class="links"> <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-class"> <span class="iconfont icon-DOC"></span> <div class="title"> <span>软件</span> <span>技能</span> </div> <div class="links"> <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-class"> <span class="iconfont icon-DOC"></span> <div class="title"> <span>编程</span> <span>美女</span> </div> <div class="links"> <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> <!--轮播--> <div class="slider-ads"> <a href=""><img src="static/images/2.jpg" alt=""></a> <a href=""><img src="static/images/banner-right.jpg" alt=""></a> </div></div></body></html>
css部分
a { color: black;}/*顶部*/.header > .top { height: 70px;}/*搜索框*/.header > .top > .search { width: 430px; position: absolute; top: 0; right: 350px;}/*按钮*/.header > .top > .shortcut { width: 300px; position: absolute; top: 0; right: 0;}.header > .top > .search > input { width: 330px; height: 40px;}/*放大镜*/.header > .top > .search > input + label { font-size: 23px; margin-left: -30px;}.header > .top > .shortcut > a { font-size: 33px;}/*导航*/.header > .nav { height: 44px;}.header > .nav > .nav-class { width: 300px; height: inherit; position: relative; float: left;}.header > .nav > .nav-class > .iconfont { font-size: 40px; color: red; position: absolute;}.header > .nav > .nav-class > .title { width: 40px; position: absolute; left: 45px; border-right: 1px solid #cdcdcd;}.header > .nav > .nav-class > .links { width: 200px; position: absolute; left: 100px;}
对CSS不熟，参考而来，很多不会调，还是要多练
