Empfohlenes CSS zum Erstellen klassischer mausgesteuerter Anzeigeoptionen-CSS-Tutorial-php.cn

Empfohlenes CSS zum Erstellen klassischer mausgesteuerter Anzeigeoptionen

PHP中文网

Freigeben： 2018-09-27 16:37:29

Original

1691 Leute haben es durchsucht

Ich habe den Beitrag gesehen: Die absolut klassische Pulley-News-Anzeige (Javascript+CSS). Tatsächlich kann er nur mit CSS erstellt werden IE. Es ist nicht erlaubt, dies zu tun. Wenn der js-Teil des folgenden Codes entfernt wird, funktioniert er in Opear und Firrfox einwandfrei, jedoch nicht im IE. Wer Interesse hat, kann es testen. Ich hoffe auch, den Bedürftigen helfen zu können.

Der Code lautet wie folgt:

<!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,www.hppd.cn 友情制作" /> 
<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: &#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> 
<p 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>  
      <p class="sbtn"> 
      <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
      </p> 
      <p class="searchMore"> 
        <a href="search_expert.html">高级搜索</a>
<a href="search_sort.html">分类搜索</a>      </p> 
  </form>  
</p> 
</body> 
</html>

Nach dem Login kopieren