作业注释 CSS表单1 输入框前有图片

最新推荐文章于 2020-10-19 15:10:25 发布

weixin_30877493

最新推荐文章于 2020-10-19 15:10:25 发布

阅读量143

点赞数

原文链接：http://www.cnblogs.com/lszw/p/10714309.html

版权

<!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"/> 
<input type="text" id="twitter"/>
<input type="text" id="web"/>

</form>
</body>
</html>

转载于:https://www.cnblogs.com/lszw/p/10714309.html