Latest web development tutorials

diseño HTML

diseño de página para mejorar el aspecto del sitio es muy importante.

Por favor, diseñar cuidadosamente su diseño de página.

Ejemplos

ejemplos en línea

diseño de página utilizando el elemento <div>
Como utilizar el elemento <div> para el diseño.

diseño de la página Uso elemento <table>
Cómo utilizar el elemento <table> para el diseño.

La disposición del sitio

Mayoría de los sitios de contenido en una pluralidad de columnas (como una revista o de un periódico).

La mayoría de los sitios pueden utilizar los <div> o <table> elementos para crear varias columnas. CSS se utiliza para posicionar los elementos, o crear un fondo de colores y apariencia de la página.

lámpara Aunque podemos usar el código de tabla HTML para diseñar un bello diseño, pero la etiqueta de la tabla no se recomienda para su uso como una herramienta de diseño - no es una tabla de herramientas de diseño.

Disposición HTML - Uso elemento <div>

elemento div es un elemento a nivel de bloque utilizado para agrupar los elementos HTML.

El siguiente ejemplo utiliza cinco elementos div para crear el diseño de varias columnas:

Ejemplos

<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Este tutorial (w3big.com) </ title> </ Head> <Cuerpo> <Div id = "contenedor" style = "width: 500px"> <Div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> El título principal página </ h1> </ div> <Div id = "menú" style = "background-color: # FFD700; altura: 200px; ancho: 100px; float: left;"> <B> Menú </ b> <br> HTML <br> CSS Finanzas Javascript </ div> <Div id = "contenido" style = "background-color: #eeeeee ; altura: 200px; ancho: 400px; float: left;"> texto aquí </ div> <Div id = "pie de página" style = "background-color: # FFA500; clear: both; text-align: center;"> Derechos de Autor © w3big.com </ div> </ Div> </ Body> </ Html>

Trate »

El código HTML anterior produce los siguientes resultados:

diseño HTML - utilizando tablas

El uso de HTML etiqueta <table> es para crear un diseño de una manera sencilla.

La mayoría de los sitios pueden utilizar los <div> o <table> elementos para crear varias columnas. CSS se utiliza para posicionar los elementos, o crear un fondo de colores y apariencia de la página.

lámpara Incluso si se puede usar tablas HTML para crear un diseño agradable, pero el propósito es presentar los datos tabulares mesa de diseño - No herramienta de diseño de la mesa!

El siguiente ejemplo utiliza tres filas de dos tablas - la primera y la última línea utiliza el atributo colspan para abarcar dos:

Ejemplos

<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Title> Este tutorial (w3big.com) </ title> </ Head> <Cuerpo> <Tabla width = "500" border = "0"> <Tr> <td colspan = "2" style = "background-color: # FFA500;"> <H1> en la página principal </ h1> </ Td> </ Tr> <Tr> <td style = "background-color: # FFD700; ancho: 100px;"> <B> Menú </ b> <br> HTML <br> CSS Finanzas Javascript </ td> <td style = "background-color: #eeeeee ; altura: 200px; ancho: 400px;"> texto aquí </ td> </ Tr> <Tr> <td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Derechos de Autor © w3big.com </ td> </ Tr> </ Table> </ Body> </ Html>

Trate »

El código HTML anterior produce los siguientes resultados:


Diseño HTML - Consejos útiles

Consejo: los mayores beneficios del uso de CSS es que si el código CSS se almacena en una hoja de estilos externa, entonces el sitio será más fácil de mantener.Mediante la edición de un solo archivo, puede cambiar el diseño para todas las páginas. Para obtener más información acerca de CSS, visite nuestro tutorial de CSS .

Consejo: Debido al crear un diseño avanzado es muy consumidora de tiempo, el uso de una plantilla es una opción rápida.A través de un motor de búsqueda se puede encontrar una gran cantidad de plantillas libres del sitio web (Usted puede utilizar éstos diseño del sitio creado previamente, y optimizarlos).

etiquetas de diseño HTML

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。