$\"\"$ <\/li>\n
T\u00edtulo OriginalEternal Sunshine of the Spotless Mind<\/small><\/li>\n
A\u00f1o2004<\/small><\/li>\n
Pa\u00edsU.S.A.<\/small><\/li>\n
DirectorMichel Gondry<\/small><\/li>\n
Reparto
Jim Carrey, Kate Winslet<\/small><\/li>\n<\/ul>\n<\/div>\n
\n
\n
Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relaci\u00f3n. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasi\u00f3n inicial. (FILMAFFINITY)<\/li>\n<\/ul>\n<\/div>\n
Trailer situado en Youtube.
\n<\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p style=\"text-align: justify;\">Lo que viene a continuaci\u00f3n es una interpretaci\u00f3n del excelente tutorial en ingl\u00e9s que encontr\u00e9 en la p\u00e1gina de <a title=\"Ver la versi\u00f3n original en ingl\u00e9s del tutorial\" href=\"http:\/\/net.tutsplus.com\/tutorials\/html-css-techniques\/how-to-create-a-slick-tabbed-content-area\/\" target=\"_blank\" rel=\"noopener noreferrer\">nettut+<\/a>, y esta vez voy evitar la t\u00e9cnica de resumen que caracteriza a este blog por respeto a la meticulosidad y paciencia que nos ha ofrecido su autor. Por supuesto, he procurado aportar algo yo tambi\u00e9n.<\/p>\n<p style=\"text-align: justify;\">Aqu\u00ed puedes ver el <a title=\"Ver el ejemplo de NetTut+\" href=\"http:\/\/nettuts.s3.amazonaws.com\/001_Tabbed\/site\/jQuery.html#\" target=\"_blank\" rel=\"noopener noreferrer\">Ejemplo de NetTut+<\/a> en acci\u00f3n.<\/p>\n<h6>Paso 1: crear una apariencia adecuada para las fichas<\/h6>\n<p>He descargado el psd del ejemplo para practicar, pero luego he creado una apariencia diferente en Photoshop. Aunque, como podr\u00e1n comprobar, la mayor parte del formato se consigue con los colores de fondo.<\/p>\n<h6>Paso 2: crear la estructura del fichero<\/h6>\n<p>1) Crear un div contenedor, lo que nos facilitar\u00e1 su manipulaci\u00f3n.<\/p>\n<p>2) Crear el encabezado, probablemente con una etiqueta de t\u00edtulo (h)<\/p>\n<p>3) Debajo hay que crear otro div que contenga todas las pesta\u00f1as y el contenido. Ser\u00e1 la que tenga el fondo gris oscuro (en el original).<\/p>\n<p>4) Los siguiente ser\u00e1 un div que contenga una lista desordenada en la que cada elemento (li) ser\u00e1 una pesta\u00f1a y sus enlaces <a> nos permitir\u00e1n configurar su apariencia, darles comportamiento de rollovers y cambiar su estado a on\/off.<\/p>\n<p>5) Finalmente crearemos div en los que estar\u00e1 el contenido de cada pesta\u00f1a, y lo mostraremos u ocultaremos dependiendo de qu\u00e9 pesta\u00f1a est\u00e9 activa. Todo quedar\u00eda de la siguiente manera:<\/p>\n<p>\u00a1Importante! Si no vez el c\u00f3digo, recarga la p\u00e1gina.<\/p>\n<pre class=\"brush: xml;\"><div>\r\n<h4>Heading<\/h4>\r\n <div>\r\n <ul>\r\n <li><A>Pesta\u00f1a<\/A><\/li>\r\n <li><A>Pesta\u00f1a<\/A><\/li>\r\n <li><A>Pesta\u00f1a<\/A><\/li>\r\n <\/ul>\r\n <div>Contenido Tab 1<\/div>\r\n <div>Contenido Tab 2<\/div>\r\n <div>Contenido Tab 3<\/div>\r\n<\/div><\/pre>\n<h6>Paso 3: crear el fondo en Photoshop<\/h6>\n<p style=\"text-align: justify;\">Yo he utilizado una superposici\u00f3n de motivo: polvo azul ( 128 x 128 ). Tambi\u00e9n he creado dos degradados, uno para los enlaces y otro para el fondo de la ficha, lo que crea un bonito efecto de sombra.<\/p>\n<p><img title=\"Polvo azul\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/fichas\/polvo_azul.jpg\" alt=\"polvo azul\" \/><br \/>\n<img title=\"Degradado_enlace\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/fichas\/tab_on.jpg\" alt=\"Degradado del Enlace\" \/><br \/>\n<img title=\"Degradado_fondo\" src=\"https:\/\/www.pcpolis.es\/blog\/imagenes\/fichas\/content_bottom.jpg\" alt=\"Degradado del Fondo\" \/><\/p>\n<h6>Paso 4: crear los ficheros <strong>fichas.html <\/strong>y <strong>estilos.css<\/strong><\/h6>\n<h6>fichas.html<\/h6>\n<p>La estructura del fichero html quedar\u00eda como sigue:<\/p>\n<pre class=\"brush: xml;\"><!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\r\n \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\">\r\n<head>\r\n\t<title>Ejemplo de fichas - Simple<\/title>\r\n\t<link rel=\"stylesheet\" href=\"estilos.css\" type=\"text\/css\" media=\"screen\" \/>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"tabbed_box_1\" class=\"tabbed_box\">\r\n\t<h4>Olv\u00eddate de m\u00ed<small>Ficha t\u00e9cnica<\/small><\/h4>\r\n <div class=\"tabbed_area\">\r\n\r\n <ul class=\"tabs\">\r\n <li><a href=\"\" id=\"tab_1\" class=\"active\">Fichas<\/a><\/li>\r\n <li><a href=\"\" id=\"tab_2\">Sinopsis<\/a><\/li>\r\n <li><a href=\"\" id=\"tab_3\">Trailer<\/a><\/li>\r\n <\/ul>\r\n\r\n <div id=\"content_1\" class=\"content\">Contenido de la Ficha 1<\/div>\r\n <div id=\"content_2\" class=\"content\">Contenido de la Ficha 2<\/div>\r\n <div id=\"content_3\" class=\"content\">Contenido de la Ficha 3<\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n<p style=\"text-align: justify;\">Estos son algunos aspectos a destacar sobre la estructura del c\u00f3digo:<\/p>\n<ol style=\"padding-left: 30px;\">\n<li>El t\u00edtulo se ha colocado en un elemento <small> cuyo contenido de texto siempre ser\u00e1 inferior en una unidad al tama\u00f1o del elemento que lo precede. Para un texto normal, equivaldr\u00eda a <Font size = \u201c-1\u201d><\/li>\n<li>Se le ha dado un id a los div para poder utilizarlos en la p\u00e1gina.<\/li>\n<li>Se le ha dado una clase al elemento <ul>.<\/li>\n<\/ol>\n<h6>estilos.css<\/h6>\n<p>Estos son algunos de los aspectos a tener en cuenta para los estilos.<\/p>\n<p>Hay que insistir que el m\u00e9todo de ir dando los estilos de afuera hacia adentro se debe a la forma en que funcionan las Hojas de Estilo en Cascada, es decir, nos aseguramos que cualquier estilo de los elementos interiores se sobrescriba y no a la inversa.<\/p>\n<address><strong>Estilos del T\u00edtulo<\/strong><br \/>\n<\/address>\n<ol>\n<li>Centraremos el div contenedor #tabbed_box d\u00e1ndole un ancho determinado y asignando a los m\u00e1rgenes izquierdo y derecho la propiedad: auto.<\/li>\n<li>Se ha dado estilo a la etiqueta h4 como parte de un div (.tabbed_box h4) y no directamente, teniendo en cuenta que puede cambiar en p\u00e1gina grandes. Se ha establecido su margen de fondo en 10 pix. Hay que tener en cuenta que muchos elementos tienen valores predeterminados y en el caso de la etiqueta h4 el margen de fondo es mayor que el que deseamos, por ello hay que especificarlo.<\/li>\n<li>Se le ha dado una posici\u00f3n relativa al elemento <small> para poder posicionarlo un poco m\u00e1s a la derecha y arriba. Su espacio entre letras se ha tenido que redefinir a 0, pues en caso contrario heredaria el espaciado -1 de la etiqueta h4.<\/li>\n<\/ol>\n<address><strong>Estilos de la Lista Desordenada<\/strong><br \/>\n<\/address>\n<ol>\n<li>Para los elementos de la lista desordenada, quitamos todos los paddings y margins otorg\u00e1ndoles un valor de cero. La propiedad \u2018inline\u2019 los mantendr\u00e1 a todos dispuestos en la misma l\u00ednea y no cada uno en una l\u00edna diferente, como corresponder\u00eda a la forma predeterminada de display: block. Tambi\u00e9n se eliminan los iconos que de manera predeterminada llevan todas las listas desordenadas.<\/li>\n<\/ol>\n<address><strong>Estilos de los enlaces de cada una de las tres pesta\u00f1as<\/strong><\/address>\n<ol>\n<li> Se han creado los estilos para los estados de: reposo, sobre y activo.<\/li>\n<li>En este paso se le dice a todos los elementos con la clase contenido que deben tener un fondo blanco, y se hacen invisibles los elementos que no est\u00e1n activos.<\/li>\n<\/ol>\n<p><strong>Nota.<\/strong><\/p>\n<p>Mas tarde, con el uso de JavaScript se alternar\u00e1n los estados visible y oculto de estos elementos con las propiedades display: block y display:none.<\/p>\n<address><strong>Otros estilos a destacar<\/strong><br \/>\n<\/address>\n<ol>\n<li>Para eliminar el borde sobrante en la parte inferior, se ha utilizando un pseudo-selector denominado last-clild ( \u00faltimo elemento hijo ).<\/li>\n<\/ol>\n<h2>C\u00f3digo JavaScript<\/h2>\n<p><span style=\"color: #ff6600;\">( sin JQuery )<\/span><\/p>\n<ol>\n<li>En primer lugar hay que crear un archivo javascrip con la funci\u00f3n o funciones que permitir\u00e1n ejecutar las acciones de ocultar y mostrar el contenido.<\/li>\n<p>La funci\u00f3n javascript que utilizamos es la siguiente:<\/p>\n<pre class=\"brush: jscript;\">function tabSwitch_2(active, number, tab_prefix, content_prefix) { \r\n\r\n for (var i=1; i < number+1; i++) {\r\n document.getElementById(content_prefix+i).style.display = 'none';\r\n document.getElementById(tab_prefix+i).className = '';\r\n }\r\n document.getElementById(content_prefix+active).style.display = 'block';\r\n document.getElementById(tab_prefix+active).className = 'active'; \r\n\r\n}<\/pre>\n<p>En esta funci\u00f3n se asume que tenemos un juego de pesta\u00f1as y su correspondiente contenido con un prefijo que ser\u00e1: tab_1, tab_2 … and content_1, content_2 …<\/p>\n<p>El primer argumento de la funci\u00f3n: active, hace referencia al elemento activo que debe mostrarse. El segundo argumento: number, se refiere al n\u00famero de pesta\u00f1as que est\u00e1n siendo usadas. Y el tercer y cuarto argumentos se refieren a los prefijos usados en los Ids de nuestros elementos del dom.<\/p>\n<p>– Eso significa que si queremos que haya dos ficheros, s\u00f3lo tendremos que cambiar los prefijos y podremos usar la misma funci\u00f3n todas las veces que queramos.<\/p>\n<li>Crear un enlace a este archivo en la cabecera del archivo html.<\/li>\n<li>Agregar c\u00f3digo javascript en cada uno de los tres enlaces contenidos en los elementos li de la siguiente manera:<\/li>\n<\/ol>\n<pre class=\"brush: jscript;\"> <ul class=\"tabs\">\r\n <li><a href=\"javascript:tabSwitch_2(1, 3, 'tab_', 'content_');\" id=\"tab_1\" class=\"active\">Fichas<\/a><\/li>\r\n <li><a href=\"javascript:tabSwitch_2(2, 3, 'tab_', 'content_');\" id=\"tab_2\">Sinopsis<\/a><\/li>\r\n <li><a href=\"javascript:tabSwitch_2(3, 3, 'tab_', 'content_');\" id=\"tab_3\">Trailer<\/a><\/li>\r\n <\/ul><\/pre>\n<p><span style=\"color: #ff6600;\">( JQuery )<\/span><\/p>\n<p>Podemos usar esta librer\u00eda para dar un poco m\u00e1s de animaci\u00f3n al fichero que hemos conseguido. Lo primero es ir al sitio oficial de <a title=\"Ir al Sitio Oficial de JQuery\" href=\"http:\/\/jquery.com\/\">JQuery<\/a> y descargar la \u00faltima versi\u00f3n.<\/p>\n<p>La librer\u00eda JQuery contiene una gran cantidad de funciones que permiten seleccionar grupos de elementos. Por ejemplo, si quisieramos seleccionar todos los enlaces (<a>) de una p\u00e1gina y hacer que desaparecieran con un efecto de deslizado hacia arriba, tendr\u00edamos que poner en la cabecera de la p\u00e1gina el siguiente codigo:<\/p>\n<pre class=\"brush: jscript;\"><script src=\"scripts\/jquery-1.2.3.min.js\"><\/script>\r\n\r\n<script>\r\n\r\n\/\/Cuando se cargue el Dto. ejecuta el contenido ...\r\n\r\n$(document).ready(function(){\r\n\r\n$(\"a\").slideUp();\r\n\r\n});\r\n\r\n<\/script><\/pre>\n<p>Colocando el c\u00f3digo anterior en la cabecera de nuestro documento podremos comprobar que todos los enlaces desaparecen con un efecto de deslizamiento hacia arriba.<\/p>\n<h6>Trabajo con los Selectores ( Pesta\u00f1as )<\/h6>\n<p>Despu\u00e9s de practicar, vamos a modificar el c\u00f3digo de nuestras pesta\u00f1as eliminando la parte de javascript y a\u00f1adiendo el atributo title y una clase m\u00e1s: tab. De esta manera podremos referirnos a todos los elementos que contengan la clase tab o cuyo id corresponda al atributo title.<\/p>\n<pre class=\"brush: xml;\"> <ul class=\"tabs\">\r\n <li><a href=\"#\" title=\"content_1\" class=\"tab active\">Ficha<\/a><\/li>\r\n <li><a href=\"#\" title=\"content_2\" class=\"tab\">Sinopsis<\/a><\/li>\r\n <li><a href=\"#\" title=\"content_3\" class=\"tab\">Trailer<\/a><\/li>\r\n <\/ul><\/pre>\n<p style=\"text-align: justify;\">Ahora, con estos dos elementos, se pueden utilizar todos los enlaces con la clase \u201ctab\u201d y se puede localizar cualquier elementos cuyo Id sea igual que el atributo title del enlace que haya sido pulsado. Necesitamos a\u00f1adir el enlace a la librer\u00eda en la cabecera de nuestra p\u00e1gina y a\u00f1adir una nueva funci\u00f3n a nuestro fichero javascript:<\/p>\n<pre class=\"brush: jscript;\"><script src=\"scripts\/jquery-1.2.3.min.js\"><\/script><\/pre>\n<p>Esta nueva funci\u00f3n, b\u00e1sicamente, lo que hace es ocultar todas las pesta\u00f1as cuando se carga el documento y dejar visible s\u00f3lo la que est\u00e1 activa:<\/p>\n<pre class=\"brush: jscript;\">\/\/ cuando el documento se cargue, ejecuta el contenido ...\r\n$(document).ready(function(){\r\n\r\n\/\/ cuando se pulsa un enlace\r\n$(\"a.tab\").click(function () {\r\n\r\n\/\/ desactiva todas las fichas\r\n$(\".active\").removeClass(\"active\");\r\n\r\n\/\/ activa la ficha seleccionada\r\n$(this).addClass(\"active\");\r\n\r\n\/\/ oculta los elementos con la clase 'content' con deslizamiento hacia arriba\r\n$(\".content\").slideUp();\r\n\r\n\/\/ Detecta el atributo 'title' de la ficha seleccionada y encuentra el elemento con el miso Id. Entonces lo muestra con un deslizamiento hacia abajo.\r\nvar content_show = $(this).attr(\"title\");\r\n$(\"#\"+content_show).slideDown();\r\n\r\n});\r\n\r\n});\r\n<\/script><\/pre>\n<p>Y con eso queda terminado nuestro ejemplo. En la p\u00e1gina de Jquery hay una <a title=\"Ir al Sitio de JQuery para ver otro ejemplo\" href=\"http:\/\/docs.jquery.com\/UI\/Tabs\" target=\"_blank\" rel=\"noopener noreferrer\">variante<\/a> para la construcci\u00f3n de un fichero que aporta sencillez y otra manera de conseguir los mismos resultados.<\/p>\n<p>Nos queda pendiente un ejemplo de fichero con las facilidades que nos brinda Dreamweaver, y la librer\u00eda Spry. Espero que hayas disfrutado del tutorial.<\/p>\n<p>A continuaci\u00f3n tienes el c\u00f3digo de mi ejemplo, var\u00eda sobre todo en los estilos, pues he tenido que adaptarlo a WordPress. Recuerda que el art\u00edculo original de <a title=\"Ver el art\u00edculo original, en ingl\u00e9s\" href=\"http:\/\/net.tutsplus.com\/tutorials\/html-css-techniques\/how-to-create-a-slick-tabbed-content-area\/\" target=\"_blank\" rel=\"noopener noreferrer\">Collis Ta’eed<\/a> est\u00e1 muy bien detallado.<\/p>\n<h6>Ver C\u00f3digo <a title=\"Pulse para ver el c\u00f3digo\" onClick=\"return hide('mostrar_ocultar');\" href=\"#\">(+\/-)<\/a><\/h6>\n<div id=\"mostrar_ocultar\">\n<pre class=\"brush: xml;\"><!DOCTYPE html PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d>\r\n<html xmlns=\u201dhttp:\/\/www.w3.org\/1999\/xhtml\u201d>\r\n<head>\r\n <meta http-equiv=\u201dContent-Type\u201d content=\u201dtext\/html; charset=utf-8\u2033 \/>\r\n <title>Ejemplo de Fichas con JQuery<\/title>\r\n \r\n <link rel=\u201dstylesheet\u201d href=\u201dfichas_estilos.css\u201d type=\u201dtext\/css\u201d media=\u201dscreen\u201d \/>\r\n \r\n <script src=\u201dscripts\/jquery-1.4.2.min.js\u201d><\/script>\r\n \r\n <script src=\u201dfichas_functions.js\u201d type=\u201dtext\/javascript\u201d><\/script>\r\n<\/head>\r\n<body>\r\n<div id=\u201dtabbed_box\u201d class=\u201dtabbed_box\u201d>\r\n <h4>Olv\u00eddate de M\u00ed<small>Ficha T\u00e9cnica<\/small><\/h4>\r\n <div class=\u201dtabbed_area\u201d>\r\n <ul class=\u201dtabs\u201d>\r\n <li><a href=\u201d#\u201d title=\u201dcontent_1\u2033 class=\u201dtab active\u201d>FICHA<\/a><\/li>\r\n <li><a href=\u201d#\u201d title=\u201dcontent_2\u2033 class=\u201dtab\u201d>Sinopsis<\/a><\/li>\r\n <li><a href=\u201d#\u201d title=\u201dcontent_3\u2033 class=\u201dtab\u201d>Trailer<\/a><\/li>\r\n <\/ul>\r\n <div id=\u201dcontent_1\u2033 class=\u201dcontent\u201d>\r\n <ul>\r\n <li><img src=\u201dimagenes\/olvidate_de_mi.jpg\u201d \/><\/li>\r\n <li>T\u00edtulo Original<small>Eternal Sunshine of the Spotless Mind<\/small><\/li>\r\n <li>A\u00f1o<small>2004<\/small><\/li>\r\n <li>Pa\u00eds<small>U.S.A.<\/small><\/li>\r\n <li>Director<small>Michel Gondry<\/small><\/li>\r\n <li>Reparto<small>Jim Carrey, Kate Winslet<\/small><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div id=\u201dcontent_2\u2033 class=\u201dcontent\u201d>\r\n <ul>\r\n <li>Joel (Jim Carrey) se queda asombrado y aturdido cuando se entera de que su novia Clementine (Kate Winslet) ha borrado de su cerebro los recuerdos de su tumultuosa relaci\u00f3n. Desesperado, Joel contacta con el inventor del proceso, el Dr. Howard Mierzwiak (Tom Wilkinson) para eliminar cualquier recuerdo de Clementine de su propia memoria.\r\n <P>Pero sucede que, mientras los recuerdos progresivamente desaparecen, Joel comienza a redescubrir su pasi\u00f3n inicial. (FILMAFFINITY)<\/P>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div id=\u201dcontent_3\u2033 class=\u201dcontent\u201d>\r\n <ul>\r\n <li>Trailer situado en Youtube, con subt\u00edtulos.<\/li>\r\n <li>\r\n <object width=\u201d425\u2033 height=\u201d344\u2033>\r\n <param name=\u201dmovie\u201d value=\u201dhttp:\/\/www.youtube.com\/v\/IVpd3iGszU0&hl=es_ES&fs=1&\u201d>\r\n <\/param>\r\n <param name=\u201dallowFullScreen\u201d value=\u201dtrue\u201d>\r\n <\/param>\r\n <param name=\u201dallowscriptaccess\u201d value=\u201dalways\u201d>\r\n <\/param>\r\n <embed src=\u201dhttp:\/\/www.youtube.com\/v\/IVpd3iGszU0&hl=es_ES&fs=1&\u201d type=\u201dapplication\/x-shockwave-flash\u201d allowscriptaccess=\u201dalways\u201d allowfullscreen=\u201dtrue\u201d width=\u201d425\u2033 height=\u201d344\u2033><\/embed>\r\n <\/object>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n<h6>estilos.css<\/h6>\n<pre class=\"brush: css;\">@charset \"utf-8\";\r\n\/* CSS Document *\/\r\n\r\nbody {\r\n\tbackground-image:url(imagenes\/fondo_2.jpg);\r\n\tmargin:40px;\r\n}\r\n\r\n\/* Centrar el contenido *\/\r\n#tabbed_box {\r\n\tmargin: 0px auto 0px auto;\r\n\twidth:500px;\r\n}\r\n\r\n\/* Encabezado *\/\r\n.tabbed_box h4 {\r\n\tfont-family:Arial, Helvetica, sans-serif;\r\n\tfont-size:23px;\r\n\tcolor:#ffffff;\r\n\tletter-spacing:-1px;\r\n\tmargin-bottom:10px;\r\n}\r\n\r\n.tabbed_box h4 small {\r\n\tcolor:#e3e9ec;\r\n\tfont-weight:normal;\r\n\tfont-size:9px;\r\n\tfont-family:Verdana, Arial, Helvetica, sans-serif;\r\n\ttext-transform:uppercase;\r\n\tposition:relative;\r\n\ttop:-4px;\r\n\tleft:6px;\r\n\tletter-spacing:0px;\r\n}\r\n\r\n\/* Elementos internos *\/\r\n.tabbed_area {\r\n\tborder:1px solid #494e52;\r\n\tbackground-color:#fff7b3;\r\n\tpadding:8px;\r\n}\r\n\r\n\/* Elementos de la lista *\/\r\nul.tabs {\r\n\tmargin:0px; padding:0px;\r\n}\r\n\r\nul.tabs li {\r\n\tlist-style:none;\r\n\tdisplay:inline;\r\n}\r\n\r\n\/* Estilos a los enlaces de la lista desordenada *\/\r\nul.tabs li a {\r\n\tbackground-color:#464c54;\r\n\tcolor:#FFFFCC;\r\n\tpadding:8px 14px 8px 14px;\r\n\ttext-decoration:none;\r\n\tfont-size:9px;\r\n\tfont-family:Verdana, Arial, Helvetica, sans-serif;\r\n\tfont-weight:bold;\r\n\ttext-transform:uppercase;\r\n\tborder:1px solid #464c54;\r\n}\r\nul.tabs li a:hover {\r\n\tbackground-color:#2f343a;\r\n\tborder-color:#2f343a;\r\n}\r\nul.tabs li a.active {\r\n\tbackground-color:#ffffff;\r\n\tcolor:#282e32;\r\n\tborder:1px solid #464c54;\r\n\tborder-bottom: 1px solid #ffffff;\r\n}\r\n\r\n\/* Estilos del contenido *\/\r\n.content {\r\n\tbackground-color:#ffffff;\r\n\tpadding:10px;\r\n\tborder:1px solid #464c54;\r\n}\r\n\r\n#content_2, #content_3 { display:none; }\r\n\r\nul.tabs {\r\n\tmargin:0px; padding:0px;\r\n\tmargin-top:5px;\r\n\tmargin-bottom:6px;\r\n}\r\n\r\n\/* Paso 13. Agregar algunos estilos al contenido *\/\r\n\t.content ul {\r\n\tmargin:0px;\r\n\tpadding:0px 20px 0px 20px;\r\n}\r\n.content ul li {\r\n\tlist-style:none;\r\n\tborder-bottom:1px solid #d6dde0;\r\n\tpadding-top:15px;\r\n\tpadding-bottom:15px;\r\n\tfont-size:14px;\r\n}\r\n.content ul li a {\r\n\ttext-decoration:none;\r\n\tcolor:#3e4346;\r\n}\r\n.content ul li small {\r\n\tcolor:#8b959c;\r\n\tfont-size:9px;\r\n\ttext-transform:uppercase;\r\n\tfont-family:Verdana, Arial, Helvetica, sans-serif;\r\n\tposition:relative;\r\n\tleft:10px;\r\n\ttop:0px;\r\n}\r\n\r\n.content ul li:last-child {\r\n\tborder-bottom:none;\r\n}\r\n\r\n\/* Paso 15. Im\u00e1genes para las pesta\u00f1as y el fondo *\/\r\nul.tabs li a {\r\n\tbackground-image:url(imagenes\/tab_off.jpg);\r\n\tbackground-repeat: repeat-x;\r\n\tbackground-position: top;\r\n}\r\nul.tabs li a.active {\r\n\tbackground-image:url(imagenes\/tab_on.jpg);\r\n\tbackground-repeat:repeat-x;\r\n\tbackground-position:top;\r\n}\r\n.content {\r\n\tbackground-image:url(imagenes\/content_bottom.jpg);\r\n\tbackground-repeat: repeat-x;\r\n\tbackground-position: bottom;\r\n}<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En este tutorial se muestra la manera de hacer fichas ( Slick Tabbed ) similares a las que se pueden hacer con Dreamweaver y la librer\u00eda Spry. En este caso la librer\u00eda que utilizaremos en primer lugar ser\u00e1 JQuery, pero lo importante es comprender la manera en que est\u00e1 construido este fichero y c\u00f3mo utiliza […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[29,22,21,30],"_links":{"self":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/259"}],"collection":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":7,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":698,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/posts\/259\/revisions\/698"}],"wp:attachment":[{"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pcpolis.es\/blog\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}