suchen

Heim  >  Artikel  >  Web-Frontend  >  Super empfohlenes CSS zum Erstellen klassischer mausgesteuerter Anzeigeoptionen_Experience-Austausch

Super empfohlenes CSS zum Erstellen klassischer mausgesteuerter Anzeigeoptionen_Experience-Austausch

PHP中文网
PHP中文网Original
2016-05-16 12:07:251216Durchsuche

Super empfohlenes CSS zum Erstellen klassischer mausgesteuerter Anzeigeoptionen

PHP-Code

<!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> 
<style type="text/css"> 
<!-- 
body { 
margin: 0; 
padding: 0; 
color: #000; 
font-size: 12px; 
line-height: 160%; 
text-align: left; 
height: 100%; 
font-family: &#39;宋体&#39;,Tahoma ,arial,verdana,sans-serif,&#39;Lucida Grande&#39;,&#39;Lucida Sans Unicode&#39;; 
} 
*{ 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="#">会计</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> 
<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>
<a href="search_sort.html">分类搜索</a> </div> 
</form>  
</div> 
</body> 
</html>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse der Auswirkungen von DIV+CSS-Layout-Websites auf den Website-SEO_ErfahrungsaustauschNächster Artikel：Analyse der Auswirkungen von DIV+CSS-Layout-Websites auf den Website-SEO_Erfahrungsaustausch

In Verbindung stehende Artikel

Mehr sehen