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

无意今天

无意今天

2016-02-19 21:31

有了下面这个13种常用按钮、文本框、表单等CSS样式教程,不懂13种常用按钮、文本框、表单等CSS样式的也能装懂了,赶紧get起来装逼一下吧!

  虽然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 ;
}
三、红色按钮

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

 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
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;
}
 Example Source Code
td { font-size: 12px }
th {
    font-size: 12px;
}
八、下拉选择框

 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;
}
十、多行文本框

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

 Example Source Code
.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;
}
十一、阴影风格的表单

 Example Source Code
.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);
}
十二、只显一条横线的输入框

 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;
}

展开更多 50%)
分享

猜你喜欢

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

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

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

Web开发
常用按钮、文本框、表单等CSS样式13例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS表单美化之文本框与按钮一例

Web开发
CSS表单美化之文本框与按钮一例

用好HTML表单的文本框

Web开发
用好HTML表单的文本框

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

celluloid如何编辑文本框的样式

电脑网络
celluloid如何编辑文本框的样式

CSS巧用expression来区分只读文本框

Web开发
CSS巧用expression来区分只读文本框

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

取得系统中网卡MAC地址的三种方法

取得系统中网卡MAC地址的三种方法

Adobe CS3网站首页设计 第5讲

Adobe CS3网站首页设计 第5讲
下拉加载更多内容 ↓