<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div style="height: 600px;width: 1500px;border: 1px solid darkgray;margin: 0 auto;margin-top: 200px">

     <div style="width: 400px;height: 35px;position: relative;margin: 0 auto;margin-top: 300px">

         <input type="text" style="width: 370px;height: 35px;padding-right: 30px">

         <span style="background-image: url(i_name.jpg);width: 16px;height: 16px;display: inline-block;position: absolute;top: 11px;right: 1px"></span>

     </div>

 </div>

 </body>

 </html>

注意：

<input type="text" style="width: 370px;height: 35px;padding-right: 30px">
这句话中padding-right 让输入框往右移动30像素  宽度缩小30像素 加起来仍然是400像素 和div的像素一样大 但用户输入的字符就不会盖住我们右边那个小人的图标了

html +css 登陆框中加用户图片，并设置登陆名不盖住图标的更多相关文章

  1. android优化从网络中加载图片速度。。

    从网络中加载图片主要要注意两个方面的问题: 1.内存管理:图片占的内存很大,假如图片数量多,很容易让系统抛出out of memory的异常. 同时我们也要注意不同android版本中内存管理的区别. ...

  2. Java 读取Word文本框中的文本/图片/表格

    Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...

  3. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

  4. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  5. java中判断用户是否为第一次登陆（在页面上进行控制）

    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%&g ...

  6. el-table中加载图片问题

    <el-table-column label="头像" width="100"> <template scope="scope&qu ...

  7. 通过给事件处理程序传递this参数，获取事件源对象的引用。单机提交按钮时在信息框中显示用户输入的字符。

    <script> function mymethod(str) { alert("您输入的是:"+str); } </script><form act ...

  8. vue中 js获取图片尺寸 设置不同样式

    1.JS: 请求到后端数据后 判断图片尺寸 2.HTML代码 根据设置的类型,给图片添加不同的样式 3.CSS代码 添加不同尺寸的样式

  9. 编写category时的便利宏（用于解决category方法从静态库中加载需要特别设置的问题）

    代码摘录自YYKit:https://github.com/ibireme/YYKit /** Add this macro before each category implementation, ...

随机推荐

  1. Java 中常用的数据源

    数据源:存储了所有建立数据库连接的信息.就象通过指定文件名你可以在文件系统中找到文件一样,通过提供正确的数据源名称,你可以找到相应的数据库连接. 1.JNDI方式创建DataSource 1.1 配置 ...

  2. nginx配置openssl证书

    引用出处: https://blog.csdn.net/liuchunming033/article/details/48470575 证书生成基本步骤: 生成私钥(.key)-->生成证书请求 ...

  3. 03-----body标签中的相关标签

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <form> 一.列表标签 1.无序列表< ...

  4. Linux Shell 中数组的语法及应用

    #!/bin/sh## 数组的声明与初始化方法# 先声明后赋值:declare -a arrayarray=(one two three) # 声明并初始化:array_1=(1 2 3 four) ...

  5. 有限状态机在单片机和 Arduino 编程中的应用

    有限状态机在单片机和 Arduino 编程中的应用,个人认为在实际中这是一种思想,意味着解决一类问题. 本帖最后由 张飞 于 2015-3-4 20:18 编辑 在单片机编程中,如果在不使用操作系统的 ...

  6. JAVA 集合类小结

    一 集合和数组 因为本人也是个go的爱好者,所以对于集合类算是摸的比较透的. 说到集合,必须了解数组和集合. Java的数组长度固定,集合长度不定.集合是特定的数据结构的集合. 而go里面并没有集合, ...

  7. DataBinding初探 数据绑定的用法 ,import 集合类型，绑定的表达式，访问集合类型2

    数据绑定的用法 import语法   <data> <import type="android.view.view"/> </data>   如 ...

  8. ajax post方式表单提交的注意事项。

    当我们创建一个异步对象XMLHttpRequest同时post方式向后台传输数据的时候. 我们要设置异步对象的xhr.setRequestHeader成员的值为 XMLHttpRequest.setR ...

  9. es6-异步应用

    异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Generator 函数如何完成异步操作. 传 ...

  10. touch事件总结

    $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.original ...