Tässä artikkelissa esitellään tapa estää sisällön vuotaminen yli ja mahdollistaa vieritys CSS:n avulla.
Kuinka pysäyttää sisällön ylivuodon ja ottaa vierityksen käyttöön?
Sisällön tulvimisen estäminen on, että sisältö mahtuu sen säiliöön eikä vaikuta negatiivisesti verkkosivuston suorituskykyyn. Se voi helposti ymmärtää kontekstin ja parantaa käyttäjien saatavuutta. Tarkempia tietoja varten keskustelemme esimerkin kautta:
Vaihe 1: Ota käyttöön vieritys sisällön ylivuodolla
Aloita luomalla taulukko HTML-tiedoston sisään, jossa vieritystehoste käytetään. Oletetaan, että taulukko on jo luotu, ja se koostuu kuudesta rivistä ja seitsemästä sarakkeesta, ja taulukkoon on toimitettu joitakin valetietoja:
< pöytä >
< tr >
< th > Pää 1 < / th >
< th > Pää 2 < / th >
< th > Pää 3 < / th >
< th > Pää 4 < / th >
< th > Pää 5 < / th >
< th > Pää 6 < / th >
< th > Pää 7 < / th >
< / tr >
< tr >
< td > Rivi 1 < / td >
< td > Rivi 1 < / td >
< td > Rivi 1 < / td >
< td > Rivi 1 < / td >
< td > Rivi 1 < / td >
< td > Rivi 1 < / td >
< td > Rivi 1 < / td >
< / tr >
< tr >
< td > Rivi 2 < / td >
< td > Rivi 2 < / td >
< td > Rivi 2 < / td >
< td > Rivi 2 < / td >
< td > Rivi 2 < / td >
< td > Rivi 2 < / td >
< td > Rivi 2 < / td >
< / tr >
< tr >
< td > Rivi 3 < / td >
< td > Rivi 3 < / td >
< td > Rivi 3 < / td >
< td > Rivi 3 < / td >
< td > Rivi 3 < / td >
< td > Rivi 3 < / td >
< td > Rivi 3 < / td >
< / tr >
< tr >
< td > Rivi 4 < / td >
< td > Rivi 4 < / td >
< td > Rivi 4 < / td >
< td > Rivi 4 < / td >
< td > Rivi 4 < / td >
< td > Rivi 4 < / td >
< td > Rivi 4 < / td >
< / tr >< tr >
< td > Rivi 5 < / td >
< td > Rivi 5 < / td >
< td > Rivi 5 < / td >
< td > Rivi 5 < / td >
< td > Rivi 5 < / td >
< td > Rivi 5 < / td >
< td > Rivi 5 < / td >
< / tr >
< tr >
< td > Rivi 6 < / td >
< td > Rivi 6 < / td >
< td > Rivi 6 < / td >
< td > Rivi 6 < / td >
< td > Rivi 6 < / td >
< td > Rivi 6 < / td >
< td > Rivi 6 < / td >
< / tr >
< / pöytä >
Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos näyttää, että taulukon tiedot ovat vähemmän luettavassa muodossa ja taulukko hankkii paljon tilaa.
Vaihe 2: Ylivuoto- ja vieritystehosteen asettaminen Yllä olevassa koodinpätkässä: Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä: Verkkosivu osoittaa, että taulukko vie nyt vähemmän tilaa ja estää sisällön täyttymisen. Lisäksi vieritystehoste on otettu käyttöön. Huomautus : Asettamalla ' ylivuoto: auto ' tai ' ylivuoto: rullaa ”, käyttäjät voivat ottaa käyttöön ylitulvan sisällön vierityksen. Lisäksi ' ylivuoto piilotettu ” voidaan käyttää estämään ylivuoto kokonaan. Ominaisuuksia 'overflow-x' ja 'overflow-y' käytetään ohjaamaan ylivuotoa ja mahdollistamaan vieritys vaaka- ja pystyakselilla. Se estää sisällön ylivuodon ja mahdollistaa vierittämisen interaktiivisen responsiivisen suunnittelun tekemiseksi kaikille laitteille. Tämä artikkeli on osoittanut, kuinka estää sisällön vuotaminen yli ja mahdollistaa vieritys CSS:n avulla.
Sen jälkeen kääri pöytä vanhemman kanssa '
.ylivuoto {
leveys : 200 pikseliä ;
korkeus : 200 pikseliä ;
ylivuoto-x : auto ;
ylivuoto-y : auto ;
vierityskäyttäytyminen : sileä ;
}
Johtopäätös