首页vns威尼斯城官网登入 › 你下载下去时只要去下载一个jquery.网页特效文件,复制代码 代码如下

你下载下去时只要去下载一个jquery.网页特效文件,复制代码 代码如下

点评:下拉导航在浏览网页时经常会遇见到,记得以前都是使用js实现的吧,不过本文接下来要介绍的是采用css3+html5实现,感兴趣的你可不要错过了哈,希望看完对你学习css3有所帮助

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/>
<script src="jquery.网页特效"></script>
<style type="text/css">
<!--
*{ margin:0; padding:0; border:0;}
body{ font-family: arial, 宋体, serif; font-size:12px;}
#nav{ width:180px; line-height: 24px; list-style-type:
none;text-align:left;}
#nav span{ width:160px; display:block; padding-left:20px;
cursor:pointer;}
#nav li{ background:#ccc; border-bottom:#fff 1px solid;
float:left;}
#nav a:link, #nav a:visited{ color:#666; text-decoration:none;}
#nav a:hover{ color:#fff ;text-decoration:none; font-weight:bold;}
#nav li dl{ list-style:none; text-align:left; border-top:1px solid
#fff;}
#nav li dl dd{ background:#ebebeb; border-bottom:#fff 1px solid;}
#nav li dl a{ padding-left:20px; width:160px; display:block;}
#parent{ width:300px; padding-left:20px;}
.dis{ display:none;}
.ondis{ display:block;}
.onhover{ background:#009900; color:#fff;}
.linkhover{ background:#cc0000; color:#fff;}
.active{ background:#00ccff; color:#666666;}
-->
</style>
<script type="text/网页特效">
<!--
$(function(){
$("#nav
li").each(function(i){$(this).children("dl").addclass("dis");
 
$(this).children().click(function(){$(this).next().toggle(function(){$(this).addclass("ondis");});});
  $(this).click(function(){$('#nav
li').each(function(){$(this).find("span").removeclass();});$(this).find('span').addclass("onhover");});
});
})
$(function(){$("#nav dl
dd").hover(function(){$(this).children().addclass("linkhover")},function(){$(this).children().removeclass("linkhover")});})
-->
</script>
<title>jquery弹出二级菜单</title>
</head>
<body>
<div id="parent">
<ul id="nav">
<li><span>frist nav1</span>
  <dl>
   <dd><a href="
menu1</a></dd>
   <dd><a href="#">subnav1 menu2</a></dd>
   <dd><a href="#">subnav1 menu3</a></dd>
   <dd><a href="#">subnav1 menu4</a></dd>
  </dl>
</li>
<li><span>frist nav2</span>
  <dl>
   <dd><a href="
menu1</a></dd>
   <dd><a href="#">subnav2 menu2</a></dd>
   <dd><a href="#">subnav2 menu3</a></dd>
   <dd><a href="#">subnav2 menu4</a></dd>
  </dl>
</li>
<li><span>frist nav3</span>
  <dl>
   <dd><a href="#">subnav3 menu1</a></dd>
   <dd><a href="#">subnav3 menu2</a></dd>
   <dd><a href="#">subnav3 menu3</a></dd>
   <dd><a href="#">subnav3 menu4</a></dd>
  </dl>
</li>
<li><span>frist nav4</span>
  <dl>
   <dd><a href="
menu1</a></dd>
   <dd><a href="#">subnav4 menu2</a></dd>
   <dd><a href="#">subnav4 menu3</a></dd>
   <dd><a href="#">subnav4 menu4</a></dd>
  </dl>
</li>
</ul>
</div>
</body>
</html>

*html 代码

<div class="price_num">
数量:
<select name="" id="num_sort">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="price_total">
总计 : <span>200</span>元
</div>

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>下拉菜单的制作</title>
</head>
<style type="text/css">
#menu{
 margin:0;
 padding:0;
 width:800px;
 list-style-type:none;
 font:14px "宋体";
 
}
#menu li{
 float:left;
 width:150px;
 padding:0;
 margin:0 1px 0 0;
}
#menu li dl{
 margin:0;
 padding:0 0 10px 0;
 background:#cb6 url(bottom.gif) no-repeat bottom left;
}
#menu li dl dt{
 margin:0;
 padding:5px;
 text-align:center;
 border-bottom:1px solid red;
 background:#ed8 url(top.gif) no-repeat top left;
}
#menu li dl dt.red{
 background-color:red;
 }
#menu li dl dt.green{
 background-color:green;
 }
#menu li dl dt.yellow{
 background-color:yellow;
 }
#menu li dl dt.pink{
 background-color:pink;
 }
