基于HTML+CSS實(shí)現(xiàn)網(wǎng)頁(yè)滑動(dòng)門(mén)效果

一、什么是滑動(dòng)門(mén)
大家在網(wǎng)頁(yè)中經(jīng)常會(huì)見(jiàn)到這樣一種導(dǎo)航效果,因?yàn)槭褂妙l率廣泛,所以廣大的程序員給它起了一個(gè)名字,叫做滑動(dòng)門(mén).在學(xué)習(xí)滑動(dòng)門(mén)之前,首先你要了解什么是滑動(dòng)門(mén)。
小米官網(wǎng),網(wǎng)頁(yè)滑動(dòng)門(mén)效果
二、實(shí)現(xiàn)滑動(dòng)門(mén)所需技術(shù)
- 簡(jiǎn)單HTML基礎(chǔ)知識(shí)
- 簡(jiǎn)單的CSS基礎(chǔ)樣式
- CSS定位
三、如何實(shí)現(xiàn)滑動(dòng)門(mén)
1.準(zhǔn)備好一段HTML代碼
<div class="bg"> <ul> <li> <a href="#">手機(jī) 電話(huà)卡</a> <div class="div1"> <p>這是我的第一個(gè)滑動(dòng)門(mén)</p> <img src="img/海賊.jpg" alt="" width="100%" height="100%"> </div> </li> <li> <a href="#">手機(jī) 電話(huà)卡</a> <div class="div2"></div> </li> <li> <a href="#">手機(jī) 電話(huà)卡</a> <div class="div3"></div> </li> <li> <a href="#">手機(jī) 電話(huà)卡</a> <div class="div3"></div> </li> </ul> </div>
2.給當(dāng)前HTML結(jié)構(gòu)添加一些樣式
<style> body,ul,li,div{ margin:0; padding:0; } ul{ list-style: none; padding:20px 0px; width: 234px; background: rgba(0,0,0,.6); /*定位 作為父級(jí)使用*/ position: relative; } ul li{ height: 42px; line-height: 42px; padding-left: 20px; } ul li:hover{ background: #ff6700; } ul li a{ color: #fff; text-decoration: none; font-size: 14px; } </style>
3.使用定位實(shí)現(xiàn)滑動(dòng)門(mén)效果
/*滑動(dòng)門(mén)*/ ul .div1,.div2,.div3{ width: 800px; height: 460px; background: skyblue; /*使用定位實(shí)現(xiàn)滑動(dòng)門(mén)-------重要步驟*/ /*上海尚學(xué)堂java 加薇心 java8733 了解更多獲取資料 */ position: absolute; top:0; left:234px; display: none; } /*當(dāng)鼠標(biāo)懸停在內(nèi)容上是顯示對(duì)應(yīng)的代碼塊*/ ul li:hover .div1{ display: block; width:800px; opacity: 1; } ul li:hover .div2{ display: block; background: pink; width:600px; height: 460px; }
根據(jù)上面步驟,就可以實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)門(mén)效果,快去試試吧。
四、滑動(dòng)門(mén)實(shí)例
下面這個(gè)實(shí)例作為課下作業(yè),詳情請(qǐng)參考上海尚學(xué)堂官網(wǎng)http://www.shsxt.com/
總結(jié)
以上所述是小編給大家介紹的HTML+CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)滑動(dòng)門(mén)效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS簡(jiǎn)易的年歷選項(xiàng)卡效果類(lèi)似滑動(dòng)門(mén)且有當(dāng)月備注信息
JS簡(jiǎn)易的年歷選項(xiàng)卡效果,鼠標(biāo)劃過(guò)月份,下方顯示當(dāng)月的備注文字,類(lèi)似于月份記事一樣,簡(jiǎn)單而實(shí)用2013-02-16基于jquery來(lái)實(shí)現(xiàn)圖片滑動(dòng)門(mén)效果
jQuery實(shí)現(xiàn)的圖片滑動(dòng)效果,鼠標(biāo)滑過(guò)圖片,圖片如同滑動(dòng)的門(mén)一樣可以向上、下、左、右四個(gè)方向滑動(dòng)2012-11-21網(wǎng)易雅虎網(wǎng)站的選項(xiàng)卡與滑動(dòng)門(mén)菜單效果
網(wǎng)易雅虎網(wǎng)站的選項(xiàng)卡與滑動(dòng)門(mén)菜單,自帶了比較多的示例,相信總會(huì)有一款適合您。門(mén)戶(hù)網(wǎng)站的東西一般都風(fēng)格簡(jiǎn)約大方,色彩以清淡為主,本Tab演示效果截圖如上所示2012-01-24網(wǎng)頁(yè)選項(xiàng)卡和滑動(dòng)門(mén)效果內(nèi)有API說(shuō)明
適合新手用的網(wǎng)頁(yè)選項(xiàng)卡,內(nèi)有API說(shuō)明,還包括滑動(dòng)門(mén)菜單代碼,演示在同一頁(yè)面中調(diào)用選項(xiàng)卡和滑動(dòng)門(mén)。2012-01-21Js 滑動(dòng)門(mén) 英文字母切換 仿淘寶購(gòu)物索引效果
YTabs!英文字母索引菜單,一個(gè)很經(jīng)典的導(dǎo)航菜單效果,我使用我的YTabs實(shí)現(xiàn)了。兼容性好,調(diào)用方便。ytabs.js中包含了YAO和tabView兩個(gè)類(lèi),YAO是我根據(jù)YUI還有一些其他資源2010-04-16