雖然CSS樣式的學(xué)習(xí)需要我們動(dòng)手多實(shí)踐，需要多做案例，思致思考，但有時(shí)候注意資料的收集與整理也是非常重要的，在實(shí)際開發(fā)中往往會(huì)起到事半功倍的效果。下面一些關(guān)于按鈕、文本框、表單的常用CSS樣式。大家可以參考。 一、按鈕樣式 .buttoncss{ font-family
雖然CSS樣式的學(xué)習(xí)需要我們動(dòng)手多實(shí)踐，需要多做案例，思致思考，但有時(shí)候注意資料的收集與整理也是非常重要的，在實(shí)際開發(fā)中往往會(huì)起到事半功倍的效果。下面一些關(guān)于按鈕、文本框、表單的常用CSS樣式。大家可以參考。
一、按鈕樣式
.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;
}
????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;
}
二、藍(lán)色按鈕
.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?;
}
????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?;
}
三、紅色按鈕
.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?;
}
????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?;
}
四、選擇按鈕
.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?;
}?
????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?;
}?
五、綠色按鈕
.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?;
}
????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?;
}
六、圖像按鈕
.imagebutton{
????cursor:?hand;????/*改變鼠標(biāo)形狀?www.52css.com*/
}
????cursor:?hand;????/*改變鼠標(biāo)形狀?www.52css.com*/
}
七、頁(yè)面正文
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;
}
????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;
}
th?{
????font-size:?12px;
}
八、下拉選擇框
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;
}
????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;
}
九、線條文本編輯框
.editbox{
????background:?#ffffff;
????border:?1px?solid?#b7b7b7;
????color:?#003366;
????cursor:?text;
????font-family:?“arial”;
????font-size:?9pt;
????height:?18px;
????padding:?1px;?/*www.52css.com*/
}
????background:?#ffffff;
????border:?1px?solid?#b7b7b7;
????color:?#003366;
????cursor:?text;
????font-family:?“arial”;
????font-size:?9pt;
????height:?18px;
????padding:?1px;?/*www.52css.com*/
}
十、多行文本框
.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*/
}
????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*/
}
十一、陰影風(fēng)格的表單
.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);
}
????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);
}
十二、只顯一條橫線的輸入框
.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
}
????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
}
十三、沒(méi)有邊框的輸入框
.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;
}
????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;
}
