css html应用实例1：滑动门技术的简单实现
生活随笔
收集整理的這篇文章主要介紹了
css html应用实例1：滑动门技术的简单实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
關(guān)于滑動(dòng)門，現(xiàn)在的頁面中好多地方都會(huì)用到滑動(dòng)門，一般用作于導(dǎo)航背景，它的官方解釋如下：
滑動(dòng)門：根據(jù)文本自適應(yīng)大小，根據(jù)背景的層疊性制作，并允許他們在彼此之上進(jìn)行滑動(dòng)，以創(chuàng)造出一些特殊的效果。
為什么很多人喜歡用滑動(dòng)門呢，因?yàn)橛行r(shí)候?qū)Ш降淖煮w長度不一致，長長短短實(shí)在不好弄背景圖片之類啥的，如果單獨(dú)根據(jù)不同的長度調(diào)用不同的背景圖片太麻煩不說服務(wù)器壓力
也太大，所以滑動(dòng)門技術(shù)應(yīng)運(yùn)而生，它可以根據(jù)元素本身的長度而調(diào)節(jié)背景圖片的長度，至始至終只用到兩張圖片，網(wǎng)頁加載速度提高不說，程序員工作量也減少了。
效果圖如下：
1.準(zhǔn)備圖片如下：（left.jpg和right.jpg是由1.jpg分割而來的）)
2.代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <style>.top{height: 35px;width: 600px;margin: 0 200px;background: url("imags/2.jpg"); }.top ul{margin: 0;padding: 0;list-style: none;}.top ul li{float: left;line-height: 30px;}.top ul li:nth-child(1){margin-left: 15px;}/*選擇第一個(gè)li并單獨(dú)style*/.top ul li a{text-decoration: none;display:block;padding: 0 0 0 15px;}/*不設(shè)置高度它自己會(huì)默認(rèn)和父級一樣大*/.top ul li a b{color: white;padding: 0px 15px 0 0;display:block;}/*塊級元素才能擁有寬高度*/.top ul li:hover a{background:url(imags/left.jpg) ;}.top ul li:hover b{background:url(imags/right.jpg) no-repeat right top;color: black;}/*背景圖片不重復(fù)顯示（橫向和豎各都不重復(fù)）并從元素的右上方開始顯示*/ </style> <body> <div class="top"><ul><li><a href="#"><b>Interesting</b></a></li><!--滑動(dòng)門技術(shù)關(guān)鍵在于一定存在嵌套關(guān)系，至少兩級*/--><li><a><b>Dlfgagi Ulsaafasdf</b></a></li><!--這里li里套a再套span，通過a和span顯示圖片左右邊框*/--><li><a><b>FDASDF</b></a></li><!--a和span也就是所謂的左右鉤子*/--><li><a><b>Zing</b></a></li><li><a><b>FAasssiopg</b></a></li></ul> </div> </body> </html>
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的css html应用实例1：滑动门技术的简单实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如果删除github上项目的文件
- 下一篇： jQuery应用实例2：简单动画