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 siv display: flex pab kom flexbox layout hom. Cov justify-content cuab yeej yog teem rau center kom horizontally center tus me nyuam lub ntsiab nyob rau hauv lub thawv. Cov align-items cuab yeej yog teem rau center 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 siv display: grid txhawm rau pab kom daim phiaj layout hom. Cov grid-template-columns cuab yeej yog teem rau repeat(2, 1fr) los tsim ob kab ntawm qhov dav sib npaug. Cov gap 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. Cov transition cuab yeej yog teem rau background-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!
  • 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, lub spin animation yog siv los tig lub thawv. Cov animation-fill-mode cuab yeej yog teem rau forwards 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!
  • 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 tsa background-color cov cuab yeej ntawm lub pob khawm, los ntawm kev siv lub var() 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 thiab blue.png, uas yog loaded siv lub background-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. Cov background-position cuab yeej yog siv los tswj qhov chaw ntawm txhua daim duab. Cov background-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;
    }

    tshwm sim

    Douglas Karr

    Douglas Karr yog CMO OpenINSIGHTS thiab tus founder ntawm lub Martech Zone. Douglas tau pab ntau ntau qhov kev vam meej MarTech startups, tau pab nyob rau hauv kev mob siab rau ntau tshaj $ 5 bil nyob rau hauv Martech nrhiav thiab kev nqis peev, thiab txuas ntxiv pab cov tuam txhab hauv kev siv thiab automating lawv cov kev muag khoom thiab kev lag luam cov tswv yim. Douglas yog tus paub thoob ntiaj teb kev hloov pauv digital thiab MarTech kws tshaj lij thiab hais lus. Douglas tseem yog tus sau phau ntawv Dummie phau ntawv qhia thiab phau ntawv ua lag luam.

    lwm yam khoom

    Rov qab mus rau sab saum toj
    Close

    Adblock nrhiav tau

    Martech Zone muaj peev xwm muab cov ntsiab lus no rau koj yam tsis muaj nqi vim tias peb tau txais peb lub vev xaib los ntawm kev tshaj tawm cov nyiaj tau los, koom nrog kev sib txuas, thiab kev txhawb nqa. Peb yuav txaus siab yog tias koj yuav tshem koj cov ad blocker thaum koj saib peb lub xaib.