一、按钮样式
Example Source Code
二、蓝色按钮
Example Source Code
三、红色按钮
Example Source Code
四、选择按钮
Example Source Code
五、绿色按钮
Example Source Code
六、图像按钮
Example Source Code
七、页面正文
Example Source Code
Example Source Code
八、下拉选择框
Example Source Code
九、线条文本编辑框
Example Source Code
十、多行文本框
Example Source Code
十一、阴影风格的表单
Example Source Code
十二、只显一条横线的输入框
Example Source Code
十三、没有边框的输入框
Example Source Code
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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;
}
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;
}
二、蓝色按钮
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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 ;
}
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 ;
}
三、红色按钮
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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 ;
}
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 ;
}
四、选择按钮
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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 ;
}
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 ;
}
五、绿色按钮
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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 ;
}
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 ;
}
六、图像按钮
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.imagebutton{
cursor: hand; /*改变鼠标形状
}
cursor: hand; /*改变鼠标形状
}
七、页面正文
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
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;
}
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;
}
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
td { font-size: 12px }
th {
font-size: 12px;
}
th {
font-size: 12px;
}
八、下拉选择框
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
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;
}
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;
}
九、线条文本编辑框
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.editbox{
background: #ffffff;
border: 1px solid #b7b7b7;
color: #003366;
cursor: text;
font-family: "arial";
font-size: 9pt;
height: 18px;
padding: 1px;
}
background: #ffffff;
border: 1px solid #b7b7b7;
color: #003366;
cursor: text;
font-family: "arial";
font-size: 9pt;
height: 18px;
padding: 1px;
}
十、多行文本框
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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;
}
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;
}
十一、阴影风格的表单
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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);
}
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);
}
十二、只显一条横线的输入框
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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
}
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
}
十三、没有边框的输入框
![div css xhtml xml Example Source Code](http://www.52css.com/images/quote.gif)
.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;
}
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;
}