{"id":24842,"date":"2022-09-14T21:00:35","date_gmt":"2022-09-14T21:00:35","guid":{"rendered":"https:\/\/mauriciofloreshtml.online\/?p=24842"},"modified":"2022-09-16T05:13:27","modified_gmt":"2022-09-16T05:13:27","slug":"estilos-para-1er-parcial","status":"publish","type":"post","link":"https:\/\/mauriciofloreshtml.online\/?p=24842","title":{"rendered":"ESTILOS PARA 1er PARCIAL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"24842\" class=\"elementor elementor-24842\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b8a140c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b8a140c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d1c2d4b\" data-id=\"d1c2d4b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18ed90c elementor-widget elementor-widget-text-editor\" data-id=\"18ed90c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Cabe mencionar que estos estilos todav\u00eda los estamos manejando dentro de los tags con la instrucci\u00f3n style por ejemplo un estilo para los parrafos se puede hacer con: &lt;p style=&#8221;estilo&#8221;&gt;&lt;\/p&gt; es muy importante que se utilicen las &#8220;comillas&#8221; adecuadas para que no marque error por ejemplo si ya estamos dentro de un estilo y necesitamos poner comillas se utiliza el caracter &#8216; &#8216; porque el dreamwaver coloca autom\u00e1ticamente las comillas regulares y esto va a causar error en su despliegue.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f15ad69 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f15ad69\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-652dd1e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"652dd1e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-7b2e73b\" data-id=\"7b2e73b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-efa9b08 elementor-widget elementor-widget-text-editor\" data-id=\"efa9b08\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>IMAGEN DE FONDO.<\/p><p>&lt;body style=&#8221;background-image: url(&#8216;images\/bkgnd1.jpg&#8217;);background-repeat:repeat-x;background-attachment:fixed; background-size: auto; background-size: cover;&#8221;&gt;<br \/>&lt;\/body&gt;<\/p><p>1ro. Pone una im\u00e1gen de fondo. con el estilo\u00a0<b>background-image<\/b>.<br \/>2ro. El estilo\u00a0<b>background-repeat:repeat-x<\/b>\u00a0hace que la im\u00e1gen se repita en lo horizontal;<br \/>3ro. El estilo\u00a0<b>background-attachment:fixed<\/b>; indica que la imagen se quede fija no importando lo largo del scroll de la p\u00e1gina.<br \/>4to. El estilo\u00a0<span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; color: var( --e-global-color-text );\"><b>background-size: cover;<\/b><\/span><span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; color: var( --e-global-color-text );\"> indica que la im\u00e1gen crezca para llenar el espacio del contenedor en este caso el body de nuestra p\u00e1gina.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-7f5a5cf\" data-id=\"7f5a5cf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ae51b35 elementor-widget elementor-widget-code-highlight\" data-id=\"ae51b35\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><body style=\"background-image: url('images\/bkgnd1.jpg');background-repeat:repeat-x;background-attachment:fixed; background-size: auto; background-size: cover;\">\n\t\n<\/body><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4f3e6d7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4f3e6d7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e67369f\" data-id=\"e67369f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-727676f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"727676f\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7250bfe elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7250bfe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-155ee0d\" data-id=\"155ee0d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bc3f159 elementor-widget elementor-widget-text-editor\" data-id=\"bc3f159\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;\">COLOR DE FONDO.<\/p><p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;\">&lt;body style=&#8221;background-color: #ff9600;&#8221;&gt;<br \/>&lt;\/body&gt;<\/p><p>1ro. Pone un color de fondo. con el estilo\u00a0<span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: bold;\">background-color<\/span>. el no. hexadecimal #ff9600 es el color naranja de INSPRA o el hexadecimal #908476 es el color Oro de la tipograf\u00eda del logo de INSPRA<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-ac8cb68\" data-id=\"ac8cb68\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fbfc94d elementor-widget elementor-widget-code-highlight\" data-id=\"fbfc94d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><body style=\"background-color: #ff9600;\">\n\t\n<\/body><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d0bb534 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d0bb534\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2c7459f\" data-id=\"2c7459f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-38ea6d8 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"38ea6d8\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-58950c6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"58950c6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-f0b97fb\" data-id=\"f0b97fb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-28ee4a7 elementor-widget elementor-widget-text-editor\" data-id=\"28ee4a7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;\">COLOR DE FONDO DEGRADADO.<\/p><p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;\">&lt;body style=&#8221;background: linear-gradient(to right, #ff9600, white);&#8221;&gt;<br \/>&lt;\/body&gt;<\/p><p>1ro. Pone un color de fondo. con el estilo\u00a0<span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: bold;\">background:linear-gradient(to direction, COLOR1, COLOR2);<\/span>.\u00a0<br \/><span style=\"font-size: 14px; color: var( --e-global-color-text );\">To direction indica de donde a donde va el degradado, por ejemplo <b>to right<\/b>, indica que va de izquierda a derecha, <b>to left <\/b>al contrario.<br \/><b>to bottom<\/b> va de arriba para abajo y <b>to top<\/b> va de abajo para arriba.\u00a0<br \/>El no. hexadecimal #ff9600 es el color naranja de INSPRA o el hexadecimal #908476 es el color Oro de la tipograf\u00eda del logo de INSPRA.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-9ff10b3\" data-id=\"9ff10b3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a520167 elementor-widget elementor-widget-code-highlight\" data-id=\"a520167\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><body style=\"background: linear-gradient(to right, #ff9600, white);\">\n<\/body><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0e2d076 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0e2d076\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1c3fa63\" data-id=\"1c3fa63\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7fd9909 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7fd9909\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b41fe05 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b41fe05\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-c642f6e\" data-id=\"c642f6e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c168666 elementor-widget elementor-widget-text-editor\" data-id=\"c168666\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; color: var( --e-global-color-text );\"><strong>Utilizando web fonts.<\/strong><\/span><\/p><p><span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; color: var( --e-global-color-text );\"><b><br \/><\/b>Para utilizar web fonts, es necesario invocar los archivos de las fuentes a su documento HTML.<br \/>Para ello se utiliza el tag &lt;link&gt; y se construye con el tag m\u00e1s la referencia (direcci\u00f3n URL) donde se encuentra el archivo a vincular a nuestro HTML<br \/><\/span><b>&lt;link href=&#8221;http:\/\/db.onlinewebfonts.com\/c\/5eedf6dd85c03d3b66892597b06a9492?family=Agenda&#8221; rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221;\/&gt;<\/b><\/p><p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal;\">En este caso la primera parte es la ruta o URL al archivo de la fuente AGENDA. junto con esa ruta indicamos el nombre de la familia para que podamos mandarla llama<span style=\"font-weight: 400; font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; color: var( --e-global-color-text );\">r m\u00e1s adelante en este caso nuestra family se llama Agenda y se declara al final del URL despu\u00e9s de un signo de interrogaci\u00f3n\u00a0 <\/span><span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; color: var( --e-global-color-text );\"><b>url&#8230;?family=Agenda<\/b><br \/>Las istrucciones rel=&#8221;stylesheet&#8221; y type=&#8221;text\/css&#8221; se refieren al tipo de documento a vincular y en este caso tienen que ver con nuestros estilos. y se ciera el tag con &gt;<\/span><\/p><p>Posteriormente se invoca a la fuente con el estilo <b>font-family<\/b><\/p><p><b>&lt;h1 style=&#8221;font-family: &#8216;Agenda&#8217;, sans-serif; font-size: 40px;&#8221;&gt;Dosis y Administraci\u00f3n&lt;\/h1&gt;<br \/><\/b><br \/>El documento puede tener varias fuentes y se controlan de la misma manera.<\/p><p><b>&lt;link href=&#8221;http:\/\/db.onlinewebfonts.com\/c\/d979624d1cb77d6523f9b3adc2bcef31?family=RotisSansSerif&#8221; rel=&#8221;stylesheet&#8221; type=&#8221;text\/css&#8221;\/&gt;<\/b><\/p><p><b>&lt;h2 style=&#8221;font-family: &#8216;RotisSansSerif&#8217;, sans-serif; font-size: 40px;&#8221;&gt;Dosis y Administraci\u00f3n&lt;\/h2&gt;<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-91609d0\" data-id=\"91609d0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1d90632 elementor-widget elementor-widget-code-highlight\" data-id=\"1d90632\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!doctype html>\n<html>\n<head>\n<link href=\"http:\/\/db.onlinewebfonts.com\/c\/5eedf6dd85c03d3b66892597b06a9492?family=Agenda\" rel=\"stylesheet\" type=\"text\/css\"\/><br>\n<link href=\"http:\/\/db.onlinewebfonts.com\/c\/d979624d1cb77d6523f9b3adc2bcef31?family=RotisSansSerif\" rel=\"stylesheet\" type=\"text\/css\"\/>\t\n<meta charset=\"UTF-8\">\n<title>Estilos para 1er. Parcial<\/title>\n<\/head>\n\n<body style=\"background: linear-gradient(to right, #ff9600, white);\">\n\t\n<h1 style=\"font-family: 'Agenda', sans-serif; font-size: 40px;\">Dosis y Administraci\u00f3n<\/h1>\n<h2 style=\"font-family: 'RotisSansSerif', sans-serif; font-size: 40px;\">Dosis y Administraci\u00f3n<\/h2>\n\t\n<\/body>\n\t\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-42ce192 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"42ce192\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b6d2c8c\" data-id=\"b6d2c8c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-32f1d08 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"32f1d08\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4b6ae20 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4b6ae20\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a27b4e3\" data-id=\"a27b4e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-08213cd elementor-widget elementor-widget-text-editor\" data-id=\"08213cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Men\u00fa fijo en la pantalla hecho con tabla.<\/b><br \/>Podemos crear nuestra barra de navegaci\u00f3n con una tabla y agregarle los siguientes estilos.<br \/>Adem\u00e1s de las dimensiones y los atributos de la linea el estilo <b>position:fixed; <\/b>nos indica que el elemento no va a ser afectado por el scroll de la p\u00e1gina.<br \/>Aunado a ello podemos posicionar la tabla con los estilos top y left que indican a que distancia en pixeles ubicaremos el elemento a partir de la parte superior del navegador con <b>top=0px; <\/b>indicamos que va a estar hasta arriba y con la opci\u00f3n <b>left:0px;<\/b> indicamos que se alinear\u00e1 al extremo izquierdo de la p\u00e1gina.<br \/><b>&lt;table width=&#8221;800&#8243; border=&#8221;0&#8243;\u00a0cellspacing=&#8221;0&#8243;<\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">\u00a0style=&#8221;position: fixed;top:0px; left:0px;&#8221;&gt;<\/b><\/p><p>El resto de la tabla se construye normalmente&#8230;<\/p><p><b><span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; color: var( --e-global-color-text );\">&lt;table width=&#8221;800&#8243; border=&#8221;0&#8243;\u00a0<\/span>cellspacing=&#8221;0&#8243;\u00a0<\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\"><span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; color: var( --e-global-color-text );\">style=&#8221;position: fixed;top:0px; left:0px;&#8221;&gt;<\/span><\/b><\/p><p><b>&lt;tbody&gt;<br \/><span style=\"font-size: 14px; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/span><span style=\"font-size: 14px; color: var( --e-global-color-text );\">\u00a0 \u00a0 \u00a0 \u00a0&lt;td&gt;BOTON1&lt;\/td&gt;<br \/><\/span><span style=\"font-size: 14px; color: var( --e-global-color-text );\">\u00a0 \u00a0 \u00a0 \u00a0&lt;td&gt;BOTON2&lt;\/td&gt;<br \/><\/span><span style=\"font-size: 14px; color: var( --e-global-color-text );\">\u00a0 \u00a0 \u00a0 \u00a0&lt;td&gt;BOTON3&lt;\/td&gt;<br \/><\/span><span style=\"font-size: 14px; color: var( --e-global-color-text );\">\u00a0 \u00a0 \u00a0 \u00a0&lt;td&gt;BOTON4&lt;\/td&gt;<br \/><\/span><\/b><span style=\"font-weight: bold; font-family: Roboto, sans-serif; font-size: 14px; font-style: normal;\">\u00a0 \u00a0 \u00a0 \u00a0&lt;td&gt;BOTON5&lt;\/td&gt;<\/span><b><span style=\"font-size: 14px; color: var( --e-global-color-text );\"><br \/><\/span><\/b><\/p><p><b><span style=\"font-size: 14px; color: var( --e-global-color-text );\">&lt;\/tr&gt;<br \/><\/span><span style=\"font-size: 14px; color: var( --e-global-color-text );\">&lt;\/tbody&gt;<br \/><\/span><span style=\"font-size: 14px; color: var( --e-global-color-text );\">&lt;\/table&gt;<\/span><\/b><\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e4d4bb4\" data-id=\"e4d4bb4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-23b7418 elementor-widget elementor-widget-code-highlight\" data-id=\"23b7418\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><table width=\"800\" border=\"0\" cellspacing=\"0\" style=\"position: fixed;top:0px; left:0px;\">\n\n<tbody>\n<tr>\n       <td style=\"background-color: #908476; color:white; padding:10px 10px 10px 10px;\">BOTON1<\/td>\n       <td style=\"background-color: #908476; color:white; padding:10px 10px 10px 10px;\">BOTON2<\/td>\n       <td style=\"background-color: #908476; color:white; padding:10px 10px 10px 10px;\">BOTON3<\/td>\n       <td style=\"background-color: #908476; color:white; padding:10px 10px 10px 10px;\">BOTON4<\/td>\n       <td style=\"background-color: #908476; color:white; padding:10px 10px 10px 10px;\">BOTON5<\/td>\n\n<\/tr>\n<\/tbody>\n<\/table><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1b9b17f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1b9b17f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cf06248\" data-id=\"cf06248\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ac53ea1 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"ac53ea1\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b728551 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b728551\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d72803a\" data-id=\"d72803a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6dd76bc elementor-widget elementor-widget-text-editor\" data-id=\"6dd76bc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Posici\u00f3n de los elementos.<\/strong><\/p><p>Para determinar la posicionde de una tabla por ejemplo. Podemos indicar dentro del style el estilo <strong>position: absolute;<\/strong> para indicar que la posici\u00f3n se basa respecto a toda la p\u00e1gina y podemos indicar la distancia en pixeles a partir de la parte superior y de la izquierda por ejemplo: <strong>top:200px; left:50px; <\/strong>en el caso de los dem\u00e1s elementos que ubiquemos dentro de nuestra composici\u00f3n.<br \/>Arriba indicamos el men\u00fa superior que queda fijo en la parte superior.<br \/>Si insertamos una nueva tabla aparecer\u00e1 debajo de la tabla fija y es necesario indicar que inicie en una posici\u00f3n que no sea tapada por el men\u00fa superior.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c85326 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8c85326\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2ae6836 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2ae6836\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-de8b75a\" data-id=\"de8b75a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18bbd85 elementor-widget elementor-widget-text-editor\" data-id=\"18bbd85\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Botones dentro de la barra de navegaci\u00f3n.<\/p><p>Los botones se definen con la tag &lt;button&gt;&lt;\/button&gt; por ejemplo el bot\u00f3n: Este es un bot\u00f3n se crea.<br \/>\u00a0<span style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400; color: var( --e-global-color-text );\">&lt;button&gt;Este es un bot\u00f3n&lt;\/button&gt;<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-360e7cb elementor-widget elementor-widget-button\" data-id=\"360e7cb\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Este es un bot\u00f3n<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf2ba27 elementor-widget elementor-widget-text-editor\" data-id=\"cf2ba27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A los botones se les pueden agregar estilos como por ejemplo<br \/><b>&lt;button style=&#8221;display:block, padding:10px 10px 10px 10px; background-color:orange; color:white;&#8221;&gt;Este es un bot\u00f3n&lt;\/button&gt;<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e36a97a elementor-widget elementor-widget-button\" data-id=\"e36a97a\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Este es un bot\u00f3n<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-0954bf3\" data-id=\"0954bf3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fe0af45 elementor-widget elementor-widget-code-highlight\" data-id=\"fe0af45\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp> <button>Este es un bot\u00f3n<\/button><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29723e0 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"29723e0\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-891947b elementor-widget elementor-widget-code-highlight\" data-id=\"891947b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><button style=\"display:block, padding:10px 10px 10px 10px; background-color:orange; color:white;\">Este es un bot\u00f3n<\/button><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6d67eac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6d67eac\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d0b561\" data-id=\"5d0b561\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-341ec72 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"341ec72\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8b98707 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8b98707\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-28f8361\" data-id=\"28f8361\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5c103e8 elementor-widget elementor-widget-text-editor\" data-id=\"5c103e8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Ejemplo de hiperv\u00ednculo a secciones dentro de la misma p\u00e1gina<\/strong><\/p><p>Todos los tags pueden tener un identificador \u00fanico por ejemplo un parrafo puede ser identificado de la siguiente manera:<\/p><p><strong>&lt;p id=&#8221;seccion1&#8243;&gt;Texto del parrafo&lt;\/p&gt;<\/strong><\/p><p>Para ese identificador se le pueden aplicar estilos espec\u00edficos o tambi\u00e9n hacer hiperv\u00ednculos dentro de una secci\u00f3n de la misma p\u00e1gina.<\/p><p>Con el tag <strong>&lt;a href=&#8221;url&#8221;&gt;&lt;\/a&gt;<\/strong><\/p><p>En este caso para hacer el v\u00ednculo interno se sustituye el url con el nombre del identificador ID. antecedido por un hashtag.<\/p><p><strong>&lt;a href=&#8221;#seccion1&#8243;&gt;&lt;img src=&#8221;cartel2.png&#8221; id=&#8221;seccion1&#8243;&gt;Este link me manda hasta abajo&lt;\/a&gt;<\/strong><\/p><p>\u00a0<\/p><p>En este ejemplo el link va a la secci\u00f3n seccion1<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-bfdb0ae\" data-id=\"bfdb0ae\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-757bb4a elementor-widget elementor-widget-code-highlight\" data-id=\"757bb4a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><body>\n<p id=\"seccion0\"><\/p>\n<a href=\"#seccion1\">Este link me manda hasta abajo<\/a><br>\n<a href=\"http:\/\/www.youtube.com\">Este link me manda a la pagina de youtube<\/a>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\n<br><br><br><br><br><br><br><br><br><br><br><br><br><br>\t\n<p id=\"seccion1\"><\/p>\n<a href=\"#seccion0\">Este link me manda hasta arriba<\/a>\t\t\n<\/body><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dd2ae3a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dd2ae3a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-be70912\" data-id=\"be70912\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-44cc843 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"44cc843\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f61196a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f61196a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-398ef31\" data-id=\"398ef31\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-74beb82 elementor-widget elementor-widget-text-editor\" data-id=\"74beb82\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;\"><span style=\"font-weight: bold;\">Men\u00fa LATERAL fijo en la pantalla hecho con tabla.<\/span><br \/>Podemos crear nuestra barra de navegaci\u00f3n con una tabla y agregarle los siguientes estilos.<br \/>Adem\u00e1s de las dimensiones y los atributos de la linea el estilo\u00a0<span style=\"font-weight: bold;\">position:fixed;\u00a0<\/span>nos indica que el elemento no va a ser afectado por el scroll de la p\u00e1gina.<br \/>Aunado a ello podemos posicionar la tabla con los estilos top y left que indican a que distancia en pixeles ubicaremos el elemento a partir de la parte superior del navegador con\u00a0<span style=\"font-weight: bold;\">top=0px;\u00a0<\/span>indicamos que va a estar hasta arriba y con la opci\u00f3n\u00a0<span style=\"font-weight: bold;\">left:0px;<\/span>\u00a0indicamos que se alinear\u00e1 al extremo izquierdo de la p\u00e1gina.<br \/><span style=\"font-weight: bold;\">&lt;table width=&#8221;300&#8243; border=&#8221;0&#8243;\u00a0cellspacing=&#8221;0&#8243;<\/span><span style=\"font-weight: bold; color: var( --e-global-color-text );\">\u00a0style=&#8221;position: fixed;top:0px; left:0px;&#8221;&gt;<\/span><\/p><p style=\"font-family: Roboto, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;\">El resto de la tabla se construye normalmente&#8230;<\/p><p><b>&lt;table width=&#8221;300&#8243; border=&#8221;0&#8243; cellspacing=&#8221;0&#8243; cellpadding=&#8221;0&#8243; style=&#8221;position: absolute;top:0px;left:0px;&#8221;&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tbody&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;th scope=&#8221;col&#8221;&gt;&lt;img src=&#8221;images\/logo_inspra1.png&#8221;&gt;&lt;\/th&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">\u00a0&lt;\/tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">\u00a0&lt;td style=&#8221;background-color: #ff9600; color:white;padding:10px 10px 10px 10px;&#8221;&gt;BOTON 1&lt;\/td&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">\u00a0&lt;\/tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;td style=&#8221;background-color: #ff9600; color:white;padding:10px 10px 10px 10px;&#8221;&gt;BOTON 2&lt;\/td&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;td style=&#8221;background-color: #ff9600; color:white;padding:10px 10px 10px 10px;&#8221;&gt;BOTON 3&lt;\/td&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;td style=&#8221;background-color: #ff9600; color:white;padding:10px 10px 10px 10px;&#8221;&gt;BOTON 4&lt;\/td&gt;<\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;td style=&#8221;background-color: #ff9600; color:white;padding:10px 10px 10px 10px;&#8221;&gt;BOTON 5&lt;\/td&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/tr&gt;<\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;td style=&#8221;background-color: #FF9600; height:1000px;&#8221;&gt;&amp;nbsp;&lt;\/td&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/tr&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/tbody&gt;<br \/><\/b><b style=\"font-family: inherit; font-style: inherit; color: var( --e-global-color-text );\">&lt;\/table&gt;<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a2d1a53\" data-id=\"a2d1a53\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eccbca1 elementor-widget elementor-widget-code-highlight\" data-id=\"eccbca1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"position: fixed;top:0px;left:0px;\">\n  <tbody>\n    <tr>\n      <th scope=\"col\"><img decoding=\"async\" src=\"images\/logo_inspra1.png\"><\/th>\n    <\/tr>\n    <tr>\n      <td style=\"background-color: #ff9600; color:white;padding:10px 10px 10px 10px;\">BOTON 1<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"background-color: #ff9600; color:white;padding:10px 10px 10px 10px;\">BOTON 2<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"background-color: #ff9600; color:white;padding:10px 10px 10px 10px;\">BOTON 3<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"background-color: #ff9600; color:white;padding:10px 10px 10px 10px;\">BOTON 4<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"background-color: #ff9600; color:white;padding:10px 10px 10px 10px;\">BOTON 5<\/td>\n    <\/tr>\n    <tr>\n      <td style=\"background-color: #FF9600; height:1000px;\">&nbsp;<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cabe mencionar que estos estilos todav\u00eda los estamos manejando dentro de los tags con la instrucci\u00f3n style por ejemplo un estilo para los parrafos se puede hacer con: &lt;p style=&#8221;estilo&#8221;&gt;&lt;\/p&gt; es muy importante que se utilicen las &#8220;comillas&#8221; adecuadas para que no marque error por ejemplo si ya estamos dentro de un estilo y necesitamos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,5],"tags":[],"class_list":["post-24842","post","type-post","status-publish","format-standard","hentry","category-webdesign","category-programaymaquetaweb"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts\/24842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24842"}],"version-history":[{"count":107,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts\/24842\/revisions"}],"predecessor-version":[{"id":24960,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts\/24842\/revisions\/24960"}],"wp:attachment":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}