-
如果要解決hover在IE6中的兼容問題的話,只需要將csshover.htc文件下載到本機網頁文件夾中,在css代碼中加上 body { behavior: url(csshover.htc); } 之后,就可以了。查看全部
-
三級菜單是二級菜單的子元素,所以如果父元素(二級菜單)都已經隱藏了,那么子元素肯定是隱藏了,所以我們就基本上不用再寫三級菜單的隱藏了,但是在二級菜單顯示的時候,我們要定義一下三級菜單的顯示還是隱藏,要單獨的定義。查看全部
-
關于margin值取負數的問題 margin四個方向都可以有負值;舉個例子:比如上下兩個div,如果它們之間是緊挨著的話,你在下面那個div 設置個margin-top:-10px;的屬性,那么它就會向上移動10px和上面那個div疊在一起,而且下面div上面的那10px會被上面的div覆蓋,就相當于它上面被剪切了10px一樣。 負邊距的作用主要用于使相鄰的兩個元素靠的更緊密等等,還有很多其他的應用,自己試一下就知道效果了查看全部
-
使用了overflow:auto/hidden;的元素將會擴展到它需要的大小以包圍它里面浮動的子元素。查看全部
-
注意使用在線服務器上的jQuery庫時,不能這樣寫 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> jQuery(document).ready(function(){ jQuery(".navmenu").mouseover(function(){ jQuery(this).children("ul").show(); }) jQuery(".navmenu").mouseout(function(){ jQuery(this).children("ul").hide(); }) }) </script> 而要寫成 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".navmenu").mouseover(function(){ jQuery(this).children("ul").show(); }) jQuery(".navmenu").mouseout(function(){ jQuery(this).children("ul").hide(); }) }) </script>查看全部
-
注意使用本地jQuery庫時,不能這樣寫 <script type="text/javascript" src="jquery-2.1.1.min/jquery-2.1.1.min.js"> jQuery(document).ready(function(){ jQuery(".navmenu").mouseover(function(){ jQuery(this).children("ul").show(); }) jQuery(".navmenu").mouseout(function(){ jQuery(this).children("ul").hide(); }) }) </script> 而要寫成 <script src="jquery-2.1.1.min/jquery-2.1.1.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".navmenu").mouseover(function(){ jQuery(this).children("ul").show(); }) jQuery(".navmenu").mouseout(function(){ jQuery(this).children("ul").hide(); }) }) </script>查看全部
-
在jQuery中,$完整的寫法是jQuery(document).ready,即是指整個文檔加載完之后再去執行 $(function(){ 函數代碼; })這里面的jQuery代碼。 $=jQuery 在這里面,class的名稱前面要加上.,id的名字前面要加上#。查看全部
-
<style type="text/css"> *{margin: 0px;padding: 0px;} #nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;} ul{list-style: none;} ul li{float:left; line-height:40px;height: 40px;text-align: center;} a{text-decoration: none;color: #000;display: block;padding: 0 20px;} a:hover{background-color: #888;} ul li ul li{float: none;background-color: #eee;margin-top: 2px;} ul li ul{ display: none;} ul li ul li a{} ul li ul li a:hover{background-color: blue;color: #fff;} ul li:hover ul{display: block;} </style> </head> <body> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關于我們</a> <ul> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> <li><a href="#">聯系我們</a></li> </ul> </li> <li><a href="#">首頁</a></li> <li><a href="#">首頁</a></li> <li><a href="#">首頁</a></li> </ul> </div> </body>查看全部
-
jQuery這個庫或者這個框架,其實就是在JavaScript語言基礎上進行包裝的,因此jQuery代碼本質上也就是JavaScript代碼,所以也要使用這個標簽<script type="text/javascript">。查看全部
-
——接上面的—— <body> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">課程大廳</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">jquery</a></li> </ul> <ul> <li><a href="#">視頻學習</a></li> <li><a href="#">案例學習</a></li> <li><a href="#">交流平臺</a></li> </ul> </li> <li><a href="#">學習中心</a> <ul> <li><a href="#">視頻學習</a></li> <li><a href="#">案例學習</a></li> <li><a href="#">交流平臺</a></li> </ul> </li> <li><a href="#">經典案例</a></li> <li><a href="#">關于我們</a></li> </ul> </div> </body> </html> 這段代碼就能說明下標的作用。查看全部
-
<!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" /> <title>無標題文檔</title> <style type="text/css"> *{ margin:0px; padding:0;} #nav{ background-color:#eee; width:600px; height:40px; margin: 0 auto;} ul{ list-style:none;} ul li{float:left; line-height:40px; text-align:center; } a{ text-decoration:none; color:#000; width:90px; display:block;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none; background-color:#eee; margin-top:2px; border-left:none;} </style> <script type="text/javascript"> function show(a){ var b = a.getElementsByTagName("ul")[1]; b.style.display = "block"; } function hide(a){ var b = a.getElementsByTagName("ul")[1]; b.style.display = "none"; } </script> </head>查看全部
-
注意:getElementsByTagName獲得的是一組數據,同數組中的一樣,采用下標來表示這一組數據中的某個數據。查看全部
-
行內元素的高度一般由元素內部的字體大小決定,寬度由內容的長度控制。 所以要想讓a標簽中的整個塊兒的顏色發生改變,就需要設置display:block;查看全部
-
因為盒子模型有自己默認的margin和padding值,如果想要去掉的話,就要在CSS中使用*{ margin:0px; padding:0;}語句查看全部
-
菜單的寬度(width)用padding 0 10px代替,這樣無論多少字,單個菜單都可以自動顯示。a標簽:a標簽是行內元素,要變成塊級元素。 CSS 實現下拉菜單顯示和隱藏 li:hover ul{display:block} a:display:block; 設置成塊級元素。 寬度自適應:ul;li:padding:0 10px; 1】一級菜單寬度自適應:a{ display:block; padding:0 10px;} 2】IE7下a需設置寬高 3】不受父元素樣式的影響,選擇器:ul li ul li a{} 4】由于二級菜單li受一級菜單li樣式的控制已經浮動,故需清除浮動:ul li ul li{ float:none;} 二級菜單要精準定位。配合top和left。查看全部
舉報
0/150
提交
取消