-
判斷是否是ie isIE = ?。indow.ActiveXObject 判斷是否是IE6 isIE6 = isIE && ！window.XMLHttpRequest;(貌似IE6不支持ajax）查看全部
-
jquery引用的兩種方法查看全部
-
<script type="text/javascript"> function ShowSub(li) { var subMenu =li.getElementsByTagName("ul")[0]; subMenu.style.display = " block "; } function HideSub(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = " none "; } </script> </head> <body> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)" ><a href="#">課程大廳</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li> <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><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>查看全部
-
<style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;float:left;} ul li{ line-height:40px; text-align:center; position:relative;float:left;} a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none;margin-top:2px; background-color:#eee; } ul li ul{width:90px; position:absolute; display:none;} ul li:hover ul{display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">課程大廳</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">jquery</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>查看全部
-
<script> $(function(){ /* $('.rMenu').click(function(){ $('ul li').not('#logo').toggle(); }) */ $('#rList').on('click',function(){ if($('ul li').hasClass('active')){ $('ul li').css('visibility','hidden').removeClass('active');//active存在，在隱藏li，并移除active }else{ $('ul li').css('visibility','visible').addClass('active');/*li顯示并添加類選擇器active*/ } }); })查看全部
-
@media only screen and (min-width:585px) and (max-width:823px) { #logo{ display:none; } #toplogo{ display:block; width:100%;/* 完全占據ul的寬度 */ } .menu { width:585px; } } @media only screen and (max-width:585px) { #logo{ display:none; } .menu { width:100%; } .menu li { width:100%; display:none; } .rMenu { display:block; text-align:right; } #toplogo{ display:block; } }查看全部
-
.menu li{ float:left;/*左浮動*/ margin:3px; width:140px; text-align:center; color:white; font-size:9pt; background:grey; list-style:none; } /*id選擇器比class選擇器的優先級高*/ #logo{ background:white; width:230px; } #logo a{ color:grey;/*“慕課網”字體顏色*/ font-size:35pt;/*字體35磅*/ background:white; } #toplogo{ display:none; margin:0 auto; text-align:center; } #toplogo a{ color:black; font-size:35pt; } .rMenu{ display:none; }查看全部
-
/*設置全局css-body/ul/a */ body{ margin:0 auto; } ul{ margin:0; padding:0; } a{ text-decoration:none; color:white; font-size:14px; padding: 0 3px; display:block;/*轉為塊元素*/ }查看全部
-
</style> <script src="jquery-3.1.1.min.js"></script> <script> $(function(){ $('.rMenu').click(function(){ $('ul li').not('#logo').toggle(); }) }) </script>查看全部
-
<body> <ul class="menu"> <div id="toplogo"> <a href="#" >慕課網</a> <a href="#" class="rMenu"><img src="icon.png"/></a> </div> <li><a href="#">課程中心</a><br />IT課程都在這里</li> <li><a href="#">學習中心</a><br />IT課程都在這里</li> <li id="logo"><a href="#">慕課網</a></li> <li><a href="#">個人中心</a><br/>IT課程都在這里</li> <li><a href="#">關于我們</a><br/>IT課程都在這里</li> </ul> </body>查看全部
-
導航欄<li>標簽橫向自適應解決辦法。<li>標簽不設置固定寬度，padding:0 10px;(0是針對上下，10px針對于左右間隔）查看全部
-
下拉菜單思路。查看全部
-
overflow：這個屬性定義溢出元素內容區的內容會如何處理。 visible 默認值。內容不會被修剪，會呈現在元素框之外。 hidden 內容會被修剪，并且其余內容是不可見的。 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 inherit 規定應該從父元素繼承 overflow 屬性的值。 auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。并不會在該元素上清除浮動，它將清除自己。意思就是說應用了overflow：auto；的元素，將會擴展到它需要的大小，以便包含它里面浮動的元素查看全部
-
IE6不支持li:hover，可以引用IE6兼容性hack文件 csshover.htc ，實現兼容。引用方式，body{behavior: url(csshover.htc);}，引用時注意路徑是否準確。查看全部
-
.top_nav查看全部
舉報
0/150
提交
取消