这里几乎综合了学过的所有，做出一个简单的输入界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<p style="height: 35px; width: 400px; position: relative">
<input type="text" style="height: 35px; width: 370px; padding-right: 30px"/>
<span style="position: absolute; right: 6px; top: 10px; background-image:url(i_name.jpg); height: 16px;
width: 16px; display:inline-block;"></span>
</p>
</body>
</html>
首先分析下:
1.最外层设置一个p使用relative和内层span的absolute配合，这里就能方便的设置span内容
2.background-image是使用图片做背景，我的图片在当前目录下，一个输入界面的普通图标
3.input的输入框左半部分和外层p重合，直接用一个输入框无法做到在框的右边加入一个图标
4.由于span标签本身是inline(行内)属性的，无法对它过多操作，所以用display将它转型
5.span里面的height和width为小图标的大小，使span恰好容下图标，right和top设置它相对最外层p的位置
然后做成一个带有小图标的输入界面，看似简单，却用到了不少知识。
