怎么用css实现橙色导航菜单

本篇内容介绍了“怎么用css实现橙色导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

宝丰网站建设公司创新互联,宝丰网站设计制作，有大型网站制作公司丰富经验。已为宝丰上千余家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的宝丰做网站的公司定做！

这是一款橙色风格的CSS菜单，没有使用Javascript技术，完全CSS代码实现，当初主要是想用在团购网站上，大家修改一下，可以用在各种各样的网站上。菜单两头的那个布局或许是你要研究的重要吧。

运行效果截图如下：

怎么用css实现橙色导航菜单

在线演示地址如下：

http://demo.jb51.net/js/2015/css-orange-tg-nav-menu-codes/

具体代码如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>橙色团购网站导航菜单</title>
<style>
* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
BACKGROUND-COLOR: #ffffff; MARGIN: 0px auto; COLOR: #000000; FONT-SIZE: 9pt
}
.nav_box { width:960px; height:44px; background:url(images/nav_bg.jpg); margin:0 auto; position:relative; overflow:visible; margin-top:100px; }
.nav_box_l { width:32px; height:57px; background:url(images/nav_left.png) no-repeat; position:absolute; left:-32px; top:0; }
.nav_box_r { width:31px; height:57px; background:url(images/nav_right.png) no-repeat; position:absolute; right:-31px; top:0; }
.nav_box li { float:left; padding:0 30px; font-size:16px; font-weight:bold; line-height:40px; list-style:none;}
.nav_box li.li_r { float:right; padding:0 10px; font-size:16px; line-height:40px; color:#FFF; font-size:12px }
.nav_box li a { color:#FFF; text-decoration:none }
.nav_box li a.font_min { font-weight:400; }
</style>
</head>
<body >
<div class="nav_box">
<div class="nav_box_l"></div>
<div class="nav_box_r"></div>
<div class="">
<ul>
<li><a linkindex="16" href="#">今日团购</a></li>
<li><a linkindex="17" href="#">往期团购</a></li>
<li><a linkindex="18" href="#">玩转团购</a></li>
<li><a linkindex="19" href="#">常见问题</a></li>
<li class="li_r"><a href="#">登录</a> | <a href="#">注册</a></li>
<li class="li_r"><a linkindex="20" href="#" > <<邀请好友购买返10 元 </a></li>
</ul>
</div>
</body>
</html>

“怎么用css实现橙色导航菜单”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

文章标题：怎么用css实现橙色导航菜单
标题路径：https://www.cdcxhl.com/article4/pgojie.html

成都网站建设公司_创新互联，为您提供网站制作、静态网站、网站收录、网站设计、网站维护、响应式网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容