HTML+CSS代码橙色导航菜单
效果预览：http://hovertree.com/code/texiao/ks63r6aq.htm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超漂亮的HTML导航菜单CSS代码 - 何问起</title>
<style>
#top {
display: block;
text-align: left;
height: 105px;
position: relative;
z-index: 0;
} .m {
margin: 0 auto;
width: 970px;
} body {
font-size: 12px;
} a {
color: #333;
text-decoration: none;
} a:link {
text-decoration: none;
}
/* Download by http://hovertree.com*/
a.blue:link, a.blue:visited {
color: #014cc9;
text-decoration: none;
} a.blue:hover, a.blue:active {
color: #014cc9;
text-decoration: underline;
} a.org:link, a.org:visited {
color: #ff4e00;
text-decoration: none;
} a:hover, a:active, a.org:hover, a.org:active {
color: #ff4e00;
text-decoration: underline;
} #navpart {
background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;
height: 105px;
width: 950px;
z-index: 0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
clear: both;
position: relative;
} #navpart .sideleft {
background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;
float: left;
height: 105px;
width: 6px;
} #navpart .sideright {
background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;
float: right;
height: 105px;
width: 6px;
} #navmenubar {
height: 32px;
float: left;
display: inline;
margin: 0 -6px;
width: 100%;
position: relative;
z-index: 3;
top: 0;
} #hot {
background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;
height: 21px;
width: 19px;
position: absolute;
top: -5px;
right: 2px;
z-index: 666;
background:black;
} #navmenubar .sideleft {
background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;
float: left;
height: 32px;
width: 6px;
display: inline;
margin: 0 0 0 8px;
} #navmenubar .sideright {
background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;
float: left;
height: 32px;
width: 6px;
display: inline;
margin: 0 4px 0 -2px;
}
/* NAVMENU */
#navmenubar .navmenu {
background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;
height: 32px;
padding: 0;
margin: 0;
float: left;
display: inline;
} #navmenubar .navmenu li {
float: left;
white-space: nowrap;
margin: 0px;
padding: 0px;
display: inline;
} #navmenubar .navmenu li a {
background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;
width: 80px;
padding: 7px 2px 5px 0;
float: left;
line-height: 20px;
height: 20px;
text-align: center;
} #navmenubar .navmenu li a:hover {
background-position: 0 -32px;
color: #602800;
text-decoration: none;
padding: 8px 2px 4px 0;
} #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {
background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;
font-weight: 600;
color: #FFF;
font-size: 14px;
padding: 7px 2px 5px 0;
} #top #navpart .content {
margin-top: 40px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 900px;
height: auto;
color: white;
} #top #navpart .content a {
color: white;
display: inline-block;
margin-top: 0px;
height: 30px;
border: 0px solid white;
line-height: 30px;
padding: 10px;
} .clear {
clear: both;
display: block;
font: 0px/0 sans-serif;
height: 0px;
overflow: hidden;
}
</style> </head>
<body>
<div id="top" class="m">
<div id="navpart">
<div class="sideleft"></div>
<div class="sideright"></div>
<!--NavMenu-->
<div id="navmenubar">
<div class="sideleft"></div>
<ul class="navmenu">
<li class="current"><a href="http://hovertree.com" target="_top" title="首页">何问起</a></li>
<li><a href="http://hovertree.com/"><span>编程资源</span></a></li>
<li><a href="http://hovertree.com"><span>高质量源码</span></a></li>
</ul>
<div class="sideright"></div>
<div class="sideleft"></div>
<ul class="navmenu">
<li><a href="http://tool.hovertree.com"><span>工具</span></a></li>
<li><a href="http://hovertree.com/code/"><span>代码</span></a></li>
<li><a href="http://keleyi.com"><span>jQuery教程</span></a></li>
<li><a href="http://hovertree.com/tiku/"><span>在线题库</span></a></li>
</ul>
<div class="sideright"></div>
<div>
<div class="content">
<a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/ziyuan/js/" target="_blank">JS运算符优先级</a>
<a href="http://hovertree.com/code/texiao/ks63r6aq.htm" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a><a href="http://hovertree.com/hvtart/bjae/e4pya1x0.htm" target="_blank">.NET正则表达式</a>
<a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="keleyi.com/ziliao/googlejavascriptstyle.htm" target="_blank">谷歌JS风格</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/h/bjaf/nebj8df9.htm" target="_blank">js实现异步循环</a> </div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
网页特效：http://www.cnblogs.com/roucheng/p/texiao.html
HTML+CSS代码橙色导航菜单的更多相关文章
- 纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
- 用css实现三级导航菜单
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...
- 简单的CSS 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 利用Html.css OPPO手机导航菜单的制作解析
<body> <div id="top" class="auto"> <div class="nav"> ...
- 38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
- 纯CSS 3D翻转一个面（翻转导航菜单 立方体）
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...
- 用CSS做导航菜单的4个理由
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...
随机推荐
- [.net 面向对象程序设计深入]（5）MVC 6 —— 构建跨平台.NET开发环境（Windows/Mac OS X/Linux）
[.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux) 1.关于跨平台 上篇中介绍了MVC的发展历程,说到ASP.NET ...
- 我只是想开个饭店—— JavaIO模型的演变
Java的IO...真的是我所见过的高级语言中.最最复杂的... 看着这个图我也是醉了. 但是不知不觉间,java的IO已经更新到了NIO.2了,IO库早已经不止是这个样子了,那么这个过程中,它们经历 ...
- ios 避免循环引用
类似网络请求的情况下会导致循环引用,但是 如果网络请求的对象是局部变量,就必须用self,不能用weakSelf,否则,一旦当前方法所在对象销毁,那weakSelf就为空了(如果目的是这样,那就另当别 ...
- 我也来说说DDD~大话目录
回到占占推荐博客索引 DDD之前没有接触过,但一但有了接触就一发不可收拾,他会带去进入一个全新的世界! DDD不是新技术,而是新思想,新模式,是软件开发领域的一次突破,它更接近于业务,对于业务的改动它 ...
- Spring学习记录(四)---bean之间的关系：继承、依赖
继承 这里说的继承和java的继承是不一样的,不是父类子类.但思想很相似,是父bean和子bean 1.父bean是一个实例时.它本身是一个完整的bean 2.父bean是模板,抽象bean ...
- distribution 中一直在运行 waitfor delay @strdelaytime 语句
Replication 自动创建来一个 Job:Replication monitoring refresher for distribution,这个Agent执行一个sp: dbo.sp_repl ...
- 鼠标mouse事件冒泡处理
简单的鼠标移动事件: 进入 mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 m ...
- 【原创】.NET平台机器学习组件-Infer.NET连载(二)贝叶斯分类器
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 微软Infer.NET机器学习组件文章目录:http:/ ...
- iframe跨域+
script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...
- 使用karma测试平时写的小demo（arguments为例）
有人说前端自动化测试非常困难,我觉得确实如此.在项目中,我个人也不放心写的测试,还是要手动测试.但是我们平时写demo学习时,完全可以使用自动化测试. 传统demo 1,新建一个html 2,写入js ...