{"id":1360,"date":"2024-08-01T19:14:45","date_gmt":"2024-08-01T17:14:45","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1360"},"modified":"2024-08-01T19:14:46","modified_gmt":"2024-08-01T17:14:46","slug":"50-diseno-del-sitio-web-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/50-diseno-del-sitio-web-css\/","title":{"rendered":"50. Dise\u00f1o del sitio web CSS"},"content":{"rendered":"\n

Un sitio web a menudo se divide en encabezados, men\u00fas, contenido y un pie de p\u00e1gina:<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

Header<\/h2>\n\n\n\n

Un encabezado<\/strong> (header<\/strong>) generalmente se encuentra en la parte superior del sitio web (o justo debajo del men\u00fa de navegaci\u00f3n superior). A menudo contiene un logotipo o el nombre del sitio web:<\/p>\n\n\n\n

.header {\n  background-color: #F1F1F1;\n  text-align: center;\n  padding: 20px;\n}<\/pre>\n\n\n\n
Barra de navegaci\u00f3n<\/h2>\n\n\n\n
Una barra de navegaci\u00f3n<\/strong> contiene una lista de enlaces para ayudar a los visitantes a navegar por su sitio web.<\/p>\n\n\n\n
\/* The navbar container *\/\n.topnav {\n  overflow: hidden;\n  background-color: #333;\n}\n\n\/* Navbar links *\/\n.topnav a {\n  float: left;\n  display: block;\n  color: #f2f2f2;\n  text-align: center;\n  padding: 14px 16px;\n  text-decoration: none;\n}\n\n\/* Links - change color on hover *\/\n.topnav a:hover {\n  background-color: #ddd;\n  color: black;\n}<\/pre>\n\n\n\n
Contenido<\/h2>\n\n\n\n
El dise\u00f1o de esta secci\u00f3n a menudo depende de los usuarios objetivo. El dise\u00f1o m\u00e1s com\u00fan es uno (o combinarlos) de los siguientes:<\/p>\n\n\n\n
    \n
  • 1 columna (a menudo se usa para navegadores m\u00f3viles)<\/li>\n\n\n\n
  • 2 columnas (a menudo se usa para tabletas y computadoras port\u00e1tiles)<\/li>\n\n\n\n
  • Dise\u00f1o de 3 columnas (solo se usa para escritorios)<\/li>\n<\/ul>\n\n\n\n
    Crearemos un dise\u00f1o de 3 columnas y lo cambiaremos a un dise\u00f1o de 1 columna en pantallas m\u00e1s peque\u00f1as:<\/p>\n\n\n\n
    \/* Crea tres columnas iguales que floten una al lado de la otra *\/\n.column {\n  float: left;\n  width: 33.33%;\n}\n\n\/* Borrar Floats despu\u00e9s de las columnas *\/\n.row:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n\n\/* Dise\u00f1o responsive: hace que las tres columnas se apilen una encima de la otra.\nuno al lado del otro en pantallas m\u00e1s peque\u00f1as (600 px de ancho o menos) *\/\n@media screen and (max-width: 600px) {\n  .column {\n    width: 100%;\n  }\n}<\/pre>\n\n\n\n
    Ejm completo<\/h2>\n\n\n\n
    Veamos la sintaxis que vamos a utilizar<\/p>\n\n\n\n
    <!DOCTYPE html>
    <html lang=\"en\">
      <head>
        <title>CSS Website Layout<\/title>
        <meta charset=\"utf-8\" \/>
        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>
        <style>
          * {
            box-sizing: border-box;
          }

          body {
            margin: 0;
          }

          \/* Style the header *\/
          .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
          }

          \/* Style the top navigation bar *\/
          .topnav {
            overflow: hidden;
            background-color: #333;
          }

          \/* Style the topnav links *\/
          .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
          }

          \/* Change color on hover *\/
          .topnav a:hover {
            background-color: #ddd;
            color: black;
          }

          \/* Create three equal columns that floats next to each other *\/
          .column {
            float: left;
            width: 33.33%;
            padding: 15px;
          }

          \/* Clear floats after the columns *\/
          .row:after {
            content: \"\";
            display: table;
            clear: both;
          }

          \/* Responsive layout - makes the three columns stack on top of each other instead of next to each other *\/
          @media screen and (max-width: 600px) {
            .column {
              width: 100%;
            }
          }
        <\/style>
      <\/head>
      <body>
        <div class=\"header\">
          <h1>Header<\/h1>
          <p>Resize the browser window to see the responsive effect.<\/p>
        <\/div>

        <div class=\"topnav\">
          <a href=\"#\">Link<\/a>
          <a href=\"#\">Link<\/a>
          <a href=\"#\">Link<\/a>
        <\/div>

        <div class=\"row\">
          <div class=\"column\">
            <h2>Column<\/h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit
              amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget
              elementum magna tristique. Quisque vehicula, risus eget aliquam
              placerat, purus leo tincidunt eros, eget luctus quam orci in velit.
              Praesent scelerisque tortor sed accumsan convallis.
            <\/p>
          <\/div>

          <div class=\"column\">
            <h2>Column<\/h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit
              amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget
              elementum magna tristique. Quisque vehicula, risus eget aliquam
              placerat, purus leo tincidunt eros, eget luctus quam orci in velit.
              Praesent scelerisque tortor sed accumsan convallis.
            <\/p>
          <\/div>

          <div class=\"column\">
            <h2>Column<\/h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit
              amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget
              elementum magna tristique. Quisque vehicula, risus eget aliquam
              placerat, purus leo tincidunt eros, eget luctus quam orci in velit.
              Praesent scelerisque tortor sed accumsan convallis.
            <\/p>
          <\/div>
        <\/div>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Columnas desiguales<\/h2>\n\n\n\n
    El contenido principal es la parte m\u00e1s grande e importante de su sitio. Es com\u00fan con anchos de columna desiguales, por lo que la mayor parte del espacio se reserva para el contenido principal. El contenido lateral (si lo hay) se usa a menudo como una navegaci\u00f3n alternativa o para especificar informaci\u00f3n relevante para el contenido principal. Cambia los anchos a tu gusto, solo recuerda que debe sumar 100% en total:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    .column {\n  float: left;\n}\n\n\/* Left and right column *\/\n.column.side {\n  width: 25%;\n}\n\n\/* Middle column *\/\n.column.middle {\n  width: 50%;\n}\n\n\/* Responsive layout - makes the three columns stack on top of each other instead of next to each other *\/\n@media screen and (max-width: 600px) {\n  .column.side, .column.middle {\n    width: 100%;\n  }\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
    Un sitio web a menudo se divide en encabezados, men\u00fas, contenido y un pie de p\u00e1gina:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":49,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1360","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Un sitio web a menudo se divide en encabezados, men\u00fas, contenido y un pie de p\u00e1gina:","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1360"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1360\/revisions"}],"predecessor-version":[{"id":1363,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1360\/revisions\/1363"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}