网页设计好看的表单代码

网页设计好看的表单代码
网页设计好看的表单代码

1、只有下划线的文本框:

2、软件序列号式的输入框:

3、软件序列号式的输入框(完整版):

4、输入框景背景透明:

5、鼠标划过输入框,输入框背景色变色:

style="width: 106; height: 21"

onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'"

style="border-width:1px;border-color=black">

6、输入字时输入框边框闪烁(边框为小方型):

7、输入字时输入框边框闪烁(边框为虚线):

8、自动横向廷伸的输入框:

9、自动向下廷伸的文本框:

一、按钮样式

.buttoncss {

font-family: "tahoma", "宋体";

font-size:9pt; color: #003399;

border: 1px #003399 solid;

color:#006699;

border-bottom: #93bee2 1px solid;

border-left: #93bee2 1px solid;

border-right: #93bee2 1px solid;

border-top: #93bee2 1px solid;

background-image:url(../images/bluebuttonbg.gif);

background-color: #e8f4ff;

cursor: hand;

font-style: normal ;

width:60px;

height:22px;

}

二、蓝色按钮

.bluebuttoncss {

font-family: "tahoma", "宋体";

font-size: 9pt; color: #003366;

border: 0px #93bee2 solid;

border-bottom: #93bee2 1px solid;

border-left: #93bee2 1px solid;

border-right: #93bee2 1px solid;

border-top: #93bee2 1px solid;*/

background-image:url(../images/blue_button_bg.gif);

background-color: #ffffff;

cursor: hand;

font-style: normal ;

}

三、红色按钮

.redbuttoncss {

font-family: "tahoma", "宋体";

font-size: 9pt; color: #0066cc;

border: 1px #93bee2 solid;

border-bottom: #93bee2 1px solid;

border-left: #93bee2 1px solid;

border-right: #93bee2 1px solid;

border-top: #93bee2 1px solid;

background-image:url(../images/redbuttonbg.gif);

background-color: #ffffff;

cursor: hand;

font-style: normal ;

}

四、选择按钮

.selectbuttoncss{

font-family: "tahoma", "宋体";

font-size: 9pt; color: #0066cc;

border: 1px #93bee2 solid;

border-bottom: #93bee2 1px solid;

border-left: #93bee2 1px solid;

border-right: #93bee2 1px solid;

border-top: #93bee2 1px solid;

background-image:url(../images/blue_button_bg.gif);

background-color: #ffffff;

cursor: hand;

font-style: normal ;

}

五、绿色按钮

.greenbuttoncss {

font-family: "tahoma", "宋体";

font-size: 9pt; color: #0066cc;

border: 1px #93bee2 solid;

border-bottom: #93bee2 1px solid;

border-left: #93bee2 1px solid;

border-right: #93bee2 1px solid;

border-top: #93bee2 1px solid;

background-image:url(../images/greenbuttonbg.gif);

background-color: #ffffff;

cursor: hand;

font-style: normal ;

}

六、图像按钮

.imagebutton{

cursor: hand;

}

七、页面正文

body {

scrollbar-face-color: #ededf3;

scrollbar-highlight-color: #ffffff;

scrollbar-shadow-color: #93949f;

scrollbar-3dlight-color: #ededf3;

scrollbar-arrow-color: #082468;

scrollbar-track-color: #f7f7f9;

scrollbar-darkshadow-color: #ededf3;

font-size: 9pt;

color: #003366;

overflow:auto;

}

td { font-size: 12px }

th {

font-size: 12px;

}

八、下拉选择框

select{

border-right: #000000 1px solid;

border-top: #ffffff 1px solid;

font-size: 12px;

border-left: #ffffff 1px solid;

color:#003366;

border-bottom: #000000 1px solid;

background-color: #f4f4f4;

}

九、线条文本编辑框

.editbox{

background: #ffffff;

border: 1px solid #b7b7b7;

color: #003366;

cursor: text;

font-family: "arial";

font-size: 9pt;

height: 18px;

padding: 1px;

}

十、多行文本框

.multieditbox{

background: #f8f8f8;

border-bottom: #b7b7b7 1px solid;

border-left: #b7b7b7 1px solid;

border-right: #b7b7b7 1px solid;

border-top: #b7b7b7 1px solid;

color: #000000;

cursor: text;

font-family: "arial";

font-size: 9pt;

padding: 1px;

}

十一、阴影风格的表单

.shadow {

position:absolute;

z-index:1000;

top:0px;

left:0px;

background:gray;

background-color:#ffcc00;

filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);

}

十二、只显一条横线的输入框

.logintxt{

border-right: #ffffff 0px solid;

border-top: #ffffff 0px solid;

font-size: 9pt;

border-left: #ffffff 0px solid;

border-bottom: #c0c0c0 1px solid;

background-color: #ffffff

}

十三、没有边框的输入框

.noneinput{

text-align:center;

width:99%;height:99%;

border-top-style: none;

border-right-style: none;

border-left-style: none;

background-color: #f6f6f6;

border-bottom-style: none;

网页设计代码大全

段落标记background:网页背景图像… bgcolor:网页背景颜色align:left right center text:字体颜色强制换行标记link:可链接文字的色彩

alink:被鼠标点中时可链接文字的颜色预排格式标记vlink:已经单击过的可链接文字的颜色

 leftmargin:页面左边距插入水平线标记topmargin:页面上边距
Vlink:已经单击过的可链接文字的颜色文本缩标记Leftmargin:页面左边距
Topmargin:页面上边距列表标记 标题格式标记 1.无序标题 (范围(h1-h6))
    align:left(左) right(右) center(中)
  • 列1 bottom(底) top(顶)
  • 列2 文字格式标记……… color=“颜色”>文字 type:disc● circle○ square■字形设置标记 2.有序字形字形 下划线
      字形字形文字增大
    1. 列1 字形 删除线
    2. 列2 字形 文字减小………

      HTML网页设计(表单元素)

      HTML网页设计(表单元素) 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成,所有这些都放在

      标签在。一个文档中可以包含多个表单,而且每个表单可以放置通常的主体内容(包括文字和图像在内) Form标签 设计者可以将表单放在文档主体中的任何位置,但前提是将表单的缘故都放在标签和
      结束标签之间。

      2.表单元素 在

      标签中,可以包含以下5个标签。 Input标签 对于大量通常的表单内元素,可以使用标签来进行定义,其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然标签中有许多属性,但对每个元素来说,只有type和name属性是必须的。当然,根据指定的比哦啊单元素类型,也可以设置一些其

      可以使用标签中的name属性来为字段命名(表单提交到处理过程中使用的字段,这种字段的说明可以参阅前面介绍)。从技术角度上讲,name属性的值是任意的一个字符串,但是我们建议最好采用没有嵌入空格或标点的字符串。标签中必须的type属性可以用来选择控件的类型,其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域,在浏览器窗口中显示为一行的空框,它接收用输入的一行信息,当你用户将表单提交给服务器时,这些信息就变成了元素值。 范例代码:

      密码域 将type属性值设置为password,就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称,这样就可以为该段字段设置size和maxlength属性,并可以设置一个初见时的vlaue。 范例代码: 文件域(file) 复选框(checked) 单选框(ridio) 普通按钮(button) 设置普通按钮(button)代码: 重置按钮(Reset) Textarea标签 作为表单的一部分,