前端简单基础页面
1.页面效果：
2.代码如下：（自己暂时写不出来，照着老师代码写了两遍，又重看了教程，总算
入了点门。）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../../../static/font/iconfont.css"> <link rel="stylesheet" href="index_header.css"> <title>全站首页导航与轮播图</title></head><body><div class="index-header"> <div class="content"> <!--logo与搜索框,快速入口--> <div class="log-search"> <a href="" class="logo"><img src="../../../static/images/logo.png" alt=""></a> <div class="search"> <input type="search" name="search" id="search"> <label for="search" class="iconfont icon-jinduchaxun"></label> </div> <div class="quick-entry"> <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="main-nav"> <!--导航详情1--> <div class="nav-detail"> <!--左侧图标与描述--> <div class="pic"> <span class="iconfont icon-gongdan"></span> <div> <span>资讯</span> <span>学习</span> </div> </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> <!--导航详情2--> <div class="nav-detail"> <!--左侧图标与描述--> <div class="pic"> <span class="iconfont icon-renwujincheng"></span> <div> <span>爱好</span> <span>姐妹</span> </div> </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> <!--导航详情3--> <div class="nav-detail"> <!--左侧图标与描述--> <div class="pic"> <span class="iconfont icon-gongdan"></span> <div> <span>软件</span> <span>技能</span> </div> </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> <!--导航详情4--> <div class="nav-detail"> <!--左侧图标与描述--> <div class="pic"> <span class="iconfont icon-DOC"></span> <div> <span>编程</span> <span>美女</span> </div> </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"> <a href=""><img src="../../../static/images/2.jpg" alt=""></a> <a href=""><img src="../../../static/images/banner-right.jpg" alt=""></a> </div> </div></div></body></html>
