国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 13种常用按钮、文本框、表单等CSS样式

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

来源:程序员人生   发布时间:2013-11-30 17:45:27 阅读次数:3472次

虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。

一、按钮样式

以下为引用的内容:
Example Source Code
.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;
}


二、蓝色按钮

以下为引用的内容:
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 ;
}

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生