Få HTML -bunntekst til å bli nederst på siden med en minimumshøyde, men ikke overlapp siden i CSS

Elias Krogh Svendsen
Få HTML -bunntekst til å bli nederst på siden med en minimumshøyde, men ikke overlapp siden i CSS
HTML tillater nettutviklere å legge til forskjellige komponenter for å lage en webside. Normalt er websider kategorisert i tre deler: header, kropp og bunntekst. “”Element inneholder vanligvis innledende innhold,””Er den siste delen av websiden som inneholder nettsteddetaljer eller brukerens detaljer, og“”Har hovedinnholdet på websiden.

Denne oppskrivningen vil undersøke:

  • Hvordan lage en bunntekst?
  • Hvordan få HTML -bunnteksten til å holde seg nederst på siden?

Hvordan lage en bunntekst?

For å lage en bunntekst kan brukere enten bruke en enkel “”Element eller et“" stikkord.

For en bedre unnfangelse, gå gjennom den oppgitte prosedyren.

Trinn 1: Sett inn overskrift

Først sett inn en overskrift ved å bruke en hvilken som helst overskriftskode fra "

" til "
”. For eksempel har vi brukt "

”Tag for å legge til et nivå én på overskriften.

Trinn 2: Lag “div” container

Deretter lager du en "div" -beholder ved hjelp av "" stikkord. Legg også til en "klasse" attributt og tilordne den navnet "hovedinnhold”.

Trinn 3: Lag en annen "div" -beholder

Nå, lag den neste “div”Container, og spesifiser“kropp”Som“id”Attributtverdi.

Trinn 4: Lag tabell

Bruk “

”Tag for å lage et bord i den andre beholderen. Deretter legger du til følgende elementer mellom "
" stikkord:

  • “
”Element brukt for å definere radene i tabellen.
  • “
    • ”Brukes til å legge til bordets overskrift.
  • “
    		• ”Definerer en datacelle inne i tabellen for å sette inn data.

    Trinn 5: Lag bunntekst

    Deretter lager du et bunntekst ved å sette inn en annen “div”Container og tilordne den en klasse”bunntekst”:

    Side bunntekst blir i bunnen










    Datavitenskapelige fag
    Operativsystem
    DBMS
    Datanettverk
    Prosjektledelse


    bunntekst

    Alternativt kan brukeren bruke HTML “”Element for å legge til bunntekst på HTML -siden:

    bunntekst

    Produksjon

    Hvordan få HTML -bunnteksten til å holde seg nederst på siden?

    For å få HTML-siden til å holde seg ved siden av siden, kan du prøve instruksjonene under nedenfor.

    Trinn 1: Style First “Div” Container

    Få tilgang til hoveddiv”Container ved å bruke klassen“.hovedinnhold”Og bruk de nedenfor-listede egenskapene til CSS:

    .hovedinnhold
    Posisjon: relativ;
    Min-Height: 80%;
    Bakgrunnsfarge: Bisque;
    tekst-align: sentrum;

    Her:

    • “posisjonEiendom som elementet er plassert i forhold til dens normale stilling.
    • “Min-Height”Brukes til å definere minimumshøyden på elementet.
    • “bakgrunnsfarge”Angir en bestemt farge på elementets bakside.
    • “Tekstalign”Eiendom brukes til å stille inn justering av teksten.

    Produksjon

    Trinn 2: Style Second “Div” Container

    Få tilgang til det andre “div” -elementet ved å bruke “id" Egenskap "#kropp”. Bruk deretter følgende CSS -egenskaper:

    #kropp
    polstring: 30px;
    Padding-Bottom: 60px;
    Margin: 10px 80px;

    Beskrivelsen av ovennevnte kode er gitt nedenfor:

    • “polstring”Brukes for å fordele plassen rundt elementinnholdet.
    • “Padding-Bottom”Brukes til å legge til bunnplass inne i elementet.
    • “margin”Angir plassen utenfor elementet.

    Produksjon

    Trinn 3: Style bunntekst

    Hvis du har brukt "”Tag, så kan det nås ved hjelp av tagnavnet. I dette scenariet har vi fått tilgang til "div”Container med klassen“.bunntekst”:

    .bunntekst
    Posisjon: Absolutt;
    Bunn: 0;
    Padding-top: 10px;
    tekst-align: sentrum;
    Bredde: 100%;
    Høyde: 80px;
    Bakgrunn: RGB (134, 240, 139);

    Etter tilgang til "Div" -beholderen, bruk følgende CSS -egenskaper:

    • Her, “posisjon”Eiendom brukes til å sette plassering av et element. Bunntekst vil bli satt på sideens bunn ved å sette verdien som "Absolutt”.
    • “bunn”Brukes til å sette et posisjonert elements vertikale posisjon. Denne egenskapen påvirker ikke ikke-posisjonerte elementer.
    • “Padding-top”Brukes bare til å legge til plass inne i elementet på toppsiden.
    • “bredde”Definerer bredden på et element.
    • “høyde”Definerer høyden på et element.
    • “bakgrunn”Brukes til å stille inn elementets bakgrunnsfarge.

    Det kan legges merke til at bunnteksten på siden er satt nederst på siden:

    Du har lært om å få sideboeren til å holde seg nederst på siden med minimumshøyden.

    Konklusjon

    For å få HTML -bunnteksten til å holde seg nederst på siden med minimumshøyden, lag først bunnteksten ved å bruke “”Tag eller“”Element i HTML. Få tilgang til bunnteksten i CSS med tagnavn eller tildelt klasse eller ID. Deretter bruker du “Posisjon: Absolutt”Eiendom for å få bunnteksten til å bli på siden. Dette innlegget har forklart metoden for å få HTML -bunnteksten til å bli nederst på siden.

    PHP
    Hvordan legge til en matrise i PHP?
    Arrays er viktig for å holde forskjellige typer data på ett sted. Følg denne artikkelen for å lære f...
    Alexander Sørlie
    Sqlite
    Hva er SQLite og SQLite3? Er de de samme?
    SQLite er et databasebibliotek og SQLite3 er kommandolinjegrensesnittet som er nødvendig for å utfør...
    Daniel Berntsen
    C skarp
    Hva er konstante variabler i C#
    En konstant variabel er en type variabel hvis verdi er satt under definisjonen og ikke kan endres gj...
    Erik Røed