-
hover鼠標經過查看全部
-
解決IE6不支持hover事件
寫法一是 ?body{behavior: url(csshover.htc的路徑)} ??
寫法二是用js判斷?如圖所示
?查看全部 -
@media only scren and ()?
查看全部 -
透明：transition 尖角before ie10+
查看全部 -
ie6兼容cover:
css: body{behavior:url(..htc);}
js:?
var isIE=！!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
if(isIE6){方法體}
jQuery:
if($.browser.msie&&.browser.version.substr(0,1)<7{事件體})
$.support.leadingWhiteSpace
查看全部 -
behavior: url(js/ie-css3.htc);
css中加入behavior:url(..htc)兼容ie6
查看全部 -
padding:0對齊菜單，
查看全部 -
ul>boder-bottom并沒有包裹元素，需要加overflow:hidden/auto;
用margin-top:-20px+overflow將中文隱藏;
查看全部 -
中英文菜單：用span隔開，a標簽采用Id方式麻煩
查看全部 -
引用失敗，沒有效果，備用
查看全部 -
function?showsubmenu(li){ ??var?submenu=li.getElementsByTagName("ul")[0] ??submenu.style.display="block"; }查看全部 -
多級菜單：
嵌套：ul..li..ul..li<-a->
父子的定位關系ul..li &ul..li..ul
隱藏：二級+display:none? 顯示?ul li:hover ul{display:block}
查看全部 -
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#menu-top{display:none;}
li{padding:0 5px;
? ?color:white;
? ?background:grey;
? ?float:left;
? ?list-style:none;
? ?text-align:center;
? ?margin-right:5px;}
p{margin-top:10px;}
#menu-middle{font-size:35px;
? ? ? ? ? ? ?background:white;
? ? ? ? ? ? ?color:black;}
#btn{width:40px;
? ? ?height:20px;
? ? ?float:right;
? ? ?background:blue;
? ? ?cursor:pointer;
? ? ?text-align:center;
? ? ?color:white;
? ? ?display:none;}
?@media only screen and (min-width: 585px) and (max-width: 823px)
? {
? ? ?#menu-middle{display:none;}
? ? ?#menu-top{display:block;
? ? ? ? ? ? ? ?width:565px;
? ? ? ? ? ? ? ?height:40px;
? ? ? ? ? ? ? ?line-height:40px;
? ? ? ? ? ? ? ?font-size:32px;
? ? ? ? ? ? ? ?text-align:center;
? ? ? ? ? ? ? ?background:red;}
? ?}
? @media only screen and (max-width: 585px)
? {
? ? ?#menu-middle{display:none;}
? ? ?#menu-top{display:block;
? ? ? ? ? ? ? ?width:100%;
? ? ? ? ? ? ? ?height:40px;
? ? ? ? ? ? ? ?line-height:40px;
? ? ? ? ? ? ? ?text-align:center;
? ? ? ? ? ? ? ?background:red;
? ? ? ? ? ? ? ?font-size:32px;}
? ? ?#btn{display:block;
? ? ? ? ? ?margin-top:10px;}
? ? ? ?li{width:100%;
? ? ? ? ? margin-top:5px;
? ? ? ? ? display:none;}
? }
</style>
<script src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function(){
? $("#btn").on("click",function(){
? ? ? ?if($("li").hasClass("active"))
? ? ? ? ?{
? ? ? ? ? ?$("li").css("display","none").removeClass("active");
? ? ? ? ?}
? ? ? else
? ? ? ? ? {
? ? ? ? ?$("li").css("display","block").addClass("active");
? ? ? ? ? $("#menu-middle").css("display","none");
? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?});
})
</script>
</head>
<body>
<ul id="menu">
? ? ?<div id="menu-top">慕課網</div>
? ? ?<div id="btn">點擊</div>
? ? ? <li>課程大廳<p>IT課程都在這里啦</p></li>
? ? ? <li>學習中心<p>IT課程都在這里啦</p></li>
? ? ? <li id="menu-middle">慕課網</li>
? ? ? <li>個人中心<p>IT課程都在這里啦</p></li>
? ? ? <li>關于我們<p>IT課程都在這里啦</p></li>
</ul>
</body>
</html>
查看全部 -
JS下拉菜單
*{
margin: 0px;
padding: 0px;
}
body
{
font-family: "宋體";
font-size: 16px;
}
#Top
{
width: 500px;
height: 40px;
background-color: #ffa8ff;
margin: 20px auto;
}
ul li
{
list-style: none;
float: left;
position: relative;
}
ul li a
{
display: block;
width: 100px;
height: 40px;
text-decoration: none;
line-height: 40px;
text-align: center;
color:#000000;
}
ul li a:hover
{
background-color: #c0c0c0;
color: #ff0000;
}
ul li ul
{
position: absolute;
left: 0;
top:40px;
display: none;
}
ul li ul li
{
clear: left;
}
/*
ul li:hover ul
{
? ?display: block;
}
*/
ul li ul li a
{
background-color: #bbbbff;
margin-top: 2px;
}
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>下拉菜單</title>
? ? <style type="text/css">
? ? *{
? ? margin: 0px;
? ? padding: 0px;
}
body
{
? ? font-family: "宋體";
? ? font-size: 16px;
}
#Top
{
? ? width: 500px;
? ? height: 40px;
? ? background-color: #ffa8ff;
? ? margin: 20px auto;
}
ul li
{
? ? list-style: none;
? ? float: left;
? ??
? ? position: relative;
}
ul li a
{
? ? display: block;
? ? width: 100px;
? ? height: 40px;
? ? text-decoration: none;
? ? line-height: 40px;
? ? text-align: center;
? ? color:#000000;
}
ul li a:hover
{
? ? background-color: #c0c0c0;
? ? color: #ff0000;
}
ul li ul
{
? ? position: absolute;
? ? left: 0;
? ? top:40px;
? ? display: none;
? ??
? ? ?
}
ul li:hover ul
{
? ? display: block;
}
ul li ul li a
{
? ? background-color: #bbbbff;
? ? margin-top: 2px;
? ?
}
? ? ? ??
? ? </style>
</head>
<body>
? ? <div class="top" id="Top">
? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <a href="#">首頁</a>
? ? ? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#">免費課程</a>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">javascript</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">jquery</a>
? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#">職業路徑</a>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">前端開發</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">前端技術</a>
? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#">實戰經驗</a>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">自動化測試</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">開發小程序</a>
? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? <a href="#">找工作</a>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">前端工程師</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">測試工程師</a>
? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div>
? ??
</body>
</html>
查看全部
舉報