Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Estiloscss

    Cargado por

    Ansdrub Josuath Suarez
    14 vistas12 páginas

    Título original

    estiloscss

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    14 vistas12 páginas

    Estiloscss

    Cargado por

    Ansdrub Josuath Suarez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 12

    Diseños de páginas utilizando CSS - Lic.

    Jonathán Moreno - Páginas Web

    <html xmlns="http://www.w3.org/1999/xhtml"><head>

    <meta http-equiv="Content-Type" content="text/html;


    charset=iso-8859-1">
    <title>Diseño 1</title>
    <style type="text/css">

    body {
    width:750px;
    margin:0 auto;
    margin-top:30px;
    }

    /* ----- Encabezado ----- */

    #encabezado {
    width:750px;
    height:150px;
    background-color:#333333;
    }

    /* ----- Contenido ----- */

    #contenido {
    width:750px;
    background-color:#333333;
    margin-top:10px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    }

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    /* ----- Pie de pagina ----- */

    #pie {
    width:750px;
    height:100px;
    background-color:#333333;
    margin-top:10px;
    }
    </style>
    </head><body>
    <div id="encabezado">
    </div>
    <div id="contenido">
    </div>
    <div id="pie">
    </div>
    </body></html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Diseño 2</title>
    <style type="text/css">

    body {
    width:750px;
    margin:0 auto;
    margin-top:30px;
    }

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    /* ----- Encabezado ----- */

    #encabezado {
    width:750px;
    height:150px;
    background-color:#333333;
    }

    /* ----- barra navegacion ----- */

    #barra {
    width:750px;
    height:40px;
    background-color:#333333;
    margin-top:10px;

    /* ----- Contenido ----- */

    #contenido {
    width:750px;
    min-height:450px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:450px; /* for IE5.x and IE6 */background-
    color:#333333;
    margin-top:10px;
    }

    /* ----- Pie de página ----- */

    #pie {
    width:750px;
    height:100px;
    background-color:#333333;
    margin-top:10px;

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    }
    </style>
    </head>
    <body>
    <div id="encabezado">
    </div>
    <div id="barra">
    </div>
    <div id="contenido">
    </div>
    <div id="pie">
    </div>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Diseño 3</title>
    <style type="text/css">

    body {
    width:750px;
    margin:0 auto;
    margin-top:30px;
    }

    /* ----- Encabezado ----- */

    #encabezado {
    width:750px;

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    height:150px;
    background-color:#333333;
    }

    /* ----- menu ----- */

    #menu {
    width:200px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    background-color:#333333;
    float:left;
    }

    /* ----- contenido ----- */

    #contenido {
    margin-left:210px;
    width:540px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    background-color:#333333;
    margin-top:10px;
    }

    /* ----- pie de pagina ----- */

    #pie {
    margin-top:10px;
    width:750px;
    height:100px;
    background-color:#333333;
    }
    </style>
    </head>
    <body>

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    <div id="encabezado">
    </div>
    <div id="menu">
    </div>
    <div id="contenido">
    </div>

    <div id="pie">
    </div>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Diseño 4</title>
    <style type="text/css">
    body {
    width:750px;
    margin:0 auto;
    margin-top:30px;
    }

    /* ----- encabezado ----- */

    #encabezado {
    width:750px;
    height:150px;
    background-color:#333333;
    }

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    /* ----- menu ----- */

    #menu {
    width:200px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    background-color:#333333;
    float:right;
    }

    /* ----- Contenido----- */

    #contenido {
    width:540px;
    min-height:500px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:500px; /* for IE5.x and IE6 */
    background-color:#333333;
    margin-top:10px;
    }

    /* ----- pie de pagina ----- */

    #pie {
    width:750px;
    height:100px;
    background-color:#333333;
    margin-top:10px;
    }
    </style>
    </head>
    <body>
    <div id="encabezado">
    </div>
    <div id="menu">
    </div>

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    <div id="contenido">
    </div>

    <div id="pie">
    </div>
    </body>
    </html>

    Diseño en toda la pantalla (Codigo)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Diseño expandido</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">

    body{
    background-color:#dc8;
    font-size:16px;
    margin:0;
    padding:0;
    }

    #encabezado{
    background-color:#333;
    height:150px;
    }

    #contenido {
    background-color:#eec;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:650px; /* for IE5.x and IE6 */
    }

    #pie {
    clear:both;
    background-color:#333;
    height:100px;
    }
    </style>
    </head>
    <body>
    <div id="encabezdo">
    </div>

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    <div id="contenido">
    </div>
    <div id="pie">
    </div>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"


    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Diseño expandido con barra horizontal</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">

    body{
    background-color:#dc8;
    font-size:16px;
    margin:0;
    padding:0;
    }

    #encabezado{
    background-color:#333;
    height:150px;
    }

    #barra{
    width:100%;
    background-color:#dc8;
    height:50px;
    }

    #contenido {
    background-color:#eec;
    min-height:600px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:600px; /* for IE5.x and IE6 */
    }

    #pie {
    clear:both;
    background-color:#333;
    height:100px;
    }
    </style>
    </head>
    <body>

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    <div id="encabezado">
    </div>
    <div id="barra">
    </div>
    <div id="contenido">
    </div>
    <div id="pie">
    </div>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"


    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Diseño expandido con menu izquierdo</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">
    body{
    background-color:#dc8;
    font-size:16px;
    margin:0;
    padding:0;
    }

    #encabezado{
    background-color:#333;
    height:150px;
    }

    #menuizq{
    float:left;
    width:200px;
    background-color:#dc8;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:650px; /* for IE5.x and IE6 */
    }

    #contenido {
    margin-left:200px;
    background-color:#eec;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:650px; /* for IE5.x and IE6 */
    }

    #pie {

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    clear:both;
    background-color:#333;
    height:100px;
    }
    </style>
    </head>
    <body>
    <div id="encabezdo">
    </div>
    <div id="menuizq">
    </div>
    <div id="contenido">
    </div>
    <div id="pie">
    </div>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"


    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Diseño expandido con menu derecho</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <style type="text/css">
    body{
    background-color:#dc8;
    font-size:16px;
    margin:0;
    padding:0;
    }

    #encabezado{
    background-color:#333;
    height:150px;
    }

    #menuder{
    float:right;
    width:200px;
    background-color:#dc8;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:650px; /* for IE5.x and IE6 */
    }

    #contenido {
    margin-right:200px;

    Códigos CSS | Páginas Web


    Diseños de páginas utilizando CSS - Lic. Jonathán Moreno - Páginas Web

    background-color:#eec;
    min-height:650px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:650px; /* for IE5.x and IE6 */
    }

    #pie {
    clear:both;
    background-color:#333;
    height:100px;
    }
    </style>
    </head>
    <body>
    <div id="encabezado">
    </div>
    <div id="menuder">
    </div>
    <div id="contenido">
    </div>
    <div id="pie">
    </div>
    </body>
    </html>

    Códigos CSS | Páginas Web

    También podría gustarte