input中加入图片的做法

最新推荐文章于 2024-06-18 17:03:40 发布

weixin_34200628

最新推荐文章于 2024-06-18 17:03:40 发布

阅读量3.7k

点赞数

原文链接：https://yq.aliyun.com/articles/50511

版权

本文介绍了在登录页面中为输入框添加小图标的常见做法，以提升用户体验。通过展示公司手机网站应用的实例，并提供相关代码，帮助读者理解并实现这一设计效果。

摘要由CSDN通过智能技术生成

有很多高大上的网站中都有这一做法。尤其是在登录页面，输入用户名和密码时加入小图标，看起来简单舒服。

下面就列举一下我们公司中手机网站应用的截图：

怎么样看起来还不错吧。下面直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<title>input中加入图片的做法</title>
		<!-- 这里图片用的是base64的做法，避免大家在使用我的demo的时候没有对应的图标 -->
		<style>
			.username {width:130px; background:#FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANfSURBVDhPRZRNaFxlFIa7dSuICzcuXERRKkh37uxGUGNB3KSCUqUIkaItVtDQpqUMlSYWUxo1qaYGbTRg1VItjS6sNGjF1CZVM5m/O/fOvfN77/xl/jPz+H63URcfd7jzneec85733B12pYdd6WCV2uQ2IZarkql2sfwmjt4ni5vE8zWSpQZufYt0uUu80MDT