22.仿传智播客导航栏案例（精灵图案例）
生活随笔
收集整理的這篇文章主要介紹了
22.仿传智播客导航栏案例（精灵图案例）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果：
素材：
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">body,ul,li{margin: 0;padding: 0;}li{list-style: none;}.nav{background: #000;height: 48px;margin-top: 100px;}.nav-con{margin:0 auto;width: 1182px;height: 48px;position: relative;}.nav-con ul li{float: left;}.nav-con ul li a{text-decoration: none;color: #fff;display: inline-block;height: 48px;font:16px/48px microsoft yahei;padding:0 13px;}.nav-con ul li a:hover{background: #3A92D0;}.hot{width:31px;height:21px;background: url("images/sprite.png") -57px 0;position: absolute;left:246px;bottom:34px;}.new{width:31px;height:21px;background: url("images/sprite.png") -135px 0;position: absolute;left:636px;bottom:34px;}</style> </head> <body><div class="nav"><div class="nav-con"><div class="hot"></div><div class="new"></div><ul><li><a href="#">首頁</a></li><li><a href="#">Java</a></li><li><a href="#">UI設計</a></li><li><a href="#">前端與移動開發</a></li><li><a href="#">問答專區</a></li><li><a href="#">iOS</a></li><li><a href="#">PHP</a></li><li><a href="#">C/C++</a></li><li><a href="#">python</a></li><li><a href="#">網絡營銷</a></li><li><a href="#">活動專區</a></li></ul></div></div> </body> </html>總結
以上是生活随笔為你收集整理的22.仿传智播客导航栏案例（精灵图案例）的全部內容，希望文章能夠幫你解決所遇到的問題。
