Cov ntsiab lus Marketing
CSS3 Nta Koj Yuav Tsis Paub Txog: Flexbox, Grid Layouts, Custom Properties, Transitions, Animations, and Multiple Background
Cascading Style Sheets (CSS) txuas ntxiv hloov zuj zus thiab qhov tseeb versions yuav muaj qee qhov nta uas koj yuav tsis paub txog. Nov yog qee qhov kev txhim kho loj thiab cov txheej txheem qhia nrog CSS3, nrog rau cov piv txwv code:
- Flexible Box Layout (Flexbox): ib hom layout uas tso cai rau koj los tsim hloov tau yooj yim thiab teb layouts rau nplooj ntawv web. Nrog flexbox, koj tuaj yeem yooj yim kho thiab faib cov khoom hauv lub thawv. n piv,
.container
chav kawm sivdisplay: flex
pab kom flexbox layout hom. Covjustify-content
cuab yeej yog teem raucenter
kom horizontally center tus me nyuam lub ntsiab nyob rau hauv lub thawv. Covalign-items
cuab yeej yog teem raucenter
mus rau vertically center tus me nyuam lub caij. Cov.item
chav kawm teev cov xim tom qab thiab padding rau cov menyuam lub caij.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
tshwm sim
Centered Element
- Daim phiaj layout: Lwm hom layout uas tso cai rau koj los tsim cov kab sib chaws nyuaj-raws li layouts rau nplooj ntawv web. Nrog daim phiaj, koj tuaj yeem qhia cov kab thiab kab, thiab tom qab ntawd muab cov khoom tso rau hauv cov hlwb tshwj xeeb ntawm daim phiaj. Hauv qhov piv txwv no, lub
.grid-container
chav kawm sivdisplay: grid
txhawm rau pab kom daim phiaj layout hom. Covgrid-template-columns
cuab yeej yog teem raurepeat(2, 1fr)
los tsim ob kab ntawm qhov dav sib npaug. Covgap
Cov cuab yeej teeb tsa qhov sib nrug ntawm kab sib chaws. Cov.grid-item
chav kawm teev cov xim tom qab thiab padding rau cov khoom kab sib chaws.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
tshwm sim
Khoom 1
Khoom 2
Khoom 3
Khoom 4
- Kev hloov pauv: CSS3 tau qhia ntau yam khoom tshiab thiab cov tswv yim los tsim kev hloov pauv ntawm nplooj ntawv web. Piv txwv li, lub
transition
Cov cuab yeej siv tau los ua kom muaj kev hloov pauv hauv CSS cov khoom nyob rau lub sijhawm. Hauv qhov piv txwv no, lub.box
chav kawm teev qhov dav, qhov siab, thiab pib xim tom qab rau lub caij. Covtransition
cuab yeej yog teem raubackground-color 0.5s ease
kom animate hloov pauv rau cov khoom siv xim tom qab dhau ib nrab thib ob nrog lub sijhawm yooj yim-hauv-tawm sijhawm. Cov.box:hover
chav kawm hloov cov xim tom qab ntawm lub caij thaum tus nas pointer dhau nws, ua rau kev hloov pauv animation.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
tshwm sim
Hover
Ntawm no!
Ntawm no!
- animations: CSS3 tau qhia ntau yam khoom tshiab thiab cov tswv yim tsim cov animations ntawm nplooj ntawv web. Hauv qhov piv txwv no, peb tau ntxiv ib qho animation siv tus
animation
vaj tse. Peb tau txhais a@keyframes
txoj cai rau cov animation, uas qhia tau hais tias lub thawv yuav tsum tig los ntawm 0 degrees mus rau 90 degrees nyob rau lub sij hawm ntawm 0.5 vib nas this. Thaum lub box hovered tshaj, lubspin
animation yog siv los tig lub thawv. Covanimation-fill-mode
cuab yeej yog teem rauforwards
los xyuas kom meej tias lub xeev kawg ntawm cov animation yog khaws cia tom qab nws tiav.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
tshwm sim
Hover
Ntawm no!
Ntawm no!
- CSS Custom Properties: Kuj hu ua CSS variables, kev cai khoom raug qhia hauv CSS3. Lawv tso cai rau koj los txhais thiab siv koj tus kheej cov khoom siv hauv CSS, uas tuaj yeem siv los khaws thiab rov siv cov txiaj ntsig thoob plaws hauv koj daim ntawv teev npe. CSS variables raug txheeb xyuas los ntawm ib lub npe uas pib nrog ob lub dashes, xws li
--my-variable
. Hauv qhov piv txwv no, peb txhais CSS qhov sib txawv hu ua -primary-xim thiab muab nws tus nqi ntawm#007bff
, uas yog xim xiav feem ntau siv los ua cov xim tseem ceeb hauv ntau cov qauv tsim. Peb tau siv qhov hloov pauv no los teeb tsabackground-color
cov cuab yeej ntawm lub pob khawm, los ntawm kev siv lubvar()
ua haujlwm thiab dhau ntawm lub npe sib txawv. Qhov no yuav siv tus nqi ntawm qhov sib txawv raws li xim tom qab rau lub pob.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Ntau yam keeb kwm yav dhau: CSS3 tso cai rau koj los qhia ntau yam duab tom qab rau ib lub caij, nrog lub peev xwm los tswj nws qhov chaw thiab kev txiav txim. Lub keeb kwm yav dhau yog tsim los ntawm ob daim duab,
red.png
thiabblue.png
, uas yog loaded siv lubbackground-image
vaj tse. Thawj daim duab,red.png
, yog positioned ntawm sab xis hauv qab ces kaum ntawm lub caij, thaum lub thib ob duab,blue.png
, yog positioned nyob rau sab laug sab saum toj ces kaum ntawm lub caij. Covbackground-position
cuab yeej yog siv los tswj qhov chaw ntawm txhua daim duab. Covbackground-repeat
cov cuab yeej siv los tswj cov duab rov ua li cas. Thawj daim duab,red.png
, yog teem kom tsis rov ua dua (no-repeat
), thaum daim duab thib ob,blue.png
, yog teem kom rov ua dua (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}