预览图
代码
<!DOCTYPE html><html lang="en"> <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" /> <title>导航和轮播图</title> <link rel="stylesheet" href="static/font/iconfont.css" /> <style> * { margin: 0; padding: 0; color: #333; } a { text-decoration: none; } img { max-width: 100%; } header { width: 1200px; margin: auto; height: 80px; line-height: 80px; } .log { float: left; height: 80px; } .search { float: right; height: 80px; margin-right: 40px; } #search { width: 300px; line-height: 30px; border: 1px solid #ccc; border-radius: 8px; padding-left: 8px; } #search:hover { box-shadow: 0 0 5px #666; } .search label { margin-left: -25px; } .enter { float: right; height: 80px; } .enter a { font-size: 30px; text-decoration: none; margin: 5px; } .enter a:hover { color: red; } main { width: 1200px; margin: auto; overflow: hidden; } .nav { height: 60px; line-height: 30px; } .bar { float: left; width: 300px; } .lime { float: left; width: 50px; line-height: 60px; font-size: 50px; color: red; } .pic { float: left; width: 40px; border-right: 1px solid #ccc; } .links { float: left; width: 140px; margin-left: 5px; } .focus { width: 1200px; margin-top: 30px; overflow: hidden; } .banner { float: left; width: 898px; margin-right: 7px; } .side { float: left; width: 295px; } </style> </head> <body> <header> <a href="https://www.php.cn" class="log"> <img src="static/images/logo.png" alt="php中文网" /> </a> <div class="enter"> <a href="" class="icon iconfont icon-huiyuan1"></a> <a href="" class="icon iconfont icon-danmu1"></a> <a href="" class="icon iconfont icon-fabu"></a> <a href="" class="icon iconfont icon-fangda"></a> <a href="" class="icon iconfont icon-huiyuan2"></a> <a href="" class="icon iconfont icon-dianzan"></a> </div> <div class="search"> <input type="text" id="search" /> <label class="icon iconfont icon-jinduchaxun" for="search"> </label> </div> </header> <main> <div class="nav"> <div class="bar"> <div class="lime icon iconfont icon-gongdan"></div> <div class="pic"> <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="bar"> <div class="lime icon iconfont icon-renwujincheng"></div> <div class="pic"> <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="bar"> <div class="lime icon iconfont icon-APPkaifa"></div> <div class="pic"> <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="bar"> <div class="lime icon iconfont icon-xiyiji"></div> <div class="pic"> <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="focus"> <a href="" class="banner"> <img src="static/images/2.jpg" alt="" /> </a> <a href="" class="side"> <img src="static/images/banner-right.jpg" alt="" /> </a> </div> </main> </body></html>
