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