CSS样式常用按钮、文本框、表单等13例

1、按钮样式

01 .buttoncss {
02      font-family: "tahoma", "宋体"
03      font-size:9pt; color: #003399;
04      border: 1px #003399 solid;
05      color:#006699;
06      border-bottom: #93bee2 1px solid;
07      border-left: #93bee2 1px solid;
08      border-right: #93bee2 1px solid;
09      border-top: #93bee2 1px solid;
10      background-image:url(../images/bluebuttonbg.gif);
11      background-color: #e8f4ff;
12      cursor: hand;
13      font-style: normal ;
14      width:60px;
15      height:22px;
16 }

2、蓝色按钮

01 .bluebuttoncss {
02      font-family: "tahoma", "宋体"
03      font-size: 9pt; color: #003366;
04      border: 0px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;*/
09      background-image:url(../images/blue_button_bg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

3、红色按钮

01 .redbuttoncss {
02      font-family: "tahoma", "宋体";
03      font-size: 9pt; color: #0066cc;
04      border: 1px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;
09      background-image:url(../images/redbuttonbg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

4、选择按钮

01 .selectbuttoncss{
02      font-family: "tahoma", "宋体"
03      font-size: 9pt; color: #0066cc;
04      border: 1px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;
09      background-image:url(../images/blue_button_bg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

5、绿色按钮

01 .greenbuttoncss {
02      font-family: "tahoma", "宋体"
03      font-size: 9pt; color: #0066cc;
04      border: 1px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;
09      background-image:url(../images/greenbuttonbg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

6、图像按钮

1 .imagebutton{
2      cursor: hand;     /*改变鼠标形状 
3 }

7、页面正文

01 body {
02      scrollbar-face-color: #ededf3;
03      scrollbar-highlight-color: #ffffff;
04      scrollbar-shadow-color: #93949f;
05      scrollbar-3dlight-color: #ededf3;
06      scrollbar-arrow-color: #082468;
07      scrollbar-track-color: #f7f7f9;
08      scrollbar-darkshadow-color: #ededf3;
09      font-size: 9pt; 
10      color: #003366;
11      overflow:auto;
12
13 td { font-size: 12px }
14 th {
15      font-size: 12px;
16 }

8、下拉选择框

1 select{
2      border-right: #000000 1px solid;
3      border-top: #ffffff 1px solid;
4      font-size: 12px; 
5      border-left: #ffffff 1px solid;
6      color:#003366;
7      border-bottom: #000000 1px solid;
8      background-color: #f4f4f4;
9 }

9、线条文本编辑框

01 .editbox{
02      background: #ffffff;
03      border: 1px solid #b7b7b7;
04      color: #003366;
05      cursor: text;
06      font-family: "arial";
07      font-size: 9pt;
08      height: 18px;
09      padding: 1px; 
10 }

10、多行文本框

01 .multieditbox{
02      background: #f8f8f8;
03      border-bottom: #b7b7b7 1px solid;
04      border-left: #b7b7b7 1px solid;
05      border-right: #b7b7b7 1px solid;
06      border-top: #b7b7b7 1px solid;
07      color: #000000;
08      cursor: text;
09      font-family: "arial";
10      font-size: 9pt;
11      padding: 1px; 
12 }

11、阴影风格的表单

1 .shadow {
2      position:absolute;
3      z-index:1000;
4      top:0px;
5      left:0px; 
6      background:gray;
7      background-color:#ffcc00;
8      filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
9 }

12、只显一条横线的输入框

1 .logintxt{
2      border-right: #ffffff 0px solid;
3      border-top: #ffffff 0px solid;
4      font-size: 9pt; 
5      border-left: #ffffff 0px solid;
6      border-bottom: #c0c0c0 1px solid;
7      background-color: #ffffff
8 }

13、没有边框的输入框

1 .noneinput{
2      text-align:center;
3      width:99%;height:99%;
4      border-top-style: none;
5      border-right-style: none;
6      border-left-style: none;
7      background-color: #f6f6f6;
8      border-bottom-style: none;
9 }

转载:

http://bbs.phpchina.com/thread-178914-1-2.html

 » 本站地址:http://www.gomoth.com

标签: