Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Diseño de Páginas WEB Con Cajas (DIV) y CSS

    Enviado por

    luis lima Hernandez
    82 visualizações18 páginas
    Paso a paso del diseño de paginas web.

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Paso a paso del diseño de paginas web.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    82 visualizações18 páginas

    Diseño de Páginas WEB Con Cajas (DIV) y CSS

    Enviado por

    luis lima Hernandez
    Paso a paso del diseño de paginas web.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 18

    DISEO DE PGINAS WEB CON CAJAS (<DIV>) Y C

    Maquetar con bloc de notas o sublime Text la siguiente pgina WEB y nombrarlo Inde

    <!DOCTYPE>
    <HTML>
    <HEAD>
    <TITLE>.::INICIO::.</TITLE>
    <LINK href="css/estilo.css" rel="stylesheet" type="text/css">
    </HEAD>
    <BODY>
    <DIV id="Global">
    <DIV id=cabecera"><h1>Pgina de Inicio</h1></DIV>
    <DIV id=navegacion">Aqu estar el menu</DIV>
    <DIV id=principal">Aqu se colocar el contenido</DIV>
    <DIV class=anuncios">Aqu se colocar un anuncio</DIV>
    <DIV id=pie">Aqu se colocar el pie de pgina</DIV>
    </DIV>
    </BODY>
    </HTML>
    Resultado
    En un archivo nuevo de bloc de notas colocar el cdigo siguiente y nombrarlo estilo.c

    body {
    background-color:#E2F47C;
    }

    #global{
    width: 900px;
    height: 900px;
    margin: 0 auto 0 auto;
    background-color: #FFBBBB;
    }

    Recuerden que todos los archivos de


    estilo .css se guardan en la carpeta CSS
    Resultado
    Agregar las siguientes etiquetas HTML en la caja de navegacin, dentro del archivo e

    #cabecera{
    width: 900px;
    margin: 0 auto 0 auto;
    background-color: #B40068;
    }

    h1 {
    text-align: center;
    margin: 0 auto 0 auto;
    font-family: Arial;
    }
    Resultado
    Agregar el siguiente cdigo para la caja de cabecera y el titulo que contiene, dentro d
    x.html

    <DIV id=navegacion">
    <ul>
    <li> <a href="http//:www.google.com.mx">Inicio</a></li>
    <li> <a href="">Opcin 2</a></li>
    <li> <a href="">Opcin 3</a></li>
    <li> <a href="">Opcion 4</a></li>
    <li> <a href="">Opcin 5</a></li>
    <li> <a href="">Opcin 6</a></li>
    </ul>
    </DIV>
    Resultado
    gregar el siguiente cdigo para la caja de navegacin y sus elementos , dentro del arc
    o.css

    #navegacion{
    width: 900px;
    margin: 0 auto 0 auto;
    background-color: #B4CD00;
    }

    #navegacion ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

    #navegacion li{
    float:left;
    }
    gregar el siguiente cdigo para la caja de navegacin y sus elementos , dentro del arc
    o.css

    #navegacion li a{
    display: block
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    #navegacion a:hover{
    background-color: #B4CD00;
    }
    Resultado
    5.- Agregar el siguiente cdigo para la caja de principal y sus elementos ,
    dentro del archivo estilo.css

    #principal{
    width: 750px;
    margin: 0 auto 0 auto;
    background-color: #FFCD68;
    float: left;
    }

    #principal p{
    text-align: justify;
    }

    ben agregar prrafos largos para ver el efecto, dentro del div
    Resultado
    Agregar el siguiente cdigo para la caja de anuncios , dentro del archivo estilo.css

    .anuncios{
    width: 150px;
    margin: 0 auto 0 auto;
    background-color: #B4FF68;
    float: right;
    }

    ebern colocar una imagen especificando su anchura en 150p


    de anuncios
    Resultado
    .- Agregar el siguiente cdigo para la caja de pie , dentro del archivo estilo.css

    #pie{
    width: 900px;
    margin: 0 auto 0 auto;
    background-color: #B4C355;
    float: left;
    }
    Resultado

    Você também pode gostar