 | |
|
|
设计制作 13种常用按钮、文本框、表单等CSS样式 |
|||
| 发布时间:2009年3月31日 阅读次数: | |||
| 一、按钮样式 .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; width: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; width:99%;height:99%; border-top-style:none; border-right-style:none; border-left-style:none; background-color:#f6f6f6; border-bottom-style:none; } |
|
|
关于北京博卡先锋软件开发有限公司 北京博卡先锋软件开发有限公司从事互联网软件开发和应用服务，拥有丰富的互联网技术开发和应用经验，在网站建设、即时通讯，企业办公自动化等领域具有领先的技术，是网站建设技术软件化的先行者，网页即时通讯领域的佼佼者。自主研发包括网站引擎(SiteEngine)、即时通讯(BICQ)、办公引擎(OfficeEngine) 等多款的高技术软件产品，为数以千计的各级政府部门、事业单位、大型集团企业、中小企业提供了各种信息化解决方案及各类信息化服务。博卡先锋采取多元化的产品发展战略，不断深化产品的应用领域，逐渐形成系列化的产品体系，以满足更广泛层面的需求，提供更加全面、优质的服务。目前，公司在大中华地区拥有100000家以上的企业软件用户，业务已拓展至包括东南亚、北美、澳洲、西欧在内的世界各地。 |
|
如果您喜爱这篇文章，请为它投票和评分。当前评分: 4
|
|
 |
|
|
|
|
