1、扁平化的设计风格。--淘宝

 
直接使用input。对其设置height。padding。使鼠标居中又不会占满输入框。
 

 
 
2、背景是图片的设计。--百度
 
试用span将input包裹起来。span设置背景。input设置margin。使用-webkit-appearance:none去除系统的默认样式（主要是在iphone上）。
 

文本输入框的两种div+css的写法的更多相关文章

  1. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  2. 鼠标经过图片时变换的两种方法--css+div及javascript应用

    javascript方式:    熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  3. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  4. 在ASP.Net中两种利用CSS实现多界面的方法

    通过使页面动态加载不同CSS实现多界面(类型于csdn的blog): 方法一: <%@page language="C#"%><%@import namespac ...

  5. WPF TextBlock 文本换行的两种方式

    第一种: <TextBlock> This is line 1.<LineBreak/> This is line 2. </TextBlock> 第二种 < ...

  6. Android Edittext聚焦时输入法挡住了EditText输入框的两种解决方案

    方案一.把整个布局文件用ScrollView套住.这样当你聚焦时虽然输入法也能够挡住一些输入框,但是你可以通过手动滑动看被挡住的内容. 方案二.在Activity中设置android:windowSo ...

  7. Mysql的两种“超过多少次”写法（力扣596）

    题目: 有一个courses 表 ,有: student (学生) 和 class (课程). 请列出所有超过或等于5名学生的课. 例如,表: +---------+------------+ | s ...

  8. 【JavaScript】两种常见JS面向对象写法

    基于构造函数 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...

  9. Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

随机推荐

  1. OD: Heap Exploit : DWORD Shooting & Opcode Injecting

    堆块分配时的任意地址写入攻击原理 堆管理系统的三类操作:分配.释放.合并,归根到底都是对堆块链表的修改.如果能伪造链表结点的指针,那么在链表装卸的过程中就有可能获得读写内存的机会.堆溢出利用的精髓就是 ...

  2. Android系统中长按事件的实现机制解析

    在Android的触摸消息中,已经实现了三种监测,它们分别是 1)pre-pressed:对应的语义是用户轻触(tap)了屏幕 2)pressed:对应的语义是用户点击(press)了屏幕 3)lon ...

  3. 难搞的Android开发环境(sdk 代理)

    概述 搞了近一周的环境搭建,在csdn上提个问,有位网友说弄一下代理,搜一下,果真有人写博客:Android SDK代理服务器解决国内不能更新下载问题 其实我下了很多个集成好的 adt-bundle- ...

  4. servlet 具体实现

    1)servlet 具体实现 1.在GenericServlet中声明了一个ServletConfig类型的成员变量,在init(ServletConfig)方法中对其进行了初始化 2.利用servl ...

  5. Enumeration

    Interface Enumeration<E> hasMoreElements() boolean hasMoreElements()    仅当此枚举对象包含至少一个以上元素为真:否则 ...

  6. 武汉科技大学ACM ：1004: C语言程序设计教程（第三版）课后习题6.3

    Problem Description 求Sn=2+22+222+…+22…222(有n个2)的值. 例如:2+22+222+2222+22222(n=5),n由键盘输入. Input n Outpu ...

  7. linux上 安装并 运行opencv

    我是在树莓派上安装的. 1.先安装依赖项 OpenCV 2.2以后版本需要使用Cmake生成makefile文件,因此需要先安装cmake. sudo apt-get install build-es ...

  8. CentOS 7 之找回失落的ifconfig

    自5号凌晨安装完centos7 minimal之后,一直没有机会时间(懒惰)来玩玩这个,实在惭愧,今天是周六,天下着小雨,所以收拾一下心情来学学一下这个系统: 开机登陆进去,想看看ip多少,于是很自然 ...

  9. linux 常用压缩工具快速指南

    .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...

  10. 参数解析argparse模块

    argparse,python的一个命令行解析模块 import argparse #创建一个命令行解析器 parser = argparse.ArgumentParser() #增添参数 parse ...