作业注释 CSS表单1 输入框前有图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style type="text/css">
input{
font-size:120%; /**字体大小**/
color:#5a5854; /**字体颜色**/
background-color:#f2f2f2; /**所有项目默认背景颜色**/
border:1px solid #bdbdbd; /**所有项目默认边框样式**/
border-radius:5px; /**所有边框圆角幅度**/
padding:5px 5px 5px 30px; /** 内边距位置 **/
background-repeat:no-repeat; /**边框图片样式不重复**/
background-position:8px 9px; /** 边框图片坐标 **/
display:block; /**按块元素显示**/
margin-bottom:10px; /** 外边距下面10像素 **/
}
input:focus,input:hover{ /** 鼠标悬停时的样式 **/
background-color:#ffffff; /**动作发生之后的背景颜色 焦点 悬停**/
border:1px solid #blele4; /** 边框样式 **/
}
input#email{background-image:url("email.png");} /** 针对不同的对象设置不同的图片 **/
input#twitter{background-image:url("twitter");}
input#web{background-image:url("web.png");}
</style>
</head>
<body>
<form>
<input type="text" id="email"/> <!--输入,以文本格式,ID选择器里的样式-->
<input type="text" id="twitter"/>
<input type="text" id="web"/>
</form>
</body>
</html>
作业注释 CSS表单1 输入框前有图片的更多相关文章
- CSS 表单
输入框前有图片 老板让你实现在输入框前有图片的功能.老板觉得用图片代替文字更有说服力. 要实现这样的功能很简单,它的原理是将图片放在内边距内. 代码 1 2 3 4 5 6 7 8 9 10 11 1 ...
- CSS表单设计
今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...
- ionic-CSS:ionic 表单和输入框
ylbtech-ionic-CSS:ionic 表单和输入框 1.返回顶部 1. ionic 表单和输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本 ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- 不让input表单的输入框保存用户输入的历史记录
如何不让input表单的输入框保存用户输入的历史记录. 有时我们在设计网页时不想让表单保存用户输入历史记录,比如一些隐私数据,或一些冲值卡 <input name="test&quo ...
- Web标准:九、CSS表单设计
Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<i ...
- 清除表单input输入框内数据
清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...
- bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...
- 如何disabled禁用所有表单input输入框元素
转载地址:https://www.zhangxinxu.com/wordpress/?p=8568 一.pointer-events:none和覆盖层方法的问题 经常会遇到需求,需要禁用div中或者f ...
随机推荐
- Tomcat下载和安装
一.Tomcat下载和安装 Tomcat 是一个免费的开放源代码的 Servlet 容器,它是 Apache 软件基金会的一个顶级项目,由 Apache,Sun和其他一些公司及个人共同开发而成.由于有 ...
- move UVs of a texture
Go to the material options on the left, and use a Custom UV. Create a vector parameter, use it to sc ...
- mnist全连接层网络权值可视化
一.数据准备 网络结构:lenet_lr.prototxt 训练好的模型:lenet_lr_iter_10000.caffemodel 下载地址:链接:https://pan.baidu.com/s/ ...
- sqlserver乱码问题解决
* 如果是自己创建的数据库那么就应该在一开始就选择排序规则中的:Chinese_PRC_CI_AS 1.改变排序规则方法: 右击创建的数据库,属性→选项→排序规则中选择:Chinese_PRC_CI_ ...
- 更多FMK 的还是看万一的吧
http://www.cnblogs.com/del/category/323943.html 记录一下, 作为目录
- Python判断语句
什么是判断语句 如果 今天是周六或者周日: 约妹子 如果 今天是情人节: 买玫瑰 如果 今天发工资: 先还信用卡的钱 如果 有剩余: 又可以happy了,O(∩_∩)O哈哈~ 否则: 啊啊啊啊,等30 ...
- Java种的String
String中的常用方法 subString()的使用,charAt的使用方法: indexof等的用法 String和byte的转换,对于程序过程的传输很重要, ==和equals的比较 1equa ...
- ROS Qt Creator Plug-in wiki
在Qt中配置ros工程. 环境: ubuntu16.04: ros kinetic: Qt5.7 参考网址: https://ros-industrial.github.io/ros_qtc_plug ...
- 物化视图SQL
物化视图SQL,如果没有结果集,就证明数据库中不存在物化视图 select a.owner,'' column_name,a.table_name,b.segment_name,b.segment_t ...
- 报错:org.apache.hadoop.hive.metastore.HiveMetaException: Failed to get schema version.
报错环境: CDH中集成的hive服务,启动报错,所以初始化一下元数据. 配置文件:/etc/hive/conf hive-site.xml 命令目录:/opt/cloudera/parcels/CD ...