CSS常用样式效果

傻傻的问wj

傻傻的问wj

2016-02-19 16:52

今天图老师小编要跟大家分享CSS常用样式效果,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!
虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。在的文档中,也提供了丰富的内容。下面一些关于按钮、文本框、表单的常用CSS样式。大家可以参考。
  一、按钮样式
.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;
}
  二、蓝色按钮
.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 ;
}
  三、红色按钮
.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 ;
}
四、选择按钮
.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 ;
} 
五、绿色按钮
.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 ;
}
  六、图像按钮
.imagebutton{
  cursor: hand;  /*改变鼠标形状 */
}
  七、页面正文
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;
}
td { font-size: 12px }
th {
  font-size: 12px;
}
八、下拉选择框
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;
}
  九、线条文本编辑框
.editbox{
  background: #ffffff;
  border: 1px solid #b7b7b7;
  color: #003366;
  cursor: text;
  font-family: "arial";
  font-size: 9pt;
  height: 18px;
  padding: 1px; /**/
}
  十、多行文本框
.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; /**/
}
  十一、阴影风格的表单
.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);
}
  十二、只显一条横线的输入框
.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
}
  十三、没有边框的输入框
.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%)
分享

猜你喜欢

CSS常用样式效果

Web开发
CSS常用样式效果

常用CSS样式效果汇总

Web开发
常用CSS样式效果汇总

s8lol主宰符文怎么配

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

CSS样式表常用技巧

Web开发
CSS样式表常用技巧

常用CSS

Web开发
常用CSS

lol偷钱流符文搭配推荐

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

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

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

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

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

lolAD刺客新符文搭配推荐

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

XML 编程思想:定义 RDF 和 DAML+OIL 图示

XML 编程思想:定义 RDF 和 DAML+OIL 图示

VB.NET编程之托盘程序篇

VB.NET编程之托盘程序篇
下拉加载更多内容 ↓