input键入框中有照片如何应用css合理布局完成

日期:2021-03-09 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

如今许多的网页页面以便美观大方、形象,1般都会在客户名,登陆密码等键入框中加1个照片,便于更形象的表明这个键入框的作用。美工的1个小照片,却给前端开发带来了许多不便,怎样精准定位小照片,而且适配各大访问器(包含ie6)变成1个让人头疼的难题。


例如上图,实际的完成方法以下


拷贝编码
编码以下:

<div class="item-ifo">
<input type="text" id="loginname" name="loginname" class="text" tabindex="1" autocomplete="off"/>
<div class="i-name ico"></div>
</div>



拷贝编码
编码以下:

.item-ifo {
position: relative;
width: 307px;
}
.item-ifo .ico {
width: 16px;
height: 16px;
position: absolute;
top: 8px;
right: 12px;
z-index: 5;
}
.item-ifo .pic{
background: url(i/one4.jpg) no-repeat #fff;
}

如上编码便可以完成

外层item-ifo的款式中设定 肯定/相对性精准定位position:relation / absolute;

在ico中里面设定宽、高,是以便保证照片可以显示信息出来,设定肯定精准定位absolute,应用top、left开展精准定位。

在pic里将照片的相对路径写明便可以了。