#menu li dl dt.orange{
 background-color:orange;
 }
#menu dt a,#menu dt a:visited{
 display:block;
 color:#333;
 text-decoration:none;
}
#menu li dd{
 display:none;
 margin:0;
 padding:0;
 color:#fff;
 background:#47a;
}
#menu li dl dd a,#menu li dl dd a:visited{
 display:block;
 text-decoration:none;
 color:#fff;
 text-indent:10px;
 padding:4px 5px 4px 20px;
 background:#47a url(a.gif) no-repeat 10px 0px;
}
#menu li dl dd.last{
 border-bottom: 1px solid red;
}
#menu li:hover dd{
 display:block;
 }
#menu li dl dd a:hover{
 background-color:#147;
 color:#9cf;
}
</style>
</head>
<body>
<ul id="menu">
  <li>
    <dl>
          <dt class="red"><a
href="#">北京市的大学</a></dt>
          <dd><a href="#">清华大学</a></dd>
          <dd><a href="#">北京大学</a></dd>
          <dd class="last"><a
href="#">人民大学</a></dd>
    </dl>
</li>
    <li>
       <dl>
         <dt class="green"><a
href="#">徐州市的大学</a></dt>
         <dd><a href="#">矿业大学</a></dd>
         <dd><a href="#">师范大学</a></dd>
         <dd class="last"><a
href="#">人民大学</a></dd>
     </dl>
</li>
   <li>
     <dl>
         <dt class="yellow"><a
href="#">上海市的大学</a></dt>
         <dd><a href="#">复旦大学</a></dd>
         <dd><a href="#">交通大学</a></dd>
         <dd class="last"><a
href="#">上海大学</a></dd>
    </dl>
</li>
     <li>
        <dl>
        <dt class="pink"><a
href="#">南京市的大学</a></dt>
        <dd><a href="#">南京大学</a></dd>
        <dd><a href="#">理工大学</a></dd>
        <dd class="last"><a
href="#">航天大学</a></dd>
     </dl>
</li>
    <li>
        <dl>
         <dt class="orange"><a
href="#">武汉市的大学</a></dt>
         <dd><a href="#">武汉大学</a></dd>
         <dd><a href="#">理工大学</a></dd>
         <dd class="last"><a
href="#">电大大学</a></dd>
    </dl>
