软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 网页特效 > 菜单导航 > CSS仿康盛创想设计的菜单导航栏

CSS仿康盛创想设计的菜单导航栏

  想做一个导航栏,无意间打开了康盛创想网站,觉得这个导航栏不错,决定就做这个了,我的做法又以下几点:

  1、先是看了看他的导航栏;

  2、我喜欢在Fireworks中设计图片,PS不太懂,所以选择在这个软件中先把这个效果图设计出来。

  (在Fireworks设计出来的效果图一)

  3、现在就是建立XHTML页面的时候了,我选择Dreamweaver cs3,创建一个过渡性的XHTML页面

  4、HTML代码如下:

<div id="nav">
  <ul>
    <li><a id="home" class="here" href="#"><span>首页</span></a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">下载</a></li>
    <li><a href="#">帮助</a></li>
    <li><a href="#">公司</a></li>
    <li><a href="#">购买</a></li>
    <li><a id="idc" href="http://www.veryhuo.com/">烈火网</a></li>
  </ul>
</div>

  5、下面是CSS代码:

<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif,"宋体";
font-size:12px;
margin:100px;
}
li { list-style:none;}
#nav {
margin:0 auto;
list-style:none;
height:33px;
position:relative;
white-space:nowrap;
width:800px;
z-index:1;
background: url(/uploads/allimg/0911/navbg.png) repeat-x;
}
#nav li {
float:left;
background:url(/uploads/allimg/0911/navbgbtnhot.png) right no-repeat;
}
#nav li a {
font-weight:bold;
padding:9px 28px;
color:#fff;
text-decoration:none;
display:block;
}
#nav li a.here{
margin-top:1px;
background: url(/uploads/allimg/0911/navbgleft2.png) no-repeat left;
}
#nav li a:hover{
background: url(/uploads/allimg/0911/navbgbtn.png) no-repeat left;
color:#000000;
}
#nav li a#home, #nav li a#home.here{
color:#fff;
background: url(/uploads/allimg/0911/navbgleft2.png) no-repeat left top;
margin:0;
}
#nav li a#home:hover, #nav li a#home.here:hover {
color:#000;
background: url(/uploads/allimg/0911/navbgleft.png) no-repeat left top;
margin-top:1px;
}
#nav li a#idc {
padding:9px 15px;
}
</style>

  效果演示:


提示:可修改后代码再运行!

    相关阅读
    栏目导航
    推荐软件