css基礎 滑動門 簡單示例
阿新 • • 發佈：2018-02-11
背景圖 經歷 html 自適應 add http -c 出現 tle
禮悟：
公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。
虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。
ide：visual studio 2017
browser：Chrome
os：win7
代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="https://www.cnblogs.com/jizuiku"/> <title></title> <style type="text/css"> a { /* 為了好看 */ margin:50px; /* 為了寬度與大小 */ /* 行內塊，最適合 */ display:inline-block; /* 給最苦 找背景圖，找不到呀。於是，拿word畫了一個。 感謝微軟，感謝Word。 突然也意識到一個問題，UI設計師的重要性。*/ background:url("bg.jpg") no-repeat; /* 記得給高 */ height:46px; /* 寬不能給，給了就無法出現滑動效果了 */ /* 會撐開盒子，而不得寬度 */ padding-left:15px; } a span { display:inline-block; height:46px; line-height:46px; background:url("bg.jpg") no-repeat; /* span不能給寬度，只能利用padding擠開 */ padding-right:20px; /* 點睛之筆 */ background-position:right; } </style> </head> <body> <!-- a包含span可以實現 整塊都是超鏈接 --> <a href="#"> <span>博客園</span> </a> <a href="#"> <span>博客園-給最苦</span> </a> <a href="#"> <span>博客園-給最苦-網頁設計</span> </a> <br /> <!-- 要是超過背景圖片的寬度時... --> <a href="#"> <span> 博客園-給最苦-網頁設計 博客園-給最苦-網頁設計 博客園-給最苦-網頁設計 博客園-給最苦-網頁設計 </span> </a> <!-- 雖然 給最苦 能實現這個效果，但是依然有很多迷惑與尷尬。 迷惑於：這種自適應的效果，真好。 可是怎麽想到的呢？因為什麽想到的？ 有什麽特殊的生活經歷？見到了特殊的事物？ 尷尬於： 只是知道它如何用，卻不知道它的原理。 可謂： 地球有重力。哦... 看，春天到了。哦... 看，夏天到了。哦... --> </body> </html>
效果
CSS3優秀，值得學習。
學習資源： www.w3cschool.cn + itcast和itheima視頻庫 + 清凈的心地。
如果您有公開的資源，可以分享給我的話，用您的資源學習也可以。
博文是觀看視頻後，融入思考寫成的。博文好，是老師講得好。博文壞，是 給最苦 沒認真。
css基礎 滑動門 簡單示例