</li>
</ul>
</body>
</html>

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>纯html+css导航</title>
<!-- mulder -->
<!-- qq:10221408 -->
<!-- 只支持 chrome firefox -->
<style>
*{
margin:0;
padding:0;
}
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
nav{
display:inline-block;
border:1px solid #505255;
border-bottom: 1px solid #282C2F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:50px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
}
li{
list-style:none;
float:left;
border-right: 1px solid #2E3235;
position: relative;
/*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F
50%,#3E4245 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff),
color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/
background:#555D5F;
}
li:hover{
/*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F
80%,#555D5F 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff),
color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/
background:#3E4245;
-moz-transition: background 1s ease-out;
-webkit-transition: background 1s ease-out;
}
li a{
display:block;
height:40px;
line-height:40px;
padding:0 30px;
font-size:12px;
color:#fff;
text-shadow: 0px -1px 0px #000;
text-decoration:none;
white-space:nowrap;
border-left: 1px solid #999E9F;
border-top: 1px solid #999E9F;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index:100;
}
li > a{
position:relative;
}
li.first a{
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
li.last{
border-right: 0 none;
}
dl{
position:absolute;
display:block;
top:40px;
left: -25px;
width:165px;
background:#222222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
z-index:10;
}
li:hover dl{
top:50px;
display:block;
width:145px;
padding:10px;
}
dl a{
background:transparent;
border:0 none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-transition: background 0.5s ease-out;
-webkit-transition: background 0.5s ease-out;
z-index:50;
}
dl a:hover{
color:#FFF;
background:#999E9F;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s
ease-in-out;
}
dd{
margin-top:-40px;
opacity:0;
width:145px;
-webkit-transition-property:all;
/*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/
-moz-transition-property: all;
/*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/
/*-webkit-transition-delay:5s;
-moz-transition-delay:5s;*/
}
li:hover dd{
margin-top:0;
opacity:1;
}
li dd:nth-child(1){
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
}
li dd:nth-child(2){
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
}
li dd:nth-child(3){
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
}
li dd:nth-child(4){
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
}
dt{
display:none;
margin-top:-25px;
padding-top:15px;
height:10px;
}
li:hover dt{
display:block;
}
.Darrow{
float:right;
margin:18px 10px 0 0;
border-width:5px;
border-color:#FFF transparent transparent transparent;
border-style:solid;
width:0;
height:0;
line-height:0;
overflow:hidden;
cursor:pointer;
text-shadow: 0px -1px 0px #000;
-webkit-box-shadow:0px -1px 0px #000;
-moz-box-shadow:0px -1px 0px #000;
}
.arrow{
margin:0 auto;
margin-top:-5px;
display:block;
width:10px;
height:10px;
background:#222222;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
</style>
</head>
<body>
<nav>
<ul class="clear">
<li class="first"><a href="#">菜单一</a></li>
<li>
<span class="Darrow"></span>
<a href="#">菜单二</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单三</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单四</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三</a></dd>
<dd><a href="#">子菜单四</a></dd>
</dl>
</li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单七</a></li>
<li class="last"><a href="#">菜单八</a></li>
</ul>
</nav>
</body>
</html>

css
div弹出二级菜单代码这是一款由jquery+css实现的二级菜单实例代码,你下载下去时只要去下载一个jquery.js文件,就可以方便的使用这...

*例四网页换肤

转自:

小伙伴们根据自己的需求,将调用代码加进去就可以了,自由发挥吧。

效果图如下:
图片 1
代码如下:

jquery css教程 div弹出二级菜单代码
这是一款由jquery+css实现的二级菜单实例代码,你下载下去时只要去下载一个jquery.网页特效文件,就可以方便的使用这款漂亮的jquery的二级菜单代码了哦。

html代码

<div class="jqzoom">
<img src="images/pro_img/blue_one_small.jpg" class="fs" alt=""
jqimg="images/pro_img/blue_one_big.jpg" id="bigImg" >
</div>
<span>
<a href="images/pro_img/blue_one_big.jpg" id="thickImg"
title="介绍文字">
<img alt="点击看大图" src="images/look.gif" />
</a>
</span>
<ul class="imgList">
<li><img src="images/pro_img/blue_one.jpg" alt=""
/></li>
<li><img src="images/pro_img/blue_two.jpg" alt=""
/></li>
<li><img src="images/pro_img/blue_three.jpg" alt=""
/></li>
</ul>

代码很简单,就不多废话了,直接奉上代码:

代码如下:

Jquery css div弹出二级菜单代码
这是一款由jquery+css实现的二级菜单实例代码,你下载下去时只要去下载一个jquery.js文件,就可以方便的使用这款漂亮的jquery的二级菜单代码了哦。

html代码

<div class="scrollNews">
<ul>
<li><a href="#" class="tooltip"
title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip"
title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip"
title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip"
title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip"
title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip"
title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip"
title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>

您可能感兴趣的文章:

  • 以JavaScript来实现WordPress中的二级导航菜单的方法
  • JS实现的简洁二级导航菜单雏形效果
  • JS实现黑色大气的二级导航菜单效果
  • JS+CSS实现精美的二级导航效果代码
  • 基于dropdown.js实现的两款美观大气的二级导航菜单
  • js实现横向伸展开的二级导航菜单代码
  • js实现的黑背景灰色二级导航菜单效果代码
  • JavaScript实现简单的二级导航菜单实例
  • js实现二级导航功能

 

例五 *展开瘾藏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript">
    function hoversee(){
    var list = document.getElementById('nav');
    var zu = list.getElementsByTagName("li");
    for(var i=0;i<9;i++)
    {
        zu[i].onmouseover = function(){
            this.getElementsByTagName('dl')[0].style.display =
"block";
        }
        zu[i].onmouseout = function(){
            this.getElementsByTagName('dl')[0].style.display =
"none";
        }
    }
    }
    window.onload = hoversee;
</script>
<style>
    *{
        font-family:Microsoft YaHei;
        margin:0;
        padding:0;
    }
    body{width:100%;}
    ul{list-style: none;}
    a{text-decoration: none;}
    #header{
        height:50px;
        line-height:50px;
        background:#455A6E;
    }
    #header h2,#header h3{
        font-weight:500;
    }
    #header h2{
        color:#fff;
        font-size:18px;
        width:180px;
        text-align: center;
        background:#0D2E49;
    }
    #header h3{color:#fff;font-size:16px;}
    .mycenter{
        width:900px;
        margin:0 auto;
    }
    #header div.mycenter{
        /*相对定位*/
        position:relative;
    }
    #nav {
        width:180px;
        background:rgba(0, 102, 173, 0.5);
        z-index:999;
    }
    #nav li{
        height:40px;
        padding-left:40px;
        line-height: 40px;
        position:relative;
    }
    #nav h3{height:40px;}
    #nav li dl{
        position:relative;
        left:140px;
        top:-40px;
        width:150px;
        background:#fff;
        display:none;
        padding:8px 10px;
    }
    #nav dt{
        width:150px;
        line-height: 30px;
        height:30px;
        background:#36C1AF;
        color:#fff;
        text-align: center;
    }
    #nav dd a{
        display:block;
        height:30px;
        width:150px;
        font-size:14px;
        color:#858585;
    }
    #nav dd a:hover{
        text-decoration: underline;
    }
    #content{
        background:#E95200;
        height:500px;
    }
