作业注释 CSS表单

时间:2019-04-15
本文章向大家介绍作业注释 CSS表单,主要包括作业注释 CSS表单使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

<!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>