快网首页 | 45棋牌游戏下载 | 域名注册 | 特惠套餐 | 企业邮局 | SQL空间 | IDC业务 | 全球通邮
常用按钮CSS样式,常用文本框CSS样式,常用表单CSS样式
客服中心 新闻动态 常见问题 常用资料 知识学堂 走近客服 在线提问 网站导航
常用按钮CSS样式,常用文本框CSS样式,常用表单CSS样式
网页设计 | 操作系统 | 程序开发 | Dos 命令 | 平面设计 | 办公软件

 您的位置: 快网首页 >> 客服中心 >> 知识学堂 >> 网页设计 >> 文章正文

常用按钮、文本框、表单等CSS样式
供稿:润之康   时间:2009-2-25 16:38:06

    虽然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/9f426b9c9305ce28c880250b6a018ef2.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/af4de24ea2640be10b4404897261e1dd.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/d6d0f763f9203715e3db73262719e449.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/af4de24ea2640be10b4404897261e1dd.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/e6e06c70eaee34e9efb6de88da13177f.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;
}


快网保留以上说明的最终解释权
快网,域名注册,45棋牌游戏下载,ASP空间,企业邮局,SQL空间,主机租用,主机托管
热门搜索:FTP 域名 DNS 备案 空间 邮箱 SQL 主机 快网 中文域名 45棋牌游戏下载
快网,域名注册,45棋牌游戏下载,ASP空间,企业邮局,SQL空间,主机租用,主机托管
快网客服中心的相关信息:
v CSS常用技巧介绍 [2009-2-25 16:34:14]
v 怎么解除(网页不能另存为)的问题 [2009-2-15 11:02:43]
v CSS+DIV实现鼠标经过背景变色 [2009-2-11 22:32:43]
v 如何学习搜索引擎优化 [2009-2-11 22:28:50]
v 搜索引擎方面:SEO七点注意事项 [2009-2-11 22:25:46]
快网,域名注册,45棋牌游戏下载,ASP空间,企业邮局,SQL空间,主机租用,主机托管
快网,域名注册,45棋牌游戏下载,ASP空间,企业邮局,SQL空间,主机租用,主机托管
如果您在使用我们的产品中遇到问题,建议您首先在“ 常见问题”中查询解决方法;
如果没有找到该问题的解决方法,您可以在“问题搜索”中进行搜索;
如果搜索后没有找到满意答案,您可以“在线提问”,我们会尽快给您答复。
快网,域名注册,45棋牌游戏下载,ASP空间,企业邮局,SQL空间,主机租用,主机托管
域名注册查询 中文域名转码
域名whois查询 网站PR值查询
快网,域名注册,45棋牌游戏下载,ASP空间,企业邮局,SQL空间,主机租用,主机托管

:::::: | 收藏本站 | 关于我们 | 客服中心 | 付款方式 | 联系我们 | 网站律师 | 工作机会 | 网站地图 | 产品管理 | ::::::

Copyright (C) 2003-2008 天津追日科技发展有限公司 dsn-caipiao.top 快网.cn 中国快网.cn