masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > Koleksi CSS yang biasa digunakan_Pertukaran pengalaman

Koleksi CSS yang biasa digunakan_Pertukaran pengalaman

WBOY
Lepaskan： 2016-05-16 12:08:47
asal
1640 orang telah melayarinya

/**//*Gaya butang*/
.ButtonCSS {}{
    font-family: "Tahoma", "宋体";
    saiz fon:9pt; warna: #003399;
    sempadan: 1px #003399 pepejal;
    warna:006699;
    BORDER-BAWAH: #93bee2 1px pepejal; 
    BORDER-KIRI: #93bee2 1px pepejal; 
    BORDER-RIGHT: #93bee2 1px pepejal; 
    BORDER-TOP: #93bee2 1px pepejal;
    background-image:url(../Images/bluebuttonbg.gif);
    warna latar belakang: #e8f4ff;
    KURSOR: tangan;
    gaya fon: biasa ;
    lebar:60px;
    tinggi:22px;
}

/**//*Gaya butang biru*/
.blueButtonCss {}{
    font-family: "Tahoma", "宋体";
    saiz fon: 9pt; warna: #003366;
    sempadan: 0px #93bee2 pepejal;
   /**//* BORDER-BOTTOM: #93bee2 1px pepejal; 
    BORDER-KIRI: #93bee2 1px pepejal; 
    BORDER-RIGHT: #93bee2 1px pepejal; 
    BORDER-TOP: #93bee2 1px pepejal;*/
    background-image:url(../Images/blue_button_bg.gif);
    warna latar belakang: #ffffff;
    KURSOR: tangan;
    gaya fon: biasa ;
}

/**//*Gaya butang merah*/
.redButtonCss {}{
    font-family: "Tahoma", "宋体";
    saiz fon: 9pt; warna: #0066cc;
    sempadan: 1px #93bee2 pepejal;
    BORDER-BAWAH: #93bee2 1px pepejal; 
    BORDER-KIRI: #93bee2 1px pepejal; 
    BORDER-RIGHT: #93bee2 1px pepejal; 
    BORDER-TOP: #93bee2 1px pepejal;
    background-image:url(../Images/redbuttonbg.gif);
    warna latar belakang: #ffffff;
    KURSOR: tangan;
    gaya fon: biasa ;
}
/**//*Pilih gaya butang*/
.selectButtonCss
{}{
    font-family: "Tahoma", "宋体";
    saiz fon: 9pt; warna: #0066cc;
    sempadan: 1px #93bee2 pepejal;
    BORDER-BAWAH: #93bee2 1px pepejal; 
    BORDER-KIRI: #93bee2 1px pepejal; 
    BORDER-RIGHT: #93bee2 1px pepejal; 
    BORDER-TOP: #93bee2 1px pepejal;
    background-image:url(../Images/blue_button_bg.gif);
    warna latar belakang: #ffffff;
    KURSOR: tangan;
    gaya fon: biasa ;
}    

/**//*Gaya butang hijau*/
.greenButtonCss {}{
    font-family: "Tahoma", "宋体";
    saiz fon: 9pt; warna: #0066cc;
    sempadan: 1px #93bee2 pepejal;
    BORDER-BAWAH: #93bee2 1px pepejal; 
    BORDER-KIRI: #93bee2 1px pepejal; 
    BORDER-RIGHT: #93bee2 1px pepejal; 
    BORDER-TOP: #93bee2 1px pepejal;
    background-image:url(../Images/greenbuttonbg.gif);
    warna latar belakang: #ffffff;
    KURSOR: tangan;
    gaya fon: biasa ;
}
/**//*Butang imej*/
.Butang imej
{}{
KURSOR: tangan;    /**//*Tukar bentuk tetikus*/
}
/**//*Gaya teks halaman*/
badan 
{}{
    스크롤바-얼굴-색상: #EDEDF3;
    스크롤바 강조 색상: #ffffff;
    스크롤바-그림자-색상: #93949F;
    scrollbar-3dlight-color: #EDEDF3;
    스크롤 막대-화살표-색상: #082468;
    스크롤바 트랙 색상: #F7F7F9;
    스크롤바-darkshadow-color: #EDEDF3;

    글꼴 크기: 9pt;
    색상: #003366;
    overflow:auto;
}
TD {}{ 글꼴 크기: 12px }
일 
{}{
    글꼴 크기: 12px; 
}
/**//************************************
드롭다운 선택 상자 표시 스타일
*************************************/
선택
{}{
    테두리-오른쪽: #000000 1px 단색; 
    테두리 상단: #FFFFFF 1px 단색; 
    글꼴 크기: 12px; 
    테두리-왼쪽: #FFFFFF 1px 단색;
    색상:#003366; 
    테두리-하단: #000000 1px 단색; 
    배경색: #f4f4f4;
}

