一、按钮样式 .buttoncss{ font-family:"tahoma","宋体";/*www.52css.com*/ font-size:9pt;color:#003399; border:1px#003399solid; color:#006699; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/bluebuttonbg.gif); background-color:#e8f4ff; cursor:hand; font-style:normal; 60px; height:22px; } 二、蓝色按钮 .bluebuttoncss{ font-family:"tahoma","宋体";/*www.52css.com*/ font-size:9pt;color:#003366; border:0px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid;*/ background-image:url(../images/blue_button_bg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 三、红色按钮 .redbuttoncss{ font-family:"tahoma","宋体";/*www.52css.com*/ font-size:9pt;color:#0066cc; border:1px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/redbuttonbg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 四、选择按钮 .selectbuttoncss{ font-family:"tahoma","宋体";/*www.52css.com*/ font-size:9pt;color:#0066cc; border:1px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/blue_button_bg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 五、绿色按钮 .greenbuttoncss{ font-family:"tahoma","宋体";/*www.52css.com*/ font-size:9pt;color:#0066cc; border:1px#93bee2solid; border-bottom:#93bee21pxsolid; border-left:#93bee21pxsolid; border-right:#93bee21pxsolid; border-top:#93bee21pxsolid; background-image:url(../images/greenbuttonbg.gif); background-color:#ffffff; cursor:hand; font-style:normal; } 六、图像按钮 .imagebutton{ cursor:hand;/*改变鼠标形状www.52css.com*/ } 七、页面正文 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;/*www.52css.com*/ color:#003366; overflow:auto; } td{font-size:12px} th{ font-size:12px; } 八、下拉选择框 select{ border-right:#0000001pxsolid; border-top:#ffffff1pxsolid; font-size:12px;/*www.52css.com*/ border-left:#ffffff1pxsolid; color:#003366; border-bottom:#0000001pxsolid; background-color:#f4f4f4; } 九、线条文本编辑框 .editbox{ background:#ffffff; border:1pxsolid#b7b7b7; color:#003366; cursor:text; font-family:"arial"; font-size:9pt; height:18px; padding:1px;/*www.52css.com*/ } 十、多行文本框 .multieditbox{ background:#f8f8f8; border-bottom:#b7b7b71pxsolid; border-left:#b7b7b71pxsolid; border-right:#b7b7b71pxsolid; border-top:#b7b7b71pxsolid; color:#000000; cursor:text; font-family:"arial"; font-size:9pt; padding:1px;/*www.52css.com*/ } 十一、阴影风格的表单 .shadow{ position:absolute; z-index:1000; top:0px; left:0px;/*www.52css.com*/ background:gray; background-color:#ffcc00; filter:progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true); } 十二、只显一条横线的输入框 .logintxt{ border-right:#ffffff0pxsolid; border-top:#ffffff0pxsolid; font-size:9pt;/*www.52css.com*/ border-left:#ffffff0pxsolid; border-bottom:#c0c0c01pxsolid; background-color:#ffffff } 十三、没有边框的输入框 .noneinput{ text-align:center; 99%;height:99%; border-top-style:none; border-right-style:none; border-left-style:none; background-color:#f6f6f6; border-bottom-style:none; } 1、只有下划线的文本框: 2、软件序列号式的输入框: 3、软件序列号式的输入框(完整版): 4、输入框景背景透明: 5、鼠标划过输入框,输入框背景色变色: 6、输入字时输入框边框闪烁(边框为小方型): 7、输入字时输入框边框闪烁(边框为虚线): 8、自动横向廷伸的输入框: 9、自动向下廷伸的文本框:
转载来源
|