CSS3——在網速不好的情況下，如何讓一個網站還可以用
阿新 • • 發佈：2018-11-24
第一種方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } a{ display: inline-block; text-decoration: none; color: #424242; width: 190px; height: 90px; border: 1px solid black; background-image: url(01.jpg); background-size: 190px 90px; text-indent: 200px; white-space: nowrap; overflow: hidden; } </style> <title></title> </head> <body> <a href="http://www.taobao.com" target="_blank">淘寶網</a> </body> </html>
當網速好的時候，會顯示圖片連結，
當網速不好的時候（也就是當你把css程式碼註釋時）會顯示圖片連結，
。
第二種方法：
盒子有三部分，邊框，內邊距，內容區，如果我給盒子加個背景顏色的話，除了內容區變色之外，padding部分也會變色，那，我也可以給padding加圖片啊。有了這一點，我讓高度等於0，容器會變成一條線，再加一條padding-top: 90px;，padding會把容器撐開，不過文字上不去了
然後再加上overflow: hidden;，也就完事了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } a{ display: inline-block; text-decoration: none; color: #424242; width: 190px; height: 0px; padding-top: 90px; overflow: hidden; border: 1px solid black; background-image: url(01.jpg); background-size: 190px 90px; /* text-indent: 200px; white-space: nowrap; overflow: hidden; */ } </style> <title></title> </head> <body> <a href="http://www.taobao.com" target="_blank">淘寶網</a> </body> </html>
你看淘寶網也是用padding-top實現的，如果你把overflow: hidden;去掉，就會出現淘寶網。如下：
