网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.网页设计之css+div PK table+css.
.CSS教程:网页字体及字体大小的设.
.CSS实现当前页的滑动门菜单效果方.
.CSS中跨浏览器的inline-block实现.
.用css让图片自动适应大小.
.CSS+DIV设计实例:实现让多个DIV.
.Javascript+css 实现网页换肤功能.
.css布局实例:网页布局的方法.
.Firefox CSS私有属性备忘记录.
.如何将XHTML+CSS页面转换为打印机.
.网页标准化制作:CSS的超级技巧大.
.CSS固定定位{position:fixed}.
.搞定IE的最重要CSS技巧.
.CSS实用教程(一).
.CSS语法手册(五)颜色和背景属性 .
.CSS网页布局开发小技巧24则.
.网页设计之CSS基础语法学习.
.用CSS实现圆角框框.
.能够通过w3验证的css文字阴影效果.
.CSS样式表设计的十条技巧.

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

发表日期:2008-11-24


一、按钮样式

.buttoncss {
     font-family: "tahoma", "宋体"; /*www.52css.com*/
     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;
}
2、蓝色按钮

.bluebuttoncss {
     font-family: "tahoma", "宋体"; /*www.52css.com*/
     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 ;
}
3、红色按钮

.redbuttoncss {
     font-family: "tahoma", "宋体"; /*www.52css.com*/
     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 ;
}
4、选择按钮

.selectbuttoncss{
     font-family: "tahoma", "宋体"; /*www.52css.com*/
     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 ;
}   
5、绿色按钮

.greenbuttoncss {
     font-family: "tahoma", "宋体"; /*www.52css.com*/
     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 ;
}
6、图像按钮

.imagebutton{
     cursor: hand;     /*改变鼠标形状 www.52css.com*/
}
7、页面正文

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;
}
8、下拉选择框

select{
     border-right: #000000 1px solid;
     border-top: #ffffff 1px solid;
     font-size: 12px; /*www.52css.com*/
     border-left: #ffffff 1px solid;
     color:#003366;
     border-bottom: #000000 1px solid;
     background-color: #f4f4f4;
}
9、线条文本编辑框

.editbox{
     background: #ffffff;
     border: 1px solid #b7b7b7;
     color: #003366;
     cursor: text;
     font-family: "arial";
     font-size: 9pt;
     height: 18px;
     padding: 1px; /*www.52css.com*/
}
10、多行文本框

.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; /*www.52css.com*/
}
11、阴影风格的表单

.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);
}
12、只显一条横线的输入框

.logintxt{
     border-right: #ffffff 0px solid;
     border-top: #ffffff 0px solid;
     font-size: 9pt; /*www.52css.com*/
     border-left: #ffffff 0px solid;
     border-bottom: #c0c0c0 1px solid;
     background-color: #ffffff
}
13、没有边框的输入框

.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代码详解 人气:471
下一篇:用DIV+CSS设计出圆角矩形的代码 人气:237
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