Saltar al contenido

Estructura de CSS – maquetación

Aqui un postulado de estructura de web a nivel de div – id.
Fuente: http://www.depstudio.com.ar/portfolio.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>tres moscas verdes | dise&ntilde;os exclusivos en tarjeter&iacute;a artesanal | tarjeter&iacute;a comercial - tarjeter&iacute;a social - dise&ntilde;o gr&aacute;fico</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/estilo.css">
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />
	<script type="text/javascript">
	//Fix para el flickeo en IE6
		try {
		  document.execCommand('BackgroundImageCache', false, true);
		} catch(e) {}
	</script>
<![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<script type="text/javascript" src="java/external.js"></script>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1>tres moscas verdes | dise&ntilde;os exclusivos en tarjeter&iacute;a artesanal</h1>
		</div>
		<div id="menu">
			<ul>
				<li id="btn-tresmoscasverdes"><a href="#" id="seleccionado" title="tres moscas verdes?">tres moscas verdes?</a></li>
				<li id="btn-clientes"><a href="clientes.php" title="clientes">clientes</a></li>
				<li id="btn-contacto"><a href="contacto.php" title="contacto">contacto</a></li>
			</ul>
		</div>
		<div id="contenido">
			<div id="columna-izquierda">
				<div id="titulos">
					<h2 id="titulo-tres-moscas">tres moscas verdes?</h2>
				</div>
				<div id="textos">
					<p class="frase"><span>"</span>Vosotras, las familiares, inevitables golosas, vosotras, moscas vulgares, me evoc&aacute;is todas las cosas.<span>"</span></p>
					<p class="firma-frase">(Antonio Machado)</p>
					<p>No somos tres, no somos verdes y muchos menos somos moscas. Pero compartimos con ellas la habilidad de estar siempre en movimiento, buscando cosas divertidas, interesantes y &uacute;tiles.</p>
					<p>Nuestros dise&ntilde;os siguen esa l&iacute;nea: son vers&aacute;tiles, adaptables, combinables y diferentes. Buscamos que nuestras tarjetas sean la puerta de entrada a una ocasi&oacute;n &uacute;nica. Que puedan representar a quien las entrega y alegrar a quien las reciba.</p>
					<p>Sigamos volando...</p>
				</div>
			</div>
			<div id="columna-derecha">
				<ul>
					<li id="btn-comercial"><a href="tarjeteria-comercial.php" title="tarjeter&iacute;a comercial">tarjeter&iacute;a comercial</a></li>
					<li id="btn-social"><a href="tarjeteria-social.php" title="tarjeter&iacute;a social">tarjeter&iacute;a social</a></li>
					<li id="btn-dg"><a href="diseno-grafico.php" title="dise&ntilde;o gr&aacute;fico">dise&ntilde;o gr&aacute;fico</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="footer">
		<div id="pie">
			<div id="telefonos">
				<p>Tel. Fijo: ( 0223 ) 479 7560 Tel. M&oacute;vil: ( 0223 ) 155 069 884 / 155 231 536</p>
			</div>
			<div id="mail">
				<a href="contacto.php" title="contacto">info@tresmoscasverdes.com.ar</a>
			</div>
			<div id="validaciones">
				<a href="http://validator.w3.org/check?uri=referer" id="html" rel="external" title="valid HTML 4.01">valid HTML 4.01</a>
				<a href="http://jigsaw.w3.org/css-validator/check/referer" id="css" rel="external" title="valid CSS">valid CSS</a>
				<h5><a href="http://www.depstudio.com.ar" rel="external" title="desarrollo dep studio">desarrollo dep studio | dise&ntilde;o y desarrollo web con est&aacute;ndares</a></h5>
			</div>
		</div>
	</div>
</body>
</html>

Si te ha interesado este artículo y deseas un apoyo o asesoría en algún requerimiento, envíame un mensaje a: (info@juliopari.com) o sino a través de Linkedin: https://www.linkedin.com/in/juliopari/

Etiquetas: