-
hover 在ie6以下版本的兼容問題查看全部
-
box-shadow:0 1px 0 #111,0 2px 0 #666多個陰影可以疊加，這樣產生的會有分隔線 線性漸變：linear-gradient(顏色1,顏色2) 邊框圓角：border-radius:邊框半徑; 盒子陰影：box-shadow:水平位移 垂直位移 羽化范圍 羽化顏色 文本陰影：text-shadow 同上 同時設置多種顏色盒子陰影，多組值之間使用“,”分隔 清除浮動 xxx:before,xxx:after{content:"";display:table} xxx:after{clear:both;} 背景漸變：background-image:linear-gradient(#444,#111); transition要配合hover使用 transition:all .2s ease ease-out ease-in ease-in-out... opacity:0;margin:20px 0 0 0; opacity:1;margin:0; box-shadow:0px 0px 3px red; 盒子陰影 ： 水平陰影 豎直陰影 陰影半徑 顏色 overflow清除浮動的原因 是因為overflow除了(visible)會重新給他里面的元素建立塊級格式化(block formatting context) floats, position absolute, inline-block, table-cell和table-caption都不是塊級樣式，所以才會用到clear來控制浮動 overflow也可以清除浮動是因為當在父級元素設置overflow時候，除了visible，就是只有auto, hidden或者scroll時候，也會建立新的塊級格式給他的子元素, 從而起到清楚浮動效果。 如果想讓某一段代碼在前臺不顯示，最簡單的方法是用css的display:none即可，這樣下邊的內容就自動上移或右側的左移來填補這個空隙。但特殊情況下我們只需要隱藏這個元素， 但它的位置不能被占了，那該怎么實現呢？接下來我們來看css的另外一個屬性Visibility屬性。 visibility:隱藏對應的元素但不擠占該元素原來的空間。 display:隱藏對應的元素并且擠占該元素原來的空間。查看全部
-
<style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ line-height:40px; text-align:center; position:relative; text-align:center;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="#">JavScript</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>查看全部
-
<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; text-align: center; /*position: relative;*/ } a{ text-decoration: none;color: #000; display: block; padding: 0 10px; } a:hover{ color: #fff; background-color: #666; } ul li ul li{ float: none; background-color: #eee; margin-top: 2px; } ul li ul{ position: absolute; /*left: 0px; top: 40px;*/ display: none; } ul li ul li a:hover { background-color: #06F;} ul li:hover ul{ display:block; } </style> <body> <div id="nav"> <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></li> <li><a href="#">經典案例</a></li> <li><a href="#">關于我們</a></li> </ul> </div> </body>查看全部
-
css菜單的下拉隱藏重點在二：第一為首先對下拉菜單的一個隱藏‘display:none;’。第二為鼠標經過時下拉菜單的出現“ul li：hover ul(display:block;)”查看全部
-
兼容性查看全部
-
getElementsByTagname();查看全部
-
js和Jquery方法實現：查看全部
-
動畫實現查看全部
-
display:none隱藏 display:block顯示查看全部
-
Javascript、jQuery方法實現下拉菜單顯示和隱藏查看全部
-
位置：css背景顏色／寬度／高度/margin居中／ 內容ul/li ul{list-style:none;} ul li{float:left;width:50px;line-height垂直居中;text-align:center;水平居中}； *{margin:0; padding:0;} a{text-decoration:none; color: ;display:block行內元素變塊狀元素;padding:0 10px;} a: hover{color: : background-color: ;} 二級菜單： 具體li項目后加ul/li 耳機菜單取消浮動，加背景顏色，上邊距 二級菜單ul li {position:relative ul li ul{position:absolute;left:0;top:40;display:none耳機菜單消失」 ul li: hover ul{display:block;}查看全部
-
abc查看全部
-
CSS實現下拉菜單： 狀態選擇器 和 層級選擇器結合： ul li ul{position:absolute;left:0;top:0;display:none;} ul li:hover ul{display:block;}查看全部
-
float浮動屬性，值left向左浮動,值為right向右浮動查看全部
舉報
0/150
提交
取消