Mens du lager en hvilken som helst webapplikasjon, må nettsteddesignen være visuelt attraktivt og engasjerende. Flere CSS-egenskaper kan brukes til å designe websider, inkludert "overgang", "animasjon", "grense", "bakgrunn-img" og mange flere. Minimums- og maksimumshøyder kan spesifisere elementets overgang. Det er imidlertid ikke tid til en overgang når "Høyde: Auto”.

Dette innlegget vil oppgi:

• Hvordan du legger til liste-elementer i en "div”Container?
• Hvordan overgangshøyde 0; til høyde auto; Bruke CSS?

Hvordan legge til liste-elementer i en "div" -beholder?

Prøv ut den gitte trinn-for-trinn-prosessen for å legge til listede data i en "div”Container.

Trinn 1: Lag en "div" -beholder

Først må du lage en "div" -beholder ved å bruke "”Element og sette inn et“klasse" Egenskap "Main-div”.

Trinn 2: Sett inn en overskrift

Deretter setter du inn en overskrift ved hjelp av “

”Tag som brukes til å legge til en overskrift på nivå en.

Trinn 3: Opprett dataliste

Bruk “

”Tag for å opprette den uordnede listen i beholderen. Også tilordne den en ID "Liste-element”. Etter det, legg til tekst i form av en liste ved hjelp av "
• " stikkord. “
• ”Element brukes til å representere et element i en liste:
  
  

  Lag en liste over fag

  
  
  
  
  • Engelsk
  
  
  • Informatikk
  
  
  • Matte
  
  
  • Vitenskap
  
  
  • Sosiale studier
  
  
  
  

  Produksjon

  Hvordan overgangshøyde 0; til høyde auto; Bruke CSS?

  Å overføre elementets høyde fra høyden “0" til "bil”Bruk CSS, følg trinnene nedenfor.

  Trinn 1: Stil “Div” container og vareliste

  Få tilgang til div “klasse”Ved hjelp av klassenavnet”.hovedmeny”Og liste ved hjelp av den tildelte ID”#Liste-artikler”. Bruk deretter de nedenfor-børsnoterte egenskapene:

  .Main-menu #liste-elementer
  Maks-høyde: 0;
  Overgang: maksimal høyde 0.12s Easy-Out;
  overløp: skjult;
  Bakgrunn: #C1D7F5;
  Border-stil: dobbelt;
  Margin: 0px 50px;
  

  Her:

  • “maksimal”Brukes til å sette maksimal høyde på et element. Det stopper høydenegenskapens benyttede verdi fra å øke over maksimal høyde. I dette uttalte scenariet settes max -verdien som "0”.
  • “overgang”I CSS tillater brukere brukere for å endre eiendomsverdier lett for en bestemt varighet.
  • “flyte”Brukes til å definere oppførselen til et element når elementinnholdet strømmer over. For å gjøre det settes verdien av denne egenskapen som "skjult”.
  • “bakgrunn”Eiendom brukes til å stille inn fargen på elementets bakside.
  • “grensestil”Eiendom bestemmer stilen for den definerte grensen.
  • “margin”Tildeler et rom utenfor den definerte grensen.

  Produksjon

  Trinn 2: Bruk “Hover” pseudoklasse

  Å bruke “sveve”Effekt på listen, tilgang først“ Div ”-elementet etter klasse“ Main-Div ”langs“:sveve”Pseudoklasse. Deretter spesifiser "maksimal”Og“overgang”Egenskaper for å sette sveveeffekt:

  .Main-menu: Hold #List-Items
  Overgang: maksimal høyde 0.20-talls letthet;
  Maks-høyde: 400px;
  

  For eksempel "overgang”Eiendomsverdien er satt som“maksimalt 0.20s”Og“maksimal”Er satt som“400px”.

  Produksjon

  Vi har lært deg hvordan du kan overføre høyde "0" til "bil”Bruke CSS.

  Konklusjon

  For å overføre høyden “0" til "bil”Ved å bruke CSS, først, oppretter du en“ div ”-beholder og legger til en liste ved å bruke“

  ”. Spesifiser deretter elementet i listen ved å bruke "
  • " stikkord. Deretter får du tilgang til listeelementet og bruk CSS -egenskaper "maksimal" som "0”Og“overgang" som "0.12s”. Etter det, bruk ":sveve”Pseudoklasse og bruk egenskapene“ Max-Height ”og“ Overgang ”. Denne opplæringen demonstrerte metoden for å overføre høyden fra 0 til auto ved bruk av CSS.