css html应用实例1：滑动门技术的简单实现
生活随笔
收集整理的這篇文章主要介紹了
css html应用实例1：滑动门技术的简单实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
關于滑動門，現在的頁面中好多地方都會用到滑動門，一般用作于導航背景，它的官方解釋如下：
滑動門：根據文本自適應大小，根據背景的層疊性制作，并允許他們在彼此之上進行滑動，以創造出一些特殊的效果。
為什么很多人喜歡用滑動門呢，因為有些時候導航的字體長度不一致，長長短短實在不好弄背景圖片之類啥的，如果單獨根據不同的長度調用不同的背景圖片太麻煩不說服務器壓力
也太大，所以滑動門技術應運而生，它可以根據元素本身的長度而調節背景圖片的長度，至始至終只用到兩張圖片，網頁加載速度提高不說，程序員工作量也減少了。
效果圖如下：
1.準備圖片如下：（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;}/*選擇第一個li并單獨style*/.top ul li a{text-decoration: none;display:block;padding: 0 0 0 15px;}/*不設置高度它自己會默認和父級一樣大*/.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;}/*背景圖片不重復顯示（橫向和豎各都不重復）并從元素的右上方開始顯示*/ </style> <body> <div class="top"><ul><li><a href="#"><b>Interesting</b></a></li><!--滑動門技術關鍵在于一定存在嵌套關系，至少兩級*/--><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>
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的css html应用实例1：滑动门技术的简单实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如果删除github上项目的文件
- 下一篇： jQuery应用实例2：简单动画