常用导航栏的奥秘1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

各大商城的导航栏,

<!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=gbk" />
<title>菜单演示 www.divcss5.com 在线演示</title>
<link rel="shortcut icon" href="favicon.ico" />
<link href="nav.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="common.js"></script>
<script language="javascript" src="nav.js"></script>
</head>
<body>
<p>DIVCSS5演示特效如下:</p>
<p>&nbsp;</p>
<div class="cent">






<div class="menuNav">
<h2>商品分类</h2>
    <div class="navlist" id="SNmenuNav">
        <dl>
            <dt class="icon03"><a href="#">零食系列</a></dt>
            <dd class="menv03">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
            </dd>
        </dl>
        <dl>
            <dt class="icon04"><a href="#">休闲食品</a></dt>
            <dd class="menv04">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon05"><a href="#">肉类熟食</a></dt>
            <dd class="menv05">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon06"><a href="#">饼干糕点</a></dt>
            <dd class="menv06">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon07"><a href="http://www.divcss5.com/peixun/">牛奶饮品</a></dt>
            <dd class="menv07">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon08"><a href="#">特别推荐</a></dt>
            <dd class="menv08">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon09"><a href="#">代买系列</a></dt>
            <dd class="menv09">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon10"><a href="#">营养早餐系列</a></dt>
            <dd class="menv10">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
            </dd>
        </dl>
        <dl>
            <dt class="icon11"><a href="#">0.5元超值区</a></dt>
            <dd class="menv11">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon12"><a href="#">薯片系列</a></dt>
            <dd class="menv12">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon13"><a href="#">糖果果冻</a></dt>
            <dd class="menv13">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon14"><a href="http://www.divcss5.com/peixun/">生活用品</a></dt>
            <dd class="menv14">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon15"><a href="#">便民服务</a></dt>
            <dd class="menv15">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon16"><a href="#">方便食品</a></dt>
            <dd class="menv16">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon17"><a href="#">功能饮料</a></dt>
            <dd class="menv17">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon18"><a href="#">果汁茶饮</a></dt>
            <dd class="menv18">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon19"><a href="#">啤酒系列</a></dt>
            <dd class="menv19">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
        <dl>
            <dt class="icon20"><a href="#">碳酸饮料</a></dt>
            <dd class="menv20">
                <div class="sideleft">
                <a href="#">八宝粥+饼干</a>|<a href="#">方便面 + 泡面拍档</a>|<a href="#">小吃+零食</a>|
                </div>
                
            </dd>
        </dl>
    </div>
    <div class="clear"></div>
</div>




</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>返回 <a href="http://www.divcss5.com/css-texiao/texiao746.shtml">分类展开CSS+DIV+JS特效</a>:<a href="http://www.divcss5.com/css-texiao/texiao746.shtml">http://www.divcss5.com/css-texiao/texiao746.shtml</a></p>
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!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> <link rel="stylesheet" type="text/css" href="stylesheets/index.css"> </head> <script src="js/jquery-1.4.4.min.js"></script> <script src="js/slides.min.jquery.js"></script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'images/loading.gif', play: 5000, pause: 2500, hoverPause: true, animationStart: function(){ $('.caption').animate({ bottom:-35 },100); }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) { // example return of current slide number console.log(current); }; } }); }); </script> <body bgcolor="#000000"> <div id="page"> <div id="top"> < img src="images/logo.jpg" width="169" height="100" align="left" /> < img src="images/logo2.jpg" /> </div> <div id="nav"><p>首页 作品展示 服装展示 外景展示 新闻动态 关于我们</p ></div> <div class="main" align="center"> <div id="container"> <div id="example"> <div id="slides"> <div class="slides_container"> <div> < img src="images/1.jpg" width="570" height="270" alt="Slide 1"> </div> <div> < img src="images/2.jpg" width="570" height="270" alt="Slide 2"> </div> <div> < img src="images/3.jpg" width="570" height="270" alt="Slide 3"> </div> <div> < img src="images/4.jpg" width="570" height="2
06-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值