表单的设计

关键词

表单设计

摘要

在设计表单时，有没有发现自己用代码写的表单十分的单调无趣呢，那是因为你没有给表单加入一些样式，加入样式的表单一定会焕然一新的哦！直接上代码了，一个带色彩样式的表单

在设计表单时，有没有发现自己用代码写的表单十分的单调无趣呢，那是因为你没有给表单加入一些样式，加入样式的表单一定会焕然一新的哦！
直接上代码了，一个带色彩样式的表单
<!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下划线效果应用。?
?