栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
13种常用按钮、文本框、表单等CSS样式
www.jz123.cn 2008-08-07 来源: 中国建站 乐乐整理 我要投递新闻
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。
一、按钮样式
Example Source Code |
二、蓝色按钮
Example Source Code .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 ; } |
三、红色按钮
Example Source Code .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 ; } |
四、选择按钮
Example Source Code .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 ; } |
五、绿色按钮
Example Source Code .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 ; } |
六、图像按钮
Example Source Code .imagebutton{ cursor: hand; /*改变鼠标形状 www.devdao.com*/ } |
七、页面正文
Example Source Code |
八、下拉选择框
Example Source Code 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; } |
九、线条文本编辑框
Example Source Code .editbox{ background: #ffffff; border: 1px solid #b7b7b7; color: #003366; cursor: text; font-family: "arial"; font-size: 9pt; height: 18px; padding: 1px; } |
十、多行文本框
Example Source Code |
十一、阴影风格的表单
Example Source Code |
十二、只显一条横线的输入框
Example Source Code .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 } |
十三、没有边框的输入框
Example Source Code .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; } |
上一篇:CSS Hack兼容大全,令您的网页能正常显示在IE5,IE5.5,IE6,IE 下一篇:input的Css样式