Red de conocimiento informático - Problemas con los teléfonos móviles - Cómo ampliar la página de publicación del blog de WordPress

Cómo ampliar la página de publicación del blog de WordPress

Antes de comenzar, abra el control Xampp, la carpeta de temas, el navegador Firefox, el navegador IE y los archivos index.php y style.css.

Paso 1: Establece el ancho total de la página

Ahora necesitas colocar todo el contenido de tu tema (encabezado, contenedores, barras laterales y pies de página) en un ancho de In la etiqueta DIV que desea definir.

Hay dos formas de hacer esto, después de "body>?" agregar: lt; div id="wrapper">

Después de agregar: lt /divgt;

Ingrese el siguiente código en el archivo "style.css":

En CSS, el signo # se usa para ubicar elementos en la página según "id", mientras que el clic en Usado para localizar elementos en la página según la "clase". Si su código es ?

entonces debería usar ?wrapper en lugar de la etiqueta ?#wrapper?DIV.

Guarda los archivos "index.php" y "style.css". Actualice Firefox e Internet Explorer (presione F5) para ver los cambios.

Paso 2: Centrar automáticamente la página

Cambie "text-align: left;" en "body{}" a "text-align: center;".

¿Por qué? (Supongo que estás usando Firefox e Internet Explorer 6). Su diseño puede ser correcto para usted, pero puede no serlo para alguien que use una versión anterior de IE. ¿Recuerda haber configurado los márgenes izquierdo y derecho en autocentrado? Pero esto no funciona en todos los IE, por lo que "body{ text-align: center; }" es una solución para centrar el DIV "contenedor" en versiones anteriores de IE.

(Por cierto, los tamaños de texto son diferentes en Firefox e IE, lo solucionaremos más adelante).

Paso 3: establece el ancho y el diseño del título

p>

Deje que "Encabezado" flote hacia la izquierda y establezca su ancho en 750 px: (ingrese el ancho que tiene en mente)

Paso 4: Establezca el ancho y el diseño del contenedor

Deje que el "contenedor" flote hacia la izquierda con un ancho de 500 px: (ingrese el ancho que establezca)

Deje que el "título" flote hacia la izquierda con un ancho de 500 px: (ingrese el ancho ): (ingrese el ancho)

Paso 5: establezca el ancho y el diseño de la barra lateral

Deje que la "barra lateral" flote hacia la izquierda, con un ancho de 240 px, y agregue un color gris el fondo: (ingrese el ancho)

#ffffff es blanco y el fondo: #eeeeee;? Agreguemos un color de fondo a la barra lateral solo para ver la diferencia al agregar los 10 píxeles restantes.

Paso 6: Establece el ancho y el diseño del pie de página

Deja que el pie de página flote hacia la izquierda, sin contenido en los lados izquierdo y derecho, y con un ancho de 750 px: ( Escribe el ancho que tengas en mente)

¿Cuál es la diferencia entre los estilos de encabezado y pie de página? La respuesta es "pie de página {}" contiene "claro: ambos;". Con él, el pie de página no puede conectarse al contenido que se encuentra encima (como una barra lateral o un contenedor).

Guardar y actualizar el navegador.

Paso 7: Agrega los 10 píxeles restantes a la barra lateral

Agrega los 10 píxeles restantes de relleno a la barra lateral.

El CSS de la barra lateral ahora debería verse así:

Guarde y actualice el navegador para ver los 10 píxeles de espacio en blanco agregados a la izquierda de la barra lateral.

margen: 0 0 0 10px;? Su significado exacto es: el margen superior es 0, el margen derecho es 0, el margen inferior es 0 y el margen izquierdo es 10 píxeles. Cuando el tamaño es 0, no se requieren unidades de px.

Paso 8 (paso adicional): solucionar el error de márgenes dobles de IE

Internet Explorer tiene un error de márgenes dobles, por lo que en IE los márgenes de nuestra página son de 20 píxeles, y un margen de 20 píxeles rompa el diseño y empuje la barra lateral hacia la parte inferior de la página, porque un margen de 20 píxeles haría que el ancho combinado del contenedor y la barra lateral fuera de 760 px en lugar de 750 px. Su barra lateral ahora debería verse así:

Los archivos index.php y style.css ahora deberían coincidir con las coincidencias index-lesson-11.txt y style-lesson-11 que se encuentran en la carpeta fuente del tutorial. .