SunLe'Blog---孙乐
SunLe'Blog,孙乐
输入您的搜索字词
Web
www.sunle.net
提交搜索表单
首页
标签
留言
链接
边栏
归档
星标日志
留言板不能翻页
google技巧、推广、方法、教程、使用指南、大全
css打造经典鼠标触发显示选项
大
|
中
|
小
[
2007/07/05 16:21 | by
sunle
]
<!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" name="robots" /> <meta name="author" content="yyt_by@163.com,huanghai,<a href="http://www.hppd.cn" target="_blank">www.hppd.cn</a> 友情制作" /> <meta name="copyright" content="hppd" /> <meta name="description" content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> <meta name="keywords" 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 class="kw_from"> <form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"> <ul id="searchNav"> <li id="conter1"><h2>找什么</h2> <input id="jobKw" name="jobKw" type="text" /> <ul id="conter3"> <li><a href="#" onclick="javascript:document.searchForm.jobKw.value+=\'会计 \'" >会计</a> </li> <li><a href="#" onclick="javascript:document.searchForm.jobKw.value+=\'网页设计 \'">网页设计</a></li> <li><a href="#" onclick="javascript:document.searchForm.jobKw.value+=\'翻译 \'">翻译</a></li> <li><a href="#" onclick="javascript:document.searchForm.jobKw.value+=\'家教 \'">家教</a></li> <li><span class="moreCity"><a href="#">更多>> </a></span></li> </ul> </li> <li id="conter2"><h2>在那里</h2> <input id="cityKw" name="cityKw" type="text" /> <ul id="conter4"> <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 class="moreCity"><a href="#">更多城市>></a></span></li> </ul> </li> </ul> <div class="sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> </div> <div class="searchMore"> <a href="search_expert.html">高级搜索</a><br /><a href="search_sort.html">分类搜索</a> </div> </form> </div> </body> </html>
运行代码
复制代码
粘贴代码
另存代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
相关日志
DIV 图片居中
菜单点击弹出下拉式
CSS三栏布局中最先显示中栏的方法
IE多版本共存的解决方案——IETester（推荐）
如何在DIV框加一个关闭按钮？？
Tags:
css
,
选项
网站制作
|
评论(0)
|
引用(0)
|
阅读(457)
引用地址：
注意：
该地址仅在今日23:59:59之前有效
发表评论
表情
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称
密码
游客无需密码
网址
电邮
[注册]
分类
工作生活
[129]
资源共享
[45]
网站制作
[129]
网站运营
[35]
个人备忘
[48]
日历
<
2008
>
<
11
>
戊子年（鼠）
日
一
二
三
四
五
六
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
搜索
日志标题
日志全文
评论引用
所有留言
Tags
统计
访问次数 351157
今日访问 518
日志数量 386
评论数量 164
引用数量 0
留言数量 1
注册用户 0
在线人数 22
最新日志
让APACHE支持.ht...
简单方法获得当前地址信息...
DIV 图片居中
菜单点击弹出下拉式
《FreeBSD新手快速...
最新评论
二手不锈钢反应釜
二维条码
水性玩具漆
水性金属漆
水性防锈漆
链接
默认链接组
Bo-Blog
域名空间注册
Bullcn‘s blog-蓝魔
宝宝酷BLOG
Yuliang's blog
龙的天空
布诺网络营销研究
幸福的旁边
戒网
在西安
上网我爱你
马盟日志
西安SEO
蓝天’S Blog
Mr.Jothy
关于SEO[黄石SEO博客]
归档
2008/11
2008/10
2008/09
2008/08
2008/07
其他
登入
注册
申请链接
RSS：
日志
|
评论
编码：UTF-8
XHTML 1.0
热门文章
[46930]
乡村爱情2 乡村爱情第二部在线视频免费播放观看(全)
[19486]
三国志12秘密大公开---特技篇
[10209]
大写中文数字
[9203]
三国志12
[5116]
SolidWorks.2007.SP0.0.简体中文正式版序列号和注册号
留言板不能翻页
google技巧、推广、方法、教程、使用指南、大全
2007/07/05 16:21 | by 