/**//************************************************ *****
하이퍼링크 표시 스타일
************************************ ****** ******************/
A:링크, A:방문{}{color:#223355;text-장식: 없음}
A:호버{} {색상:빨간색;텍스트-장식:없음;}

A.highlight:link, A.highlight:visited {}{ color:red; 텍스트 장식:없음 }
A.highlight:hover {}{ color:red; 텍스트 장식:밑줄 }

A.thisclass:link, A.thisclass:visited {}{ color: #D9EBFD; 글꼴 두께:굵게; 텍스트 장식:없음 }
A.thisclass:hover {}{ 색상: #FFFFFF;font-weight:bold; }

A.navlink:link, A.navlink:visited {}{color: #D9EBFD; 텍스트 장식:없음}
A.navlink:hover {}{color: #FFFFFF; 텍스트 장식:없음 }


/**//************************************************ *****
행 텍스트 편집 상자 표시 스타일
************************************ * ********************/
.EditBox
{}{
    배경: #ffffff; 
    테두리: 1px 단색 #B7B7B7;
    색상: #003366;
    커서: 텍스트;
    font-family: "Arial";
    글꼴 크기: 9pt;
    높이: 18px;
    패딩: 1px;
}
/**//************************************************ ****
여러 줄 텍스트 상자 스타일
************************************ ****** ******************/
.MultiEditBox
{}{
    배경: #f8f8f8;
    테두리 하단: #B7B7B7 1px 단색;
    테두리 왼쪽: #B7B7B7 1px 단색;
    경계 오른쪽: #B7B7B7 1px 단색;
    테두리 상단: #B7B7B7 1px 단색;
    색상: #000000;
    커서: 텍스트;
    font-family: "Arial";
    글꼴 크기: 9pt;
    패딩: 1px;
}

/**//************************************************ *****
그림자 스타일 형태
************************************ ****** ******************/
.Shadow 
{}{
    위치:절대;
    z-색인:1000;
    상단:0px;
    왼쪽:0px;
    배경:회색;
    배경색:#FFCC00;
    필터 : progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2, positives=true);
}
/**//************************************** ***************
只显一条横线的Text的样式!
************************************************ ******/
.logintxt
{}{
    BORDURE DROITE : #ffffff 0px solide ; 
    BORDURE-TOP : #ffffff 0px solide ;
    TAILLE DE LA POLICE : 9 pt ; 
    BORDURE-GAUCHE : #ffffff 0px solide ; 
    BORDURE-BAS : #c0c0c0 1px solide ; 
    COULEUR DE FOND : #ffffff
}
/**//************************************************ *****
Style d'en-tête DataGrid
************************************ **** ******************/
.dgTitle
{}{
    hauteur : 25 px ;
    couleur :#ffffff;
    font-size:large;
    text-align:center;
    vertical-align:middle;
    BACKGROUND-IMAGE:url(../images/tableTitle2.gif); hauteur:25px

}

/**//************************************************ *****
Style d'affichage des données DataGrid
********************************* ***** ********************/
.dgItem
{}{
    hauteur:15px;
    text-align:center;
    vertical-align:middle;
}
/**//************************************************ *****
Style d'affichage de la zone de texte
********************************* ******* ********************/
.clarity
{}{
    BORDURE DROITE : #ffffff 0px solide ; 
    BORDURE-TOP : #ffffff 0px solide ;
    TAILLE DE LA POLICE : 9 pt ; 
    BORDURE-GAUCHE : #ffffff 0px solide ; 
    BORDURE-BAS : #ffffff 0px solide ; 
}
TABLE.List {}{ border-top : 1px solid #000000 ; bordure inférieure : 1 px solide #000000 ; }
TABLE.List TH,TABLE.List TD {}{ padding:4px;background-color:#eeeeee;border-bottom:2px solid #ffffff;border-right:1px solid #ffffff;border-left:1px solid #ffffff;color:#000000}
TABLE.List TH {}{ background-color:#0064a8;border-top:2px solid #ffffff;color:#ffffff;font-weight:normal;}
TABLE.Liste TH A:link {}{COULEUR : #ffffff ; TEXTE-DÉCORATION : aucun}
TABLE.Liste TH A : visité {}{COULEUR : #ffffff ; TEXTE-DÉCORATION : aucun}
TABLE.List TH A : survol {}{COULEUR : #ffffff ; TEXTE-DÉCORATION : souligné}

TABLE.Form TH,TABLE.Form TD {}{ padding:4px;background-color:#f6f6f6;border-bottom:1px solid #F6F6F6;border-right:1px solid #ffffff;border-left:1px solid #ffffff;color:#000000}
TABLE.Form TH {}{ background-color:#E8E8E8;border-top:1px solid #ffffff;color:#006699;font- size:12px;font-weight:normal;border-bottom:1px;}
TABLE.Form TH A:link {}{COULEUR : #ffffff; TEXTE-DÉCORATION : aucun}
TABLE.Form TH A : visité {}{COULEUR : #ffffff ; TEXTE-DÉCORATION : aucun}
TABLE.Form TH A : survol {}{COULEUR : #ffffff ; TEXTE-DÉCORATION : souligné}

TABLE.Sample TD {}{ padding:2px;background-color:#f6f6f6;border-bottom:1px solid #000000;border-top:1px solid #000000;border- right:1px solid #000000;border-left:1px solid #000000;color:#000000}
TABLE.Sample TH {}{ background-color:#AEC1D7;border-bottom:1px solid #000000;border-top :1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000;font-weight:normal;}

TABLE.SampleD TD {}{ padding :2px;border-bottom:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000}
TABLE.SampleD TH {}{ border-bottom:1px solid #000000;border-top:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000;font-weight:normal ;}

TABLE.Form1 TH,TABLE.Form1 TD {}{ padding:4px;background-color:#BED8F3;border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;border -left:1px solid #ffffff;color:#000000}
/**//************************************************ *****
Zone de saisie sans bordure
*********************************** * *******************/
.NoneInput
{}{
    text-align:center;
    largeur : 99 % ; hauteur : 99 % ;
    border-top-style : aucun ;
    border-right-style : aucun ;
    border-left-style : aucun ;
    couleur de fond : #f6f6f6;
    border-bottom-style : aucun ;
}

/**//************************************************ *****
Style de forme de style plat
*********************************** * *******************/

 

/**//************************************************ *****/
TABLE
{}{
    border-collapse:collapse;
}

/**//*
Style de barre de progression
*/
.bi-loading-status {}{
  /**//*position :   absolue ;*/
  largeur :        150 px ;
  remplissage : 1 px ;
  débordement : masqué ;
  couleur de fond : gris ;  
}

 

.bi-loading-status .text {}{
  espace blanc :  nowrap ;
  débordement :     masqué ;
  largeur :             100 % ;
  débordement de texte :     points de suspension ;
  remplissage :      1 px ; 
}


.bi-loading-status .progress-bar {}{
  border:       1px solid ThreeDSShadow ;
  arrière-plan :   fenêtre ;
  hauteur :       10 px ;
  largeur :        100 % ;
  remplissage : 1 px ;
  débordement : masqué ; 
}


.bi-loading-status .progress-bar div {}{
  arrière-plan :   Surligner ;
  débordement : masqué ;
  hauteur :       100 % ;
  filtre :       Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
/**//************************************************ *****
Fond d'en-tête
********************************** * ***************
 表头背景
*************************** **************************/
.tabletop {}{
    IMAGE DE FOND : url(../images/tableTitle2 .gif);hauteur:25px;
}
/**//************************************************ *****
Gros titre
************************************** *** *****************
大标题
****************************** *************************/
.tabletitle{}{
   font-family : "Arial" ; TAILLE DE LA POLICE : 12 pts ; COULEUR : #0066cc;font-weight:bolder;filter : progid:DXImageTransform.Microsoft.DropShadow(color=#CCFFFF,offX=1,offY=1,positives=true);
}
/**//************************************************ *****
Sous-titre
************************************** ** *****************
小标题
****************************** *************************/
.smalltitle{}{    couleur de fond :#E8E8E8;taille de police :12 px ; poids de la police : normal ; couleur : #006699 ; } .calendarborder{}{    bordure : 1px #B7B7B7 solide ; }

Label berkaitan：
常用CSS集合
sumber：php.cn
Artikel sebelumnya：Pelajaran02_04 Label Borang (2)_Tutorial Asas Artikel seterusnya：Membuat editor dalam talian WEB - memasukkan tag HTML_Pertukaran pengalaman
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Elemen anak React tidak sah (ditemui: Objek dengan kunci {clientVersion}). Jika anda ingin membuat koleksi elemen kanak-kanak, gunakan tatasusunan sebaliknya Saya mempunyai borang berbilang langkah dan apabila saya cuba menyerahkan ia menunjukkan r...
daripada 2024-04-06 16:25:39
0
1
346
Saya menghadapi masalah dengan grid CSS yang ketinggiannya tidak seperti yang saya jangkakan, apakah kesilapan yang mungkin saya lakukan? Saya sedang belajar grid CSS dan diminta untuk membuat kad ini dengan memecahkannya kepada...
daripada 2024-04-06 12:52:14
0
1
339
Tapak web menggunakan Pelayan Langsung tidak berfungsi apabila saya melancarkannya daripada fail Saya mencuba beberapa penyemak imbas dan dalam setiap kes tapak web berfungsi dengan baik ...
daripada 2024-04-06 12:46:18
0
1
403
Pelapik ibu bapa tidak diendahkan oleh anak yang berkedudukan melekit Bagaimana untuk mengelakkan unsur melekit daripada berada di belakang pengepala? Coretan k...
daripada 2024-04-06 11:42:51
0
1
338
Muat naik berbilang imej ke koleksi Firebase dan Firebase menggunakan React Native Expo Saya cuba menggunakan "ekspo" ReactNative untuk memuat naik berbilang imej ke Pe...
daripada 2024-04-04 23:20:02
0
1
1468
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan