注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

巨蟹男的博客

如果不可以改变现实,那么就先改变自己

 
 
 

日志

 
 

css打造经典鼠标触发显示选项  

2007-04-27 14:30:07|  分类: 常 用_资源 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!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=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>css打造鼠标触发效果</title>
<meta content="all" />
<meta content="yyt_by@163.com,huanghai,www.hppd.cn 友情制作" />
<meta content="hppd" />
<meta content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" />
<meta content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog" />

<style type="text/css">
<!--
body {
 margin: 0;
 padding: 0;
 color: #000;
 font-size: 12px;
 line-height: 160%;
 text-align: left;
 height: 100%;
 font-family: '宋体',Tahoma ,arial,verdana,sans-serif,'Lucida Grande','Lucida Sans Unicode';
}
*{ margin:0; padding:0;}
h2,h2 a:link,h2 a:hover,h2 a:visited{
 font-size: 14px;
 text-decoration: none;
 color: #000000;
    }
.kw_from {
 padding:20px 0 0 0px;
 margin: auto;
 height: 300px;
 overflow: hidden;
 width: 650px;
   }
.kw_from .sbtn{
 float:left;
 width:80px;
 padding: 16px 0 0 0;
}
.kw_from .searchMore{
 float:left;
 width:80px;
 padding: 4px;
}
#searchNav {
 width:430px;
 float: left;
}
#searchNav #conter1, #searchNav #conter3{
 float:left;
 width:250px;
}
#searchNav #conter2, #searchNav #conter4{
 float:left;
 width:180px;
}
#searchNav ul {
 padding: 0;
 margin: 0;
 list-style: none;
}
#searchNav li {
 float: left; 
}
#searchNav li ul {
 display: none; 
 top: 20px; 
}
#searchNav li:hover ul, #searchNav li.over ul {
 display: block;
 float:left;
}
#searchNav ul li a{
 float:left;
 display:block;
 font-size:12px;
 padding:3px;
 text-decoration: none;
 color: #777;
}
#searchNav ul li a:hover{
 background-color:#f4f4f4;
}
#searchNav #jobKw{
 width:220px;
 height:18px;
}
#searchNav #cityKw{
 width:130px;
 height:18px;
}
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("searchNav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     this.className+=" over";
    }
    node.onmouseout=function() {
     this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload=startList;

//--><!]]>
</script>

</head>

<body>
<div >
  <form action="/search.html" method="get" check()">
    
        <ul >
        <li ><h2>找什么</h2>
     <input type="text"  />
           <ul >
           <li><a href="#">会计</a> </li>
           <li><a href="#">网页设计</a></li>
           <li><a href="#">翻译</a></li>
           <li><a href="#">家教</a></li>     
           <li><span ><a href="#">更多&gt;&gt; </a></span></li>
        </ul>
     </li>

       <li ><h2>在那里</h2>
        <input type="text"  />
           <ul >
           <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 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><span ><a href="#">更多城市&gt;&gt;</a></span></li>
           </ul>
      </li>
      </ul>
   <div >
   <input type="submit" style="margin:0px 15px 2px 0;" value="搜索工作" />
   </div>
   <div >
        <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a>      </div>
  </form>
</div>
</body>
</html>

  评论这张
 
阅读(65)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017