26 , CSS 构造表单

1. 表单标签使用

2. 下拉菜单背景

3. 滚动条的使用

4. 结构化表单布局

1 1 1 1. . . . 表单标签的使用

姓名: <input type=”text” name=”name”id=”name”/>

2 2 2 2. . . . 去掉默认的表单间隔

Form {

Margin: 0;

Padding: 0;

}

3 3 3 3. . . . 给文本框添加漂亮的边框

Input,textarea {

Border: 3px double #333;

}

4. 给下拉菜单设置背景色

select {

background:red;

}

. 5. 给文本区域添加滚动条

textarea {

SCROLLBAR-FACE-COLOR: #333;

SCROLLBAR-HIGHLIGHT-COLOR: #666;

SCROLLBAR-SHADOW-COLOR: #333;

SCROLLBAR-3DLIGHT-COLOR: #999;

SCROLLBAR-ARROW-COLOR: #999;

SCROLLBAR-TRACK-COLOR: #000;

SCROLLBAR-DARKSHADOW-COLOR: #000;

}

6 6 6 6. . . . 表单外边框设置 t fieldset legend

Fieldset {

Margin:0 0 10px 0;

Padding: 5px;

Border: 1px solid #333;

}

Legend {

Background-color: #ddd;

Margin:0;

Padding: 5px;

Border-style: solid;

Border-width: 1px;

Border-color: #fff #aaa #666 #fff;

}

Fieldset {

Background: #ddd;

}

7. 结构化表单布局

登陆信息

用户 名 ： <input type=“text”

id=“username” class=“input” />

密 码 ： <input type=“text”

id=“password” class=“input” />

确 认 密 码 ： <input

type=“text” id=“passwordVerify” class=“input” />

个人信息

昵 称 ： <input type=“text”

id=“nickname” />

电子邮 件 ： <input

type=“text” id=“email” />

<input type=“button”

value=“返回” />

#regForm fieldset {

padding:0 20px 10px;

border:0;

border-top:1px #d0d0bf solid;

}

#regForm legend {

padding:0 10px;

font-weight:bold;

}

#regForm .dataArea {

padding:2px 0;

}

#regForm .frist {

padding:8px 0 2px;

}

#regForm .subArea input {

padding:1px 4px;

}

#regForm label {

width:110px;

text-align:right;

float:left;

}

1 表单标签的使用

用户名： 男 女 只要点用户名就能够把光标定位在里面,label可以布局 　　2 去掉默认的表单间隔 　　3给文本框添加漂亮的边框

</textarea>

　　4给下拉菜单设置背景色 上海 盐城 北京 　　5给文本区域添加滚动条

SCROLLBAR-HIGHLIGHT-COLOR: #666;
SCROLLBAR-SHADOW-COLOR: #333;
SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-TRACK-COLOR: #000;
SCROLLBAR-DARKSHADOW-COLOR: #000;
}

ietester的IE8能显示出来 　　6表单外边框设置 t fieldset legend 登陆信息 　　7结构化表单布局 登陆信息

用户 名 ：

密 码 ：

确 认 密 码 ：

个人信息

昵 称 ：

电子邮 件 ：

　　7结构化表单布局2 登陆信息

用户 名 ：

密 码 ：

确 认 密 码 ：

个人信息

昵 称 ：

电子邮 件 ：