仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 688|回复: 7
打印 上一主题 下一主题

[DIV+CSS] CSS教程之一个不错的带下拉菜单的DIV搜刮条

[复制链接]
飘灵儿 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:38:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Div是标签,承载的是内容,而CSS是层叠样式表,承载的是样式。其实我倒觉得Div是气球,css是氢气,两者结合,极尽所能。



<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><HTML><HEAD><TITLE>搜刮条</TITLE><METANAME="Generator"CONTENT="EditPlus"><METANAME="Author"CONTENT=""><METANAME="Keywords"CONTENT=""><METANAME="Description"CONTENT=""><style>/*basic*/*{padding:0;margin:0;color:#000;font:12px/20pxArial,Sans-serif,"宋体";}/*elements*/.clear{clear:both;height:0px;overflow:hidden;}ul,li,ol{list-style-type:none;list-style-position:outside;}button,.btnNormal{height:22px;line-height:18px;padding:09px!important;padding:05px;}a{color:#0042ff;text-decoration:underline;}a,a*{cursor:pointer;}aimg{border:0;}.searchTool{float:left;width:520px;}.searchTool.searchExtend{float:left;line-height:24px;_padding-top:5px;}.searchTool.radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;}.searchTool.txtSearch{float:left;width:232px;padding:2px2px02px;height:20px;line-height:20px;vertical-align:bottom;border:1pxsolid#3e99d4;}.searchTool.selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1pxsolid#3e99d4;border-left:0;}.searchTool.nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;}.searchTool.btnSel{float:right;border-left:1pxsolid#3e99d4;width:14px;height:22px;}.searchTool.btnSela{background:url(/uploadfile/200806/19/8C19316205.gif)no-repeatcentercenter;display:block;width:14px;height:22px;}.searchTool.btnSela:hover{background:url(/uploadfile/200806/19/B619317758.gif)no-repeatcentercenter;border:1pxsolid#fff;width:12px;height:20px;}.searchTool.selOption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1pxsolid#3e99d4;}.searchTool.selOptiona{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;}.searchTool.selOptiona:hover{color:#fff;background:#95d5f1;}.searchTool.btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1pxsolid#3e99d4;overflow:hidden;}.searchTool.btnSearcha{background:url(/uploadfile/200806/19/0D19317419.gif)repeat-xcenter-6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;}.searchTool.btnSearcha:hover{background:url(/uploadfile/200806/19/6B19317830.gif)repeat-xcentercenter;border:1pxsolid#fff;height:20px;line-height:20px;}.searchTool.btnSearch.lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin:0auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=1,offY=1,positives=true);}.searchTool.btnSearcha:hover.lbl{padding-top:0px;}</style><script>functiondrop_mou搜索引擎优化ver(pos){try{window.clearTimeout(timer);}catch(e){}}functiondrop_mou搜索引擎优化ut(pos){varposSel=document.getElementById(pos+"Sel").style.display;if(posSel=="block"){timer=setTimeout("drop_hide("+pos+")",1000);}}functiondrop_hide(pos){document.getElementById(pos+"Sel").style.display="none";}functionsearch_show(pos,searchType,href){document.getElementById(pos+"SearchType").value=searchType;document.getElementById(pos+"Sel").style.display="none";document.getElementById(pos+"Slected").innerHTML=href.innerHTML;document.getElementById(pos+q).focus();varsE=document.getElementById("searchExtend");if(sE!=undefined&&searchType=="bar"){sE.style.display="block";}elseif(sE!=undefined){sE.style.display="none";}try{window.clearTimeout(timer);}catch(e){}returnfalse;}</script></HEAD><BODY><divclass="searchTool"><formmethod="get"action="http://so.youku.com/search_playlist"name="headSearchForm"id="headSearchForm"onsubmit="returndosearch(this);"><inputclass="txtSearch"id="headq"name="q"type="text"value="闯关东"/><inputname="searchdomain"type="hidden"value="http://so.youku.com"><inputid="headSearchType"name="searchType"type="hidden"value="playlist"><divclass="selSearch"><divclass="nowSearch"id="headSlected"onclick="if(document.getElementById(headSel).style.display==none){document.getElementById(headSel).style.display=block;}else{document.getElementById(headSel).style.display=none;};returnfalse;"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);">专辑</div><divclass="btnSel"><ahref="#"onclick="if(document.getElementById(headSel).style.display==none){document.getElementById(headSel).style.display=block;}else{document.getElementById(headSel).style.display=none;};returnfalse;"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);"></a></div><divclass="clear"></div><ulclass="selOption"id="headSel"style="display:none;"><li><ahref="#"onclick="returnsearch_show(head,video,this)"onmou搜索引擎优化ver="drop_mou搜索引擎优化ver(head);"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);">视频</a></li><li><ahref="#"onclick="returnsearch_show(head,playlist,this)"onmou搜索引擎优化ver="drop_mou搜索引擎优化ver(head);"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);">专辑</a></li><li><ahref="#"onclick="returnsearch_show(head,user,this)"onmou搜索引擎优化ver="drop_mou搜索引擎优化ver(head);"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);">会员</a></li><li><ahref="#"onclick="returnsearch_show(head,bar,this)"onmou搜索引擎优化ver="drop_mou搜索引擎优化ver(head);"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);">看吧</a></li><li><ahref="#"onclick="returnsearch_show(head,pk,this)"onmou搜索引擎优化ver="drop_mou搜索引擎优化ver(head);"onmou搜索引擎优化ut="drop_mou搜索引擎优化ut(head);">PK擂台</a></li></ul></div><divclass="btnSearch"><ahref="#"onclick="javascript:returndosearch(document.getElementById(headSearchForm));"><spanclass="lbl">搜刮</span></a></div><divclass="searchExtend"id="searchExtend"name="searchExtend"style="display:none"><inputtype="radio"class="radio"name="sbt"value="post"onclick="csbt(this,this.form.sbts);"/>搜贴子<inputtype="radio"name="sbt"value="user"onclick="csbt(this,this.form.sbts);"class="radio"/>按作者搜<inputtype="hidden"name="sbts"value="bar"></div><divclass="clear"></div></form></div><divclass="clear"></div></div></div></BODY></HTML>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
说实话,我并不是反对div+css,但物生一利,必生一弊,div+css的利处大家说了很多,我就说说狂热的追求div+css的几个弊端:
莫相离 该用户已被删除
沙发
发表于 2015-1-18 07:32:07 | 只看该作者
由CS4版本开始,则转用WebKit排版引擎(亦即GoogleChrome和AppleSafari浏览器所用的排版引擎)作为网页预览。
愤怒的大鸟 该用户已被删除
板凳
发表于 2015-1-23 19:03:37 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
灵魂腐蚀 该用户已被删除
地板
发表于 2015-1-31 20:04:00 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
柔情似水 该用户已被删除
5#
发表于 2015-2-7 00:46:09 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
简单生活 该用户已被删除
6#
发表于 2015-2-19 08:50:08 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
透明 该用户已被删除
7#
发表于 2015-3-6 14:35:18 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
只想知道 该用户已被删除
8#
发表于 2015-3-20 11:30:02 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 02:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表