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.仿传智播客导航栏案例（精灵图案例）相关推荐

《传智播客.Net培训.net视频教程》(.net视频asp.net培训传智播客asp.net视频教程开放课程c#视频移动开发winform SQL ADO.Net HTML JavaScript
本资源重要通知 2011年4月传智播客.Net培训-免费公开课现场视频 [重磅内容]微软移动开发介绍1-早起的鸟儿有食吃.rar 详情 53.2MB [重磅内容]微软移动开发介绍2-windows.p ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第22讲：PHP语法、数据类型(整型、布尔型、浮点型、字符串型)
陈力:传智播客古代珍宝币泡泡龙游戏开发第22讲:PHP语法.数据类型(整型.布尔型.浮点型.字符串型) PHP语法是什么样的,有哪些数据类型,有些什么变量.本文对PHP语法.数据类型(整型.布尔型 ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第52讲：PHP仿smarty模板的实现
陈力:传智播客古代珍宝币泡泡龙游戏开发第52讲:PHP仿smarty模板的实现描述: smarty模板技术为PHP程序设计中处理和界面的分离提供了很大的便利,有必要了解其设计思路和底层机制,本文 ...
【网站制作视频教程】-第22讲 css盒子模型详解！-传智播客
传智播客( http://icd.itcast.cn/)是一家网页平面设计培训学院,专注于网页设计培训,平面设计培训,fash培训,ui设计培训. 网页设计视频教程下载地址:http://icd ...
传智播客 .NET面试宝典（2015版）
.Net工程师面试笔试宝典培训班常见问题 1.你们会带着我们做完整个完整的项目吗? 答:小的项目会,大的项目则不可能, 1.众所周知,随便拿出一个中等大小的项目,也需要好多个熟练的开发人员开发好多个 ...
传智播客 .NET面试宝典（2014版）
.Net工程师面试笔试宝典由于这套面试题涉及的范围很泛,很广,很杂,大家不可能一天两天就看完和学完这套面试宝典,即使你已经学过了有关的技术,那么至少也需要一个月的时间才能消化和掌握这套面试宝典,所以 ...
传智播客 - java 就业面试题大全
从享受生活的角度上来说:"程序员并不是一种最好的职业,我认为两种人可以做程序员,第一,你不做程序员,你就没有什么工作可做,或者说是即使有可以做的工作但是你非常不愿意去做:第二,你非常痴迷 ...
传智播客微金所项目实战
微金所项目实战(出处:传智播客) 1. 搭建Bootstrap页面骨架及项目目录结构 ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
传智播客设计学院网页制作案例
做这个案例的方法有很多种,我这个只是上课做的,办法简单粗暴,仅供参考!!!!! 效果图本人英文不是很好,标签命名就很随意,见笑了! html <div id="hear"& ...

22.仿传智播客导航栏案例（精灵图案例）

22.仿传智播客导航栏案例（精灵图案例）相关推荐

最新文章

热门文章