Scribd Logo
Carica

Benvenuto in Scribd!

  • Css 8

    Caricato da

    MjMs
    35 visualizzazioni14 pagine
    Capítulo 8 Listas

    Titolo originale

    css 8

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Capítulo 8 Listas

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    35 visualizzazioni14 pagine

    Css 8

    Caricato da

    MjMs
    Capítulo 8 Listas

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 14

    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.

    html

    list-style-type

    list-style-type

    none

    list-style-type

    1 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    disc circle square

    decimal decimal-
    leading-zero lower-roman upper-roman armenian
    georgian

    lower-
    latin lower-alpha upper-latin upper-alpha lower-
    greek

    <ul style="list-style-type: square">


    <li>list-style-type: square</li>
    <li>Elemento</li>
    <li>Elemento</li>

    2 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    </ul>

    <ol style="list-style-type: lower-roman">


    <li>list-style-type: lower-roman</li>
    <li>Elemento</li>
    <li>Elemento</li>
    </ol>

    <ol style="list-style-type: decimal-leading-zero; padding


    -left: 2em;">
    <li>list-style-type: decimal-leading-zero</li>
    <li>Elemento</li>
    <li>Elemento</li>
    </ol>

    list-style-position

    list-style-position

    outside inside

    3 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    list-style-type list-
    style-position

    list-style-image

    list-style-image

    4 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    list-style-type

    list-style-image

    ul.ok { list-style-image: url("imagenes/ok.png"); }


    ul.flecha { list-style-image: url("imagenes/flecha.png");
    }
    ul.circulo { list-style-image: url("imagenes/circulo_roj
    o.png"); }

    list-style

    list-style

    5 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    list-style

    ||

    ul { list-style: none }

    ul { list-style: url("imagenes/cuadrado_rojo.gif") squar


    e; }

    <ul>

    <ul>
    <li><a href="#">Elemento 1</a></li>
    <li><a href="#">Elemento 2</a></li>
    <li><a href="#">Elemento 3</a></li>
    <li><a href="#">Elemento 4</a></li>
    <li><a href="#">Elemento 5</a></li>
    <li><a href="#">Elemento 6</a></li>
    </ul>

    6 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    ul.menu { width: 180px; }

    7 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;
    }

    ul.menu {
    border: 1px solid #7C7C7C;
    border-bottom: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;
    }
    ul.menu li {
    background: #F4F4F4;
    border-bottom: 1px solid #7C7C7C;

    8 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    border-top: 1px solid #FFF;


    }

    <li>

    ul.menu li a {
    color: #333;
    display: block;
    padding: .2em 0 .2em .5em;
    text-decoration: none;
    }

    9 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    <ul>
    <li><a href="#">Elemento 1</a></li>
    <li><a href="#">Elemento 2</a></li>
    <li><a href="#">Elemento 3</a></li>
    <li><a href="#">Elemento 4</a></li>
    <li><a href="#">Elemento 5</a></li>
    </ul>

    10 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    ul.menu {
    background: #F4F4F4;
    border: 1px solid #7C7C7C;
    list-style: none;
    margin: 0;
    padding: 0;
    }

    ul.menu li a {
    color: #333;
    display: block;
    padding: .3em;
    text-decoration: none;
    }

    20%

    float

    ul.menu li {
    float: left;

    11 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    width: 20%;
    }

    <ul>

    overflow: hidden;
    <ul>

    ul.menu {
    overflow: hidden;
    }

    ul.menu li a {
    border-left: 1px solid #FFF;
    border-right: 1px solid #7C7C7C;
    }

    <ul>
    <li><a href="#">Elemento 1</a></li>
    <li><a href="#">Elemento 2</a></li>
    <li><a href="#">Elemento 3</a></li>
    <li><a href="#">Elemento 4</a></li>
    <li><a href="#" style="border-right: none">Elemento 5</
    a></li>

    12 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    </ul>

    ul.menu {
    background: #F4F4F4;
    border: 1px solid #7C7C7C;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

    ul.menu li {
    float: left;
    width: 20%;
    }

    ul.menu li a {
    border-left: 1px solid #FFF;
    border-right: 1px solid #7C7C7C;
    color: #333;
    display: block;
    padding: .3em;
    text-decoration: none;
    }

    :hover :active

    13 de 14 30/10/2019 22:16
    Listas | CSS 2.1 https://www.arkaitzgarro.com/css2/capitulo-8.html

    14 de 14 30/10/2019 22:16

    Potrebbero piacerti anche