当前位置: 洪哥笔记 > DHTML > 表单的设计

 

表单的设计


关键词

表单 设计

摘要

在设计表单时,有没有发现自己用代码写的表单十分的单调无趣呢,那是因为你没有给表单加入一些样式,加入样式的表单一定会焕然一新的哦!直接上代码了,一个带色彩样式的表单
    在设计表单时,有没有发现自己用代码写的表单十分的单调无趣呢,那是因为你没有给表单加入一些样式,加入样式的表单一定会焕然一新的哦!
直接上代码了,一个带色彩样式的表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta  http-equiv="content-type"
      content="text/html; charset=iso-8859-1" />
<style>
form {
 border: 1px dotted #aaaaaa;
 padding: 3px 6px 3px 6px;
}
input.txt{
 color: #00008B;
 background-color: #FFCCCC;
 border: 1px inset #00008B;
 width: 200px;
}
input.btn {
 color: #00008B;
 background-color: #ADD8E6;
 border: 1px hidden outset #00008B;
 padding: 2px 4px 2px 4px;
}
</style>
</head>
<body>
<form action="#" method="get">
  <p>First name: <input class="btn"type="text" name="fname" /></p>
  <p>Last name: <input class="txt" type="text" name="lname" /></p>
  <input class="txt" type="submit" value="Submit" />
</form>
</body>
</html>

边框样式值如下:
none :    无边框。与任何指定的border-width值无关
hidden :  隐藏边框。IE不支持
dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线(常用)
dashed :   在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线(常用)
solid :     实线边框(常用)
double :  双线边框。两条单线与其间隔的和等于指定的border-width值
groove :  根据border-color的值画3D凹槽
ridge :     根据border-color的值画菱形边框
inset :      根据border-color的值画3D凹边
outset :    根据border-color的值画3D凸边?
四边边框分别设置
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用。?
?

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:表单的设计:http://www.splaybow.com/post/html-form-design.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« CSS中的边距 DHTML实例 »