Mifano ya mabara ya CSS
- Mwongozo wa wakati wa kuzingatia Mifano ya kizito cha CSS
- Pya zaidi Mifano ya paguza ya CSS
Mafanya kuhakika ndipo kuwa chukua mtindo wa msami wa CSS.
基本按钮样式
实例
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
按钮颜色
Tumia background-color 属性更改按钮的背景色：
实例
.button1 {background-color: #4CAF50;} /* 绿色 */
.button2 {background-color: #008CBA;} /* 蓝色 */
.button3 {background-color: #f44336;} /* 红色 */
.button4 {background-color: #e7e7e7; color: black;} /* Kivuru */
.button5 {background-color: #555555;} /* Mwezi */
Ukubwa wa msingi wa kifungu
Tumia font-size Mfano wa kufungua ukubwa wa fonti wa msingi wa kifungu:
实例
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Tumia padding Mfano wa kufungua uangavu wa msingi wa kifungu:
实例
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Mfano wa msingi wa kifungu wa kina:
Tumia border-radius Mfano wa kuongeza mabaki ya msingi wa kifungu:
实例
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
kina cha mabini kinachokaa kwenye mabini
Tumia border Mwakojo wa kipimo cha mabini kwa kuingia kwa kina cha mabini:
实例
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
mabini yanayoweza kumengenia
Kama mchezo unaingia kwenye mabini, tumia :hover Mwakojo wa kipimo cha mabini kinaweza kubadilika kwa kubadilisha mabini.
Taharirio:Tumia transition-duration Mwakojo wa kipimo cha mabini kwa kubadilisha hali ya kumengenia kwa kipimo cha mabini:
实例
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
mabini ya kina
Tumia box-shadow Mwakojo wa kipimo cha mabini kwa kuingia kwa mabini:
实例
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
mabini yaliyopatikana
Tumia opacity Mwakojo wa kipimo cha mabini kwa kuingia kwa uangavivu wa mabini (kumengenia hali ya kumpatikana).
Taharirio:Una uwezo wa kuongeza na thamani ya "not-allowed" kwa cursor Mwakojo wa kipimo cha mabini, hali hii inaonyesha "no parking sign" (binafsi ya kumaliza kumzindua) kama unapokea kwenye mabini kama unapiga mchezo:
实例
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
Kipimo cha mabini
Kwa kawaida, kipimo cha mabini kinaaminika kwa kuzingatia muungano wa matukio (kama uwezo wa muungano wa kina). Tumia width Mwakojo wa kipimo cha mabini kwa kubadilisha uwezo wa mabini:
实例
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
kundi ya mabini
Kimaingia na kufungua uangavivu na kuongeza uwezo wa mabini yake kwa kila gurusha float:left，来创建按钮组：
实例
.button {
float: left;
}
带边框的按钮组
使用 border 属性来创建带边框的按钮组：
实例
.button {
float: left;
border: 1px solid green;
}
垂直按钮组
使用 display:block 取代 float:left 将按钮上下分组，而不是并排：
实例
.button {
display: block;
}
Mabara ya huzuni
Mifano 1
Ongea kwa kina cha kina wakati wa kina:
Mifano 2
Ongea kwa uhariri wa 'kina kina' wakati wa kubonyeza:
Mifano 3
Kufadhaa kwa muda wa kina:
Mifano 4
Ongea kwa uhariri wa 'kina kina' wakati wa kubonyeza:
- Mwongozo wa wakati wa kuzingatia Mifano ya kizito cha CSS
- Pya zaidi Mifano ya paguza ya CSS
