文字缩进及弱网络环境下用文字代替图片的兜底方案

如何对文字进行缩进以及如何在网络情况很不好的情况下用文字来代替图片
今天我们就来说一下：
先来说一下如何对文字进行缩进：
相信有很多刚学习前端的小伙伴们，在写登录表单时经常会遇到一个问题是想要把‘密码’进行缩进达到和‘用户名’相同长度，但是使用html提供的&nbsp无法完美的达到目标！
这里有一个css属性可以满足我们的要求，那就是text-indent（它可以进行首行的缩进）。

现在我们再来说一下如何用文字代替图片（在网络不好的情况下）：
当我们的网速很慢时，CSS/Javascript加载不了的这个时候，有些带有超链接的图片，需要用代链接的文字代替，例如淘宝网的logo，本身就是一个超链接，当网络不行的情况，只会显示出来淘宝网三个字的超链接，总的思路就是，文字‘淘宝网’用CSS将其隐藏，当CSS加载失败，就会显示出来

方法一

text-indent:200px //首行缩进，缩进到图片之外
white-space: nowrap //强制不换行
overflow:hidden //文字隐藏

方法二

a{
height:0px;//将带有超链接的背景图片所在的a标签所在行，高度设置为0，则背景图片缩成一条线
padding-top:90px;//用内边距撑开盒子，背景图片会显示出来（背景图片和背景颜色会在padding上显示，内容区不会）
over-flow:hidden//因为内容不会在padding-top上显示，会挤出来，这里隐藏掉
}
//背景图片和背景颜色会在padding上显示出来；但是，内容区内容不会占用padding