社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > css教學 > 常用CSS集合_經驗交流

常用CSS集合_經驗交流

WBOY
發布： 2016-05-16 12:08:47
原創
1641 人瀏覽過

/**//*按鈕樣式*/
.ButtonCSS {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#003399；
    邊框：1px #003399 實心；
    顏色：006699；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/bluebuttonbg.gif);
    背景顏色：#e8f4ff；
    遊標：手；
    字體樣式：正常；
    寬度：60px；
    高度：22px；
}

/**//*藍色按鈕樣式*/
.blueButtonCss {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#003366；
    邊框：0px #93bee2 實心；
   /**//* 邊框底部：#93bee2 1px solid;
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；*/
    背景影像:url(../Images/blue_button_bg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}

/**//*紅色按鈕樣式*/
.redButtonCss {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#0066cc；
    邊框：1px #93bee2 實心；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/redbuttonbg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}
/**//*選擇按鈕樣式*/
.selectButtonCss
{}{
    font-family:"Tahoma","宋體";
    字體大小：9pt；顏色：#0066cc；
    邊框：1px #93bee2 實心；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/blue_button_bg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}    

/**//*綠色按鈕樣式*/
.greenButtonCss {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#0066cc；
    邊框：1px #93bee2 實心；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/greenbuttonbg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}
/**//*圖像按鈕*/
.imageButton
{}{
CURSOR：手； /**//*改變滑鼠形狀*/
}
/**//*頁面正文樣式*/
body 
{}{
    捲軸顏色：#EDEDF3;
    捲軸則反白顯示顏色：#ffffff;
    捲軸陰影顏色：#93949F；
    捲軸-3dlight-color：#EDEDF3；
    捲軸箭頭顏色：#082468；
    捲軸軌道顏色：#F7F7F9；
    捲軸-darkshadow-顏色：#EDEDF3；

    字體大小：9pt；
    顏色：#003366；
    溢出：自動；
}
TD {}{ 字體大小：12px }
TH 
{}{
    字體大小：12px; ＃＃＃} ＃＃＃/**＆＃＆*/ ＃＃＃選擇＃＃{{}{
    右邊框：#000000 1px 實心；
    頂部邊框：#FFFFFF 1px 實線；
    字體大小：12px；
    左邊框：#FFFFFF 1px 實線；
    顏色：#003366；
    邊框底部：#000000 1px 實心；
    背景顏色：#f4f4f4；
}

/**//************************************************ *****
超級連結顯示風格
*********************************** ******************/
A:鏈接，A:已訪問{}{color:#223355;text-decoration:無}
A:懸停{} {顏色：紅色;文字裝飾：無;}

A.highlight：鏈接，A.highlight：訪問過{}{顏色：紅色;文字裝飾：無}
A.highlight：懸停{}{顏色：紅色;文字裝飾：下劃線}

A.thisclass：鏈接，A.thisclass：已訪問{}{顏色：#D9EBFD;字體粗細：粗體；文字裝飾：無}
A.thisclass：懸停{}{顏色：#FFFFFF;字體粗細：粗體; }

A.navlink:鏈接，A.navlink:訪問過{}{color:#D9EBFD;文字裝飾：無}
A.navlink：懸停{}{顏色：#FFFFFF;文字裝飾：無}


/**//************************************************ *****
線條文字編輯框顯示風格
********************************* ********************/
.EditBox
{}{
    背景：#ffffff;
    邊框：1px 實心#B7B7B7；
    顏色：#003366；
    遊標：文字；
    字體系列：「Arial」；
    字體大小：9pt；
    高度：18px；
    內邊距：1px；
}
/**//************************************************ ****
多行文字方塊樣式
*********************************** ******************/
.MultiEditBox
{}{
    背景: #f8f8f8;
    邊框底部：#B7B7B7 1px 實心；
    左邊框：#B7B7B7 1px 實線；
    右邊框：#B7B7B7 1px 實心；
    上方邊框：#B7B7B7 1px 實心；
    顏色：#000000；
    遊標：文字；
    字體系列：「Arial」；
    字體大小：9pt；
    內邊距：1px； ＃＃＃} ＃＃＃＃＃＃/**＆＃＆*/ ＃＃＃。陰影 ＃＃＃}{
    position:absolute;
    z-index:1000;
    top:0px;
    left:0px top:0px;
    left:0px 
10color #    filter : progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
}
/**//********* ********************************************
只顯一條橫線的Text的樣式！
*********************************************** ***** ******/
.logintxt
{}{
    右邊框：#ffffff 0px 實心；
    頂部邊框：#ffffff 0px 實心；
    字體大小：9pt；
    左邊框：#ffffff 0px 實心；
    邊框底部：#c0c​​0c0 1px 實心；
    背景顏色： #ffffff
}
/**//************************************************ *****
DataGrid頁眉樣式
***************************************** ******************/
.dgTitle
{}{
    高度：25px;
    顏色：#ffffff;
    字體大小：大；
    文字對齊：置中；
    垂直對齊：中間；
    背景影像:url(../images/tableTitle2.gif);高度：25px

}

/**//************************************************ *****
DataGrid資料顯示樣式
*********************************** ******************/
.dgItem
{}{
    高度：15px;
    文字對齊：置中；
    垂直對齊：中間；
}
/**//************************************************ *****
文字方塊顯示樣式
*********************************** ******************/
.clarity
{}{
    右邊框：#ffffff 0px solid；
    頂部邊框：#ffffff 0px 實心；
    字體大小：9pt；
    左邊框：#ffffff 0px 實心；
    邊框底部：#ffffff 0px 實心；
}
TABLE.List {}{ border-top: 1px solid #000000;邊框底部：1px 實心#000000； }
TABLE.List TH，TABLE.List TD {}{} 填充：4px；背景顏色：#eeeeee；邊框底部：2px 實心#ffffff；右邊框：1px 實心#ffffff；左邊框：1px固體#ffffffff ;顏色：#000000}
TABLE.List TH {}{}背景顏色：#0064a8;邊框頂部：2px 固體#ffffff;顏色：#ffffff;字體粗細：正常;}
TABLE.List TH A ：連結{}{COLOR：#ffffff;文字裝飾：無}
TABLE.List TH A：曾經造訪過{}{COLOR：#ffffff;文字裝飾：無}
TABLE.List TH A:hover {}{COLOR: #ffffff;文字裝飾：底線}

TABLE.Form TH，TABLE.Form TD {}{} 填滿：4px；背景顏色：#f6f6f6；邊框底部：1px 實心#F6F6F6；邊框右：1px 實心#ffffff; border-left:1px solid #ffffff;color:#000000}
TABLE.Form TH {}{背景顏色：#E8E8E8；邊框頂部：1px 實心#ffffff；顏色：#006699；字體大小：12px；字體粗細：正常；邊框底部：1px;}
TABLE.Form TH A：連結{}{顏色：#ffffff;文字裝飾：無}
TABLE.Form TH A：曾經造訪過{}{COLOR：#ffffff;文字裝飾：無}
TABLE.Form TH A:hover {}{COLOR: #ffffff;文字裝飾：底線}

TABLE.Sample TD {}{} 填滿：2px；背景顏色：#f6f6f6；邊框底部：1px 實心#000000；邊框頂部：1px 實心#000000；邊框-右：1像素實心#000000；左邊框：1 像素實心#000000；顏色：#000000}
TABLE.Sample TH {}{}背景顏色：#AEC1D7；邊框底部：1 像素實心#000000；邊框尺寸#000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000;font-weight:normal;}

TABLE.SampleD TD2 {x} ;邊框底部:1像素實心#000000;邊框頂部:1像素實心#000000;邊框右:1像素實心#000000;邊框左:1像素實心#000000;顏色:#000000}
TABLE.SampleD TH { }{}邊框底部：1px固體#000000；邊框頂部：1px固體#000000；邊框右：1像素固體#000000；邊框左：1像素固體#000000；顏色：#000000；字體粗細：正常;}
##
#TABLE.Form1 TH，TABLE.Form1 TD {}{} 填滿：4px；背景顏色：#BED8F3；邊框底部：1px 實心#ffffff；右邊框：1px 實心#ffffff；邊框-left:1px solid # ffffff;color:#000000}
/**//************************************************ *****
 沒有邊框的輸入方塊 
********************************** *******************/
.NoneInput
{}{
    text-align:center;
    寬度：99%；高度：99%；
    邊框頂部樣式：無；
    右邊框樣式：無；
    左邊框樣式：無；
    背景顏色：#f6f6f6；
    邊框底部樣式：無； ＃＃＃}＃＃＃＃＃＃/**＆＃＆*/＃{＃＃＃＃＃ #    邊框折疊：折疊；
}

/**//************************************************ *****
 扁平風格的表單樣式
********************************** *******************/
.bi-loading-status {}{
  /**//************************************************ **** *****/
  寬度：        150px；
  內邊距：1px；
  溢出：隱藏；
  背景顏色：灰色；
}

 

.bi-loading-status .text {}{
  空白：  nowrap;
  溢出：     隱藏；
  寬度：             100%；
  文字溢位：     省略號；
  內邊距：      1px；
}


.bi-loading-status .progress-bar {}{
  邊框：       1px solid ThreeDShadow;
  背景：   視窗；
  高度：       10px；
  寬度：        100%；
  內邊距：1px；
  溢出：隱藏；
}


.bi-loading-status .progress-bar div {}{
  背景：   突出顯示；
  溢出：隱藏；
  高度：       100%；
  過濾器：       Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
/**//************************************************ *****
 表頭背景
************************************ *****************/
.tabletop {}{
    背景圖片： url(../images/tableTitle2.gif);高度:25px;
}
/**//************************************************ *****
大標題
************************************* ****************/
.tabletitle{}{
   font-family: "Arial";FONT-SIZE: 12pt;顏色：#0066cc；字體粗細：粗體；過濾器：progid：DXImageTransform.Microsoft.DropShadow（顏色=#CCFFFF，offX=1，offY=1，正值=true）;
}
/**//************************************************ *****
小標題
************************************* ****************/
.smalltitle{}{
   背景顏色:#E8E8E8;字體大小:12px;字體粗細:正常;顏色:#006699;
}
.calendarborder{}{
   邊框： 1px #B7B7B7 solid;
}

相關標籤：
常用CSS集合
來源：php.cn
上一篇：Lesson02_04 表單標籤(2)_基礎教學課程 下一篇：製作WEB線上編輯器-插入HTML標籤_經驗交流
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
React子元素無效（發現：具有鍵{clientVersion}的物件）。如果您想渲染一個子元素集合，請使用數組代替 我有一個多步驟表單，當我嘗試提交時會顯示此錯誤。但是，如果我以簡單的形式使用createOrganization調度，它就會起作用。是後端問題還是前端問題？我可能做錯了什麼？我希望...
來自於 2024-04-06 16:25:39
0
1
346
我在使用CSS網格時遇到了高度不符合預期的問題，我可能犯了哪些錯誤？ 我目前正在學習CSS網格，並且被要求將其分解為網格來製作這張卡片。附上了我想要製作的網格的圖片。實際上有一個更大的網格（在CSS中稱為profile-grid），所有這些卡片都排列...
來自於 2024-04-06 12:52:14
0
1
339
使用 Live Server 的網站，當我從文件啟動時無法工作 我嘗試了幾種瀏覽器，並且在每種情況下網站都可以與LiveServer正常工作。另一方面，當我使用Firefox/Chrome啟動它時，網站根本不會加載我的style.css，當我使...
來自於 2024-04-06 12:46:18
0
1
403
父級的填充被黏性定位的子級忽略 如何防止黏性元素進入標題後面？當前程式碼片段在父級上使用填充頂部，我也嘗試在額外的子級上使用margin-top或透明50px邊框，但它似乎不起作用。我知道在這種情況下我可以輕鬆地...
來自於 2024-04-06 11:42:51
0
1
338
使用React Native Expo將多個映像上傳到Firebase集合和Firebase 我正在嘗試使用ReactNative“expo”將多個圖像上傳到Firebase存儲和Firebase數據庫集合，但這很困難，我什至嘗試使用chatGpt，但生成的代碼令人困惑並且...
來自於 2024-04-04 23:20:02
0
1
1468
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板