</style>
</head>
<body>
    <div id="header">
        <div class="mycenter">
            <h2>后台管理菜单</h2>
            <ul id="nav">
                <li>
                    <h3>帐号管理</h3>
                    <dl>
                        <dt>帐号管理</dt>
                        <dd>
                            <a href="#">修改密码</a>
                            <a href="#">修改用户名</a>
                            <a href="#">设置密保问题</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>首页管理</h3>
                    <dl>
                        <dt>首页管理</dt>
                        <dd>
                            <a href="#">轮转照片设置</a>
                            <a
href="#">产品展示照片设置</a>
                            <a href="#">底部信息修改</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>产品管理</h3>
                    <dl>
                        <dt>产品管理</dt>
                        <dd>
                            <a href="#">增加新产品</a>
                            <a href="#">管理全部产品</a>
                            <a href="#">类别管理</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>新闻管理</h3>
                    <dl>
                        <dt>新闻管理</dt>
                        <dd>
                            <a href="#">发布新闻</a>
                            <a href="#">全部新闻管理</a>
                            <a href="#">增加系列</a>
                            <a href="#">新闻系列管理</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>反馈管理</h3>
                    <dl>
                        <dt>反馈管理</dt>
                        <dd>
                            <a href="#">管理所有反馈</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>企业信息管理</h3>
                    <dl>
                        <dt>企业信息管理</dt>
                        <dd>
                            <a href="#">企业简介</a>
                            <a
href="#">企业联系方式设置</a>
                            <a href="#">人才招聘管理</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>权限管理</h3>
                    <dl>
                        <dt>权限管理</dt>
                        <dd>
                            <a href="#">添加新管理员</a>
                            <a
href="#">查看所有账号权限</a>
                            <a href="#">查看申诉</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>功能管理</h3>
                    <dl>
                        <dt>功能管理</dt>
                        <dd>
                            <a href="#">一级功能设置</a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <h3>权限查看与申请</h3>
                    <dl>
                        <dt>权限查看与申请</dt>
                        <dd>
                            <a
href="#">查看自己的权限</a>
                            <a href="#">申请权限</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</body>
</html>

*css代码

.price_num,
.price_total{
font-weight:bolder;
width:380px;
float:left;
margin-bottom:10px;
}

*css代码

ul.item{
padding:5px 0px 5px 15px;
}
.item{
background:#fff;
}
.procude .item li span{
background:url(..treeview-expanded.gif) no-repeat 0px 0px;
padding-left:20px;
}
.item li.active span{
background:url(..treeview-collapsed.gif) no-repeat 0px 0px;
}
.item ul{
margin-left:40px;
}
.item li{cursor:pointer;}
.item .active ul{
display:none;
}
.procude .item ul li{
list-style-image:url(..treeview-item.gif);
}

例六 引用jqzoom.js实现放大镜效果

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=1516

上一篇:

下一篇:

相关